Interactive 3D Packaging Experience
A packaging and print studio site built around one continuous 3D world. A single procedural rigid box carries the entire page — the camera, the lid hinge and the dieline unfold all interpolate from the same scroll journey.
- Built for
- The Pack Style
- Scene
- One camera, five waypoints
- Geometry
- Procedural — no model files
- Finishes
- Four, switched live
Overview
A premium corporate site concept for a packaging and print studio. Rather than dropping a 3D widget into one section, the whole page is directed as a single camera move: one scene, one box, five waypoints. Scrolling advances a journey that simultaneously drives camera position, look-at target, the lid hinge, a dieline unfold and a set of satellite packaging pieces.
Objective
Show a physical, tactile product category on a screen — where a visitor cannot pick anything up — without falling back on a gallery of stock photography.
Problem and opportunity
Packaging is bought on how it feels in the hand: board weight, foil, the resistance when a rigid box opens. A static image flattens all of that. Real-time 3D can restore the material read, but only if it is directed rather than left as a free-floating object spinning in a box.
Solution
One WebGL world spans the full page. The box geometry, its lid and its finishes are generated procedurally in code — no imported model — so finish switching is a material change rather than an asset swap. Scroll position maps onto a journey value that every part of the scene reads from, which is what makes the page feel like a single directed shot instead of five disconnected widgets.
Technology
- Framework
- Next.js 16React 19TypeScript
- 3D
- Three.jsReact Three Fiber 9drei
- Motion
- GSAP + ScrollTriggerFramer MotionLenisSplitType
- Styling
- Tailwind CSS 4Lightning CSS
Key features
What is actually in the build.
- 01
One continuous 3D world
A single camera and a single box serve the entire page. Five waypoints — hero, intro, services, craft and capabilities — define camera position, look-at, lid angle, unfold amount and satellite count, and the scene interpolates between them as you scroll.
- 02
Live finish and foil switching
Gold leaf foil, kraft eco, silver metallic and matte minimal are rendered on the box in real time. Because the box is procedural, a finish is a change of material parameters rather than a second model to download.
- 03
Procedural box geometry
The rigid box, its lid, the ribbon and the surrounding satellite pieces are all constructed in code. There is no GLB or texture set to fetch, which is why the scene loads without a model-loading step.
- 04
Pointer presence
The camera drifts a fraction of a world unit with the pointer — deliberately small, so the object reads as having presence rather than as something being steered.
- 05
Craft detail tabs
Foil and emboss, material, structure and finishing each get their own panel with animated figures, so the production vocabulary of the business is on the page and not just implied by the 3D.
Try it
The box, rebuilt here.
Interactive 3D
The rigid box viewer runs on desktop, where there is enough headroom for it. Open the live project for the full scroll-directed scene.
The same 3D world, reframed for a narrow viewport.
UX and interface decisions
Copy left, object right
Every section keeps its text in the left column so the canvas can be inset to the right on desktop and the camera can simply aim at the box. The layout and the 3D framing are designed as one decision.
Aspect-compensated framing
Field of view is vertical, so a narrow viewport shows less horizontally and the box would overflow. Each waypoint pushes the camera back along its own view axis in proportion to the aspect ratio, which keeps the composition intact from desktop down to phone.
Restraint in the palette
A near-black ground with a single warm gold accent. The 3D object is the only thing in the page allowed to be bright.
Technical approach
Scroll as a single source of truth
GSAP ScrollTrigger maps document scroll onto one journey value. Camera, lid hinge, unfold and satellites all read from it, so the scene can never fall out of sync with the page.
Deferred scene loading
The world scene is a dynamic import with SSR disabled, so the WebGL bundle is never part of the server render or the initial payload.
Capability flags without hydration mismatch
Browser capability reads go through useSyncExternalStore rather than a state-plus-effect pair, so the client gets the real value on first render and the server still has a stable snapshot to render against.
Challenges
The parts that needed a second attempt.
Keeping one object legible across five compositions
A box framed for a hero shot is the wrong size for a services grid. Waypoints had to be tuned as a set rather than individually, with the aspect pullback applied on top, so no single viewport breaks the sequence.
Material identity without an environment map budget
Foil, kraft, metallic and matte have to be distinguishable at a glance on a dark page. The finishes are separated by roughness and metalness response rather than by colour alone.
Next project
Smart Cash & Carry
Smart Cash & Carry · Interactive demo
