Noticed something wild inspecting a header layout at a coffee shop in Portland last week

I was sitting at this spot called Never Coffee in Portland last week and noticed their menu board had this really slick hover effect where each item slid up and revealed a tiny price tag underneath. The whole thing was done with maybe 20 lines of CSS using clip-path and some clever transitions. No JavaScript at all. Has anyone else found random real world examples that made you rethink how you approach something like hover states?

2 comments

2 Comments

roberts.diana16d ago

Read somewhere that clip-path is having a moment in commercial design because it lets you do shape morphing without bogging down the browser. That coffee shop sounds like they had a designer who actually gets performance. Most places just throw JS at hover effects and call it done. Clip-path is way cleaner for that kind of reveal animation. It's nice seeing real world examples that prove you don't need a framework for simple interactive stuff.

nathang6716d ago

Wait, you mean someone actually built a real production site using clip-path for shape morphing and it didn't crash or look terrible on mobile? That's honestly hard to believe. I've messed around with it in codepen but never thought it'd hold up in the real world.