Hidden 3D interaction behind a header menu button. A traditional Vietnamese phin coffee filter an...Hidden 3D interaction behind a header menu button. A traditional Vietnamese phin coffee filter an...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Hidden 3D interaction behind a header menu button.
A traditional Vietnamese phin coffee filter and coffee beans revealed through a shader-based reveal with the phin going from assembled to disassembled parts and the beans going in helix path around it.
Few mouse interactions: slight parallax on the phin, light following the cursor, and the beans have physics to push them around. Post-processing and steady 60fps thanks to three.js. The scene (1.5 MB of assets) loading is deferred to not block the page loading/main thread since it's not visible without user interaction.
If you're looking for a design that bridges your brand's essence and its emotional impact, please reach out!
Nicolette's avatar
this is so fun, i love when little bits of magic are tucked away into the details. great work!
Quentin's avatar
Thanks Nicolette! Yeah I had fun with this, the website looks non-3D in appearance so it's bewitching on first time trying to use the menu button. It could even get pushed further by engraving the name of the café in the model for more personality (and echoes to their branded...
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started