VOLTA – 3D Product Launch Landing Page Template for Drinks & Brands (Next.js, React Three Fiber)

VOLTA is an immersive 3D product launch landing page built with Next.js 16 and React Three Fiber. The demo brand is a fictional energy drink, but the structure fits any single hero product that comes in variants: a beverage, a cosmetic, a gadget or a supplement. One glossy can sits in a fixed WebGL scene, and the page tells its story in eight scroll chapters while the camera moves between framed stops.

Try the live demo at dev3.tech/demos/volta, or watch the video tour and step through the desktop, tablet and phone screenshots on this page.

Eight chapters, one product

1. Ignite – the can spins in from below, a lightning strike and shockwave fire, and small arcs crawl over the surface.
2. Crack it – the pull-tab lifts, the opening appears, and the fizz burst and liquid splash slow down until they hang in mid-air.
3. Fuel – a caffeine molecule, vitamin capsules, fruit slices and ice cubes burst out of the can and orbit it beside a numbered ingredient list.
4. Original, Ultraviolet and Solar – three flavour chapters. Scrolling or clicking a flavour sends a liquid line up the can label and recolours the background, lights, reflections and type to that flavour's colour world.
5. Charge – an interactive chapter where a charged particle field and lightning arcs reach for the visitor's pointer, and dragging pulls bolts around the can.
6. Grab one – the other two cans slide in for a three-can line-up next to the call to action and a flavour picker.

Effects and shaders

• Fully procedural assets. The lathe-profiled 500 ml can (domed base, neck, rim bead, extruded pull-tab), label art, condensation normal and roughness maps, fruit cross-sections and the kinetic-type sheet are all generated in code. There are no model or image downloads.
• Two-label liquid wipe. The label is a MeshPhysicalMaterial patched with onBeforeCompile, so the next flavour's label rises up the can behind a wavy liquid line with fizz bubbles trailing under it.
• Studio lighting per flavour. A custom softbox environment is re-baked through PMREM when the flavour changes, so reflections on the aluminium match the new colourway.
• Lightning. Midpoint-displacement bolts drawn as fat lines with a white core over a coloured additive glow.
• Postprocessing. Bloom, ACES filmic tone mapping, film grain, a vignette and chromatic aberration that grows with scroll speed.
• Kinetic type. Giant solid and outlined words sit behind the can, camera-locked and changing with each chapter.

Performance, accessibility and responsiveness

• Scroll state lives in a mutable per-frame store, and React subscribes only to the chapter and flavour, so scrolling never re-renders the component tree.
• All shaders, including every flavour's label, are compiled up front. The loader holds at 99 % until fonts, label art and shaders are ready, so the first scroll does not hitch.
• Pixel ratio is capped at 1.75 and the scene loads client-side only.
• prefers-reduced-motion turns off smooth scroll, parallax, idle spin, chromatic aberration and the marquee motion, shortens the wipe and fly-in, and slows lightning regeneration.
• Every control is a real button. The arrow and Page keys step between chapters, and the page snaps to the nearest chapter when scrolling stops.
• Each chapter has its own camera stop for wide screens. On portrait screens the can is centred and framed high, with the copy panel below.

Rebrand it

All copy, chapters, ingredients and the three flavour colour worlds (primary, secondary, background and label ink) live in one file, lib/content.ts. The label, logo and type are drawn by canvas painters in components/scene/art.ts, so a new brand name or colour updates the can itself. Fonts are loaded with next/font (Anton, Space Grotesk and JetBrains Mono) and can be swapped in app/layout.tsx.

What's in the download

• The complete Next.js project source (App Router, TypeScript)
• Documentation/index.html and README.md
• A build:demo script for a static export served from a sub-path

Requirements

• Node.js 20.9 or newer and npm
• A browser with WebGL 2

VOLTA, its flavours and all nutrition figures are fictional sample content. Read how we built VOLTA for the design decisions behind the scene.