Kreva: A 3D Web Experience

"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