[HN Gopher] Show HN: I saw this cool navigation reveal, so I mad...
___________________________________________________________________
Show HN: I saw this cool navigation reveal, so I made a simple
HTML+CSS version
Two clip-paths, over the navigation: - The first clip-path is a
circle (top-left corner) - The second clip-path is a polygon, that
acts like a ray (hardcoded, can be improved) The original work by
Iventions Events https://iventions.com/ uses JavaScript, but I
found CSS-only approach more fun Here's a demo and the codebase:
https://github.com/Momciloo/fun-with-clip-path
Author : momciloo
Score : 134 points
Date : 2026-02-07 17:45 UTC (1 days ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| thekevan wrote:
| I saw this on Twitter about an hour ago and was going build one
| as well. Nice work!
| swyx wrote:
| one thing i dislike about "good design" in general is that it
| usually takes away from information density and practical
| convenience in order to achieve "good design". this feels like a
| bad tradeoff. i wish that designers cared about making things
| more accessible and delightful rather than impressing fellow
| designers.
| orphea wrote:
| Agree. I opened this iventions website, hated every second
| being there, closed it.
| division_by_0 wrote:
| Agree. Info-dense designs are also more difficult to implement
| and many designers lack experience in this area. E.g., creating
| a coherent design system that uses borders instead of excessive
| padding to separate elements is much more difficult than it may
| seem.
| falloutx wrote:
| Its not about information but about directing the user in this
| case. Not everything has to be information dense or even
| convenient. Sometimes you want users to scroll or make them
| click step buttons. (checkout is sometimes made to have more
| steps to give users time to adjust to pain of paying)
| vrighter wrote:
| which in itself makes it a bad design in the first place.
| Because first and foremost it has to be functional.
| flaburgan wrote:
| It looks cool, but to have to navigate from one side of the
| screen to the opposite one is quite suboptimal
| mym1990 wrote:
| You don't have to optimize the fun out of every single thing in
| life.
| self_awareness wrote:
| The problem is when the engineer's fun starts being user's
| daily life. Then it's not fun anymore.
| jotaen wrote:
| This is the portfolio website of an event agency, not the
| Gmail website.
| self_awareness wrote:
| Fortunately.
| savolai wrote:
| On mobile, (my) thumbs are already at the locations where
| iventions places the toggle and the menu.
| uxcolumbo wrote:
| Neat experiment, but this is not good design.
|
| Design is about solving problems.
|
| A menu is suppose to help you to quickly find and get to a
| specific section of your site.
|
| Why do I have to click on a thing to reveal the menu even though
| on my laptop there is enough space to show it all? And then I
| have to move my mouse all to the other side of the screen?
|
| Who is this for?
|
| Nothing wrong with experimenting with CSS, but avoid
| 'dribbblizing' your designs if you intend to ship it to users who
| use your site for information or to get a job done.
|
| Edit: commenting more on the iventions.com website where this
| effect is in use.
| hippo22 wrote:
| "I have a cool idea in my head that I'd like to show other
| people" is a problem that some people need to solve.
| mym1990 wrote:
| Iventions site is clearly a showcase and uses maximalism, which
| is most definitely a design philosophy. Design may about
| solving problems, but the fact that you feel entitled to think
| that you know the problem that Iventions is trying to solve,
| and also that they are doing it wrong is very presumptuous.
| uxcolumbo wrote:
| Not presumptuous. All based on doing enough usability testing
| to understand that time and time again people get confused if
| you try to reinvent the wheel or trying to be fancy when it
| comes to navigating around your site. Stick to best
| practices.
|
| That's all.
| peckemys wrote:
| > Who is this for ?
|
| This effect imitates a spotlight, which is cited on the page
| and quite relevant for a company in the arts domain
| uxcolumbo wrote:
| I tried to use it yesterday on my iPad. Some kind of element
| was blocking the menu.
|
| Tried it today on my PC (big screen) - the intro animation is
| slow - 6-10 FPS and clicking on the menu item to reveal the
| items is slow as well. I could hear my fan spinning up.
|
| Not everyone uses the latest greatest Mx chipset.
|
| This tells me they haven't done any testing. Basically 'this
| looks cool' and 'works on my machine'.
| rhplus wrote:
| Flashback to the days of Macromedia Flash.
| elian55 wrote:
| Hola
| felineflock wrote:
| Good job! Looks amazing! It is a great way to call attention to
| content.
| AlexAplin wrote:
| I'm pretty forgiving about accessibility (I'm able to say this at
| all because I don't have to rely rigidly on accessibility tools)
| but nav menus feel like a baseline we shouldn't muck with.
| Tabbing doesn't seem to respond very well in the live example,
| and at least in the limited demo you can't expand the listing
| without using a mouse (I thought it would respond to a space with
| the :checked pseudo, but seems not).
| jackomelon wrote:
| Very neat.
| todotask2 wrote:
| You made me recalled we made something similar with growing
| circular on mobile menu the last decade. It was cool for our
| marketing event website.
| Gabrys1 wrote:
| calc(1.42 * 100vmax)
|
| is the same as
|
| 142vmax
|
| Just saying :-)
| bmacho wrote:
| Is there a demo? The link points to a github repo, and github
| pages is not active
| momciloo wrote:
| good point. added the demo link
| xtiansimon wrote:
| The _inspiration_ site loaded slowly on my Dino laptop, but
| the _demo_ was super fast. Good job.
| ddtaylor wrote:
| Site is death hugged? Anyone have a working link?
| pmkary wrote:
| This is just awesome!
| tgv wrote:
| Wrt to the remarks about this being bad design: not everything is
| meant for (immediate) usability. Sometimes, a web page functions
| or doubles as marketing material.
|
| And there's more than "minimal number of interactions"
| functionality. People generally like good looking stuff. While it
| may be superfluous, it may feel more pleasing than yet another
| dark gray text on a light grey square. It may even help
| remembering navigation, since it's easier to remember deviating
| design.
| self_awareness wrote:
| As expected, this doesn't work with non-standard browser window
| sizes and is butchered on mobile in horizontal mode.
|
| But since the original implementation is also broken, I guess
| that's OK?
|
| We really have a low bar for quality these days. I hope this
| won't be used anywhere that's relevant.
| MagicMoonlight wrote:
| That looks really cool. No idea what to use it in, but it's
| great.
| djfobbz wrote:
| This is not mobile friendly. Was that intentional?
| xtiansimon wrote:
| I like the demo. It's bold, creative, and dynamic. Will there be
| more explorations? Maybe a writeup on the design to code process?
___________________________________________________________________
(page generated 2026-02-08 23:01 UTC)