What the template is
A one-page landing site for a juice brand. A 3D wheel of four juice cans turns with the mouse wheel, the arrow keys or the arrow buttons, and the whole page takes on the colours of the flavour in front.
- 3D can carousel: four cans on a wheel, one per quarter turn. Drag a can to turn it; it springs back when you let go.
- A theme per flavour: the background, the glow behind the can and the buttons change colour with the selected juice.
- Floating fruits, ice cubes and leaves around the scene, and a water ripple that follows the pointer.
- A separate layout for phones, used at 600 pixels wide and below.
- English and Arabic, with the Arabic page laid out right to left.
The flavours are Lemon Ginger, Blueberry Açai, Mango Burst and Raspberry Rosé.
The sign-in form and the cart panel are demo UI. The form checks its fields, but there is no back-end, so nothing is sent anywhere. The cart shows two sample items.
What it is built with
| Part | Built with |
|---|---|
| Framework | Next.js 15 (App Router), React 19, TypeScript |
| Styling | Tailwind CSS 4 |
| 3D scene | React Three Fiber, Three.js and Drei |
| Animation | GSAP, and react-water-wave for the ripple |
| Languages | next-intl |
| Sign-in form | React Hook Form with Zod |
There is no database and no API. The site reads no environment variables, so there is nothing to configure before you run it, and every file it loads ships in the folder.
What is in the download
The ZIP holds one folder, juicy, with the whole site:
| Path | What it is |
|---|---|
messages/ | The text of the page, en.json and ar.json |
public/assets/ | The 3D can models and the images |
src/app/[locale]/ | The layout (language, direction, fonts, page title) and the page |
src/features/ | The parts of the page: the carousel, the fruits, the ice, the navigation and the product text |
Dockerfile | Builds an image that serves the site on port 3030 |
README.md | The guide, also in these docs |
LICENSE.md | The licence |
Dependencies are pinned to exact versions and yarn.lock is included, so you install the versions the template was tested with.
English is at /en and Arabic at /ar. On Windows, use PowerShell or Git Bash for the commands in these docs.