Vue d'ensemble : Landing 3D

A one-page landing site for a juice brand, built with Next.js 15. A 3D wheel of 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.

Features

• 3D can carousel: four juice cans on a wheel, built with React Three Fiber and Three.js.
• Theme per flavour: background, glow and buttons change colour with the selected juice.
• Floating fruits: fruit images that follow the selected flavour.
• Ice cubes and leaves: decorative elements around the scene.
• Water ripple: the background ripples under the pointer.
• Responsive: a separate layout for phones.
• Two languages: English and Arabic, with a right-to-left layout for Arabic.

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.

Requirements

Pick one:

• Docker, nothing else.
• Node.js 22 or newer and Yarn 4. Yarn comes with Node through Corepack: run corepack enable once if the yarn command is missing. The exact Yarn version is pinned in package.json.

The site reads no environment variables, so there is no .env file to create. Every file it loads ships in this folder, including the 3D models and the lighting, so it needs no outside service to run.

Path A: run it with Docker

From this folder:

docker build -t juicy .
docker run -p 3030:3030 juicy

Open http://localhost:3030. Press Ctrl+C in the terminal to stop it.

Path B: run it without Docker

From this folder:

yarn install
yarn dev

Open http://localhost:3030. The development server reloads the page when you change a file.

For the production build:

yarn build
yarn start

It is served on http://localhost:3030 too.

A port is already in use?

Another program is using port 3030. Stop it, or use another port:

• With Docker, change the left number only: docker run -p 3041:3030 juicy, then open http://localhost:3041.
• Without Docker: yarn dev -p 3041 (or yarn start -p 3041), then open http://localhost:3041.

Languages

English is at /en (the default) and Arabic at /ar. Opening / sends the visitor to the language their browser prefers. The menu has a language switcher.

In Arabic the text and the layout run right to left. The 3D scene (wheel, fruits, ice) keeps its own orientation.

Make it yours

The wheel holds four cans, one per quarter turn (src/features/carousel/constants/positionConfigs.ts). To replace a flavour, rename its id in src/types/juice.ts, then update its entry in juiceCans.ts, themes.ts, fruitImages.ts, sampleCartItems.ts (if it is in the cart), and under juices and cart.items in both message files. yarn typecheck lists any code file you missed.

Scripts

Dependencies are pinned to exact versions, and yarn.lock is included, so yarn install gives you the same versions this was tested with.

Project structure

messages/                   # en.json, ar.json
public/assets/              # 3D can models and images
src/
├── app/[locale]/           # layout (html lang and dir, fonts, metadata) and the page
├── components/             # shared UI: backgrounds, spinner, LocaleSwitcher, ui/Input, ui/ThemedButton
├── features/
│   ├── carousel/           # 3D juice wheel
│   ├── floating-fruits/    # animated fruit images
│   ├── ice-cubes/          # ice cube and leaf decorations
│   ├── landing/            # page state hook and the water-ripple stage
│   ├── navigation/         # nav bar, cart and account dropdowns, sign-in form
│   └── product-showcase/   # product text, sizes, themes, contact menu
├── hooks/                  # shared hooks (useMobile, useInView, ...)
├── i18n/                   # routing, request config, navigation helpers
├── middleware.ts           # language detection and redirects
└── types/                  # shared types

Tech stack

Next.js 15 (App Router), React 19, TypeScript, Tailwind CSS 4, React Three Fiber with Three.js and Drei, GSAP, next-intl, React Hook Form with Zod, react-water-wave.

Licence

The licence terms are in LICENSE.md, at the top of your downloaded folder.

More templates

More templates are at Aniq UI.