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
Back to feedPost
"Building an interactive website with smooth scrolling, a 3D digital book, and a brewing calculator"
I designed and developed the web interface for KREVA, a coffee and cafe brand in Dhaka. The goal was to translate their black and gold physical atmosphere into a digital space that feels the same way.
Instead of a standard static menu, I wanted users to feel the brand before they visit. That meant building an interactive site with 3D elements and smooth transitions.
WHAT I BUILT:
Smooth scrolling: I used Framer Motion for scroll animations that guide users through sections from roasted coffee to signature waffles. The transitions feel fluid and match the brand tone.
Interactive 3D book: A realistic book interface where users can drag page corners to turn pages. Inside, the menu, ingredients, and a guest ledger are laid out like a physical journal.
Brewing calculator: Embedded in the 3D book, users select their brew method (Pour Over V60, AeroPress, etc.) and get the water-to-coffee ratio and extraction time.
3D spatial elements: A dynamic cube and spatial navigation for the menu section. Users interact with the menu through 3D space instead of a flat list.
Auto tour mode: A hands-free guided walkthrough of the site's 3D features and menu highlights.
THE TECHNICAL SIDE:
The site is built with React and Next.js on the frontend. Framer Motion handles the scroll animations, page transitions, and micro-interactions. Three.js and WebGL power the 3D cube, the interactive book physics, and the spatial elements. Tailwind CSS keeps the styling consistent with the black and gold design system across all devices.
Deployment is on Netlify. The whole thing runs in the browser without plugins.
WHAT I LEARNED:
The hardest part was the 3D book. Getting page turns to feel natural required tuning the physics, the drag interaction, and the visual feedback. Too stiff and it feels like a button. Too loose and it feels broken.
Framer Motion and Three.js work well together but need careful coordination. Both try to animate the same elements, so I had to define clear boundaries for which system handles what.
Built by Samin Sami | Developer & 3D Experimentation
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
Challenges
View all
Related posts
Really happy with how this interaction turned out. Sound effects feel super satisfying as well
The interaction feels so satisfying. The sound effects are a really nice touch. 🔥
I’ve seen a lot of posts on X about Astra’s ability to generate impressive designs from a single prompt.
TBH, I’d seen similar claims before (about other models) and then discovered that the “prompt” included a whole block of HTML, CSS, and JS 🤭
This time, though, Astra genuinely surprised me.
I already had a landing page with a defined color palette, typography, visual elements generated with Adobe Firefly. I gave Astra the landing page (.png) and just one sentence: “Generate one more section here using this text:…”
And somehow, I got 10 distinct ideas that all felt consistent with the original design - from the colours and spacing to the typography and overall visual language.
Even the new visual elements matched the texture of the ones already used on the landing page.
So far, I haven’t been able to get the same level of visual consistency from Claude.
Have you tried Astra for visual exploration?
I love the visuals!