Overview
Juicy is an interactive juice product showcase by SonoJS. Built with Next.js 15, React 19, Tailwind CSS 4, React Three Fiber, and Three.js. A wheel of four juice cans turns with the mouse wheel, arrow keys, or buttons, and the page takes on the colours of the flavour in front (Lemon Ginger, Blueberry Açai, Mango Burst, Raspberry Rosé). Floating fruit, ice and leaves, a pointer water ripple, and a phone layout are included. Sign-in and cart are demo UI only - no backend. Static build ready for GitHub Pages.
Highlights
- 01
3D can wheel
Four juice cans on a React Three Fiber carousel - spin with wheel, keys, or buttons.
- 02
Theme per flavour
Background, glow, and chrome shift with Lemon Ginger, Blueberry Açai, Mango Burst, or Raspberry Rosé.
- 03
Scene polish
Floating fruit, ice, leaves, and a pointer water ripple keep the showcase lively.
- 04
Static and fork-ready
Open the live preview or download and run locally. GitHub Pages export included.
You get
- Full Next.js 15 + React 19 + TypeScript source (Juicy)
- 3D carousel (Three.js, @react-three/fiber, @react-three/drei)
- Flavour themes, floating fruit, ice/leaf decor, water ripple
- Demo sign-in form and cart panel (no backend)
- Responsive phone layout
- Static build ready for GitHub Pages
