I saw this cool navigation reveal, so I made a simple HTML+CSS version
Get picks like this daily. Today's launch numbers, the top launches, AI and tech news, and a daily opportunity pick, straight to your inbox.
Want to reach these readers? Sponsor an issue.
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 funHere's a demo and the codebase: https://github.com/Momciloo/fun-with-clip-path
HN · launched Feb 7, 2026 · 141 upvotes (top 7%) · 0 views
Niche: ui components and design tools · 168 launches, 10 in the last 7 days ▼ -23% · Explore this niche →
Category and tags
- Horizontal
- Dev tools
- Developer
- Not AI
- Hobby / open-source project
Visit website ↗ Source listing ↗
More like this: all 168 launches in ui components and design tools →
Could you build this?
Yes This is purely a creative CSS and HTML snippet utilizing CSS clip-paths for navigation animation.
Discussion
20 comments analyzed.
Concerns raised: Poor UI ergonomics - excessive mouse travel distance between interaction points, Performance issues - slow animations (6-10 FPS), high CPU usage on older hardware, Not mobile friendly - elements blocking menu, broken on iPad and horizontal mobile views, Non-standard browser window sizes not supported, Prioritizes aesthetics over functionality and usability best practices
Feature requests: Writeup on design to code process, More design explorations
Competitors
Other products that read as similar to this one : 80 launches clear the similarity bar, closest 8 shown.
Attention rank: #9 of 81 (itself plus its competitors, highest first, normalized so YC and Product Hunt are compared fairly).
Launched 81 days after the earliest competitor.
- CSS clip path generator · ph · 2026-09-08 · 2 upvotes · similarity 0.55
- Okinami_YASB · github · 2026-09-12 · 8 upvotes · similarity 0.43
- M. C. Escher spiral in WebGL inspired by 3Blue1Brown · hn · 2026-04-04 · 176 upvotes · similarity 0.38
- notch-launch-animation · github · 2026-10-13 · 10 upvotes · similarity 0.38
- I made a Tailwind alternative for Preact · hn · 2026-01-11 · 6 upvotes · similarity 0.37
- Corner Shaper · ph · 2026-09-10 · 1 upvotes · similarity 0.37
- Wave · hn · 2026-09-25 · 7 upvotes · similarity 0.37
- earstrip · github · 2026-10-20 · 65 upvotes · similarity 0.37
The niche, labels, vibe code rating and competitor comparison on this page are analysis by Nicheloom. If you use them, please credit nicheloom.com. How you may use our data.