Box Unfold Scroll

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the carton to your <body>. The full printed demo carton is in index.html; this is its skeleton. Every panel has an outer (printed) face and an inner (board) face, each ending in a shade element:

In your downloadThe working code for this step, in index.html.

What the effect needs from your markup: one [data-carton] scene holding a [data-carton-world], and inside it the thirteen [data-carton-panel] elements nested exactly as above. The nesting is the hinge structure: each panel folds from its parent's edge, so moving a panel to another parent changes the box. The panel names (front, lid, tuck, bottom, btuck, sideR, sideL, back, glue, dustTR, dustTL, dustBR, dustBL) select each hinge's fold angle and timing. Each panel's direct children include an [data-carton-face="out"] and an [data-carton-face="in"] face, and each face holds one [data-carton-shade] element for its lighting. [data-carton-product] and [data-carton-cue] are optional.

What is only the demo's styling: everything with a print or print__ class (the Sundra brand, the copy, the sun illustration, the barcode, the paper cards), the vivid orange, the cream paper, Mona Sans, the jar's print and the pill-shaped cue. Replace the contents of each outer face with your own artwork: HTML, an SVG or a background image cropped to that panel all work. The jar is restyled in code (see "The 3D Jar" below); to use a flat product image instead, set data-carton-jar="off" and point the <img> at a cutout with a transparent background. If it has a different shape, change the 1.645 height ratio on .carton__product to its height divided by its width.

CSS the effect depends on:

• --u on .carton is the size of everything: one unit is the front panel's width, the depth is 0.82u, the height 1.2u, and the print is sized in em because the world's font-size is 1u. Change the proportions through --W, --D, --H, --T (tuck), --G (glue) and --F (dust flap), and move the netshadow path to match.
• transform-style: preserve-3d on .carton__world and every .carton__panel, backface-visibility: hidden on the faces, and the transform origins on each panel's hinge edge. Do not put overflow, filter, opacity below 1 or clip-path on a panel or the world: any of them flattens the 3D. Clip and filter the faces instead, as the die-cut flap shapes do.
• The panels' positions in the stylesheet are the flat dieline, and that is what no-JS and reduced-motion visitors see. Keep that layout legible on its own.
• .carton__world is hidden under .has-js until the script has folded the box, so visitors never see the flat net flash first. The gate is lifted under reduced motion, and the script removes .has-js if GSAP fails to load.
• The product's resting place is plain CSS too: --pw (width), --px and --py (bottom-centre anchor, measured from the front panel's top-left corner) and --pz-k (how far in front of the net it stands, in units). The script reads them, so moving the product only takes CSS.
• --world-x and --world-y place the flat composition in the stage. The portrait media query stacks the product under the net and sizes --u so the net fits the screen width.

Set these on the [data-carton] element.

The order in which panels open is a schedule at the top of script.js: each hinge has a closed angle, a start and a duration, as fractions of the whole scroll. Move the start values to reorder the sequence, or lengthen a duration to slow one panel down. Keep the tuck flap starting after the lid, so on the way back it folds down before the lid closes over it, and keep the product rising only after the top dust flaps have opened, so it never passes through them. The lid, camera and product timings sit next to it.

• Reduced motion: no pin, no scroll runway and no smooth scrolling. The carton is shown flat as its dieline with the product presented, so every printed panel is readable. Switching the preference while the page is open swaps between the two modes.
• No JavaScript, no WebGL or blocked CDN: the stylesheet's default layout is the flat dieline with the product, and the product is a baked render of the same 3D jar, so the content is never blank. Under reduced motion three.js is not downloaded at all.
• Screen readers: the print is real text inside a labelled group, the barcode and the product image have text alternatives (the canvas itself is hidden from assistive technology), and the decorative illustration, edges and shadows are hidden. The scroll cue is decorative and hidden from assistive technology.
• Keyboard: the effect follows the page scroll, so arrow keys, Page Down and Space drive it like any other scroll. There are no controls to focus.
• Touch: touch scrolling drives the same sequence. Phones in portrait get the stacked layout with the net fitting the screen width; the smallest print (ingredients and nutrition) is proportionally small there, so keep critical copy large.

The jar is built entirely in code with three.js and drawn into a canvas inside the carton's CSS 3D world, so the carton's front wall still hides it while it is inside the box. It is a wide-mouth jar: a lathed glass body with a short shoulder and neck threads hidden under the cap, real glass (transmission, thickness, index of refraction and reflections of a small built-in studio), chili crisp filled right up into the shoulder in two layers (a dark packed mass, and in front of it chili skin, crisp garlic and seeds pressed against the glass with clear oil between), a knurled black cap nearly as wide as the body, and a label printed onto a canvas and wrapped right round the body. It turns as it rises out of the carton, swings round to face you as it glides to its place with a small overshoot, and flutters slightly with scroll speed.

Restyling it: everything is in JAR_STYLE near the top of script.js:

• label: the kicker, brand, product name, heat rating, weight, the two side lines and the back panel text. The label waits for the web fonts before it is drawn, so it uses Mona Sans like the carton.
• colours: the label's print colour, ink and paper.
• glassTint: the colour seen through the thickest glass.
• cap: the cap colour.
• contents: the oil, the dark packed crisp and the six flake colours (chili skin, its highlight, garlic, seeds, toasted bits and the deep red behind). The textures are drawn in drawCrispMass and drawCrispFlakes at 2048 across the jar's circumference (1024 on touch screens).

JAR_YAW_INSIDE, JAR_YAW_RISEN and JAR_ELEVATION set how far it turns on the way up and how steeply you look down on it.

Fallback: assets/img/jar-render.webp is a render of this same jar captured from the live scene, with a transparent background. It shows without JavaScript, without WebGL, under reduced motion, while three.js loads and if the download fails. After restyling, capture a new one: scroll the demo to the end, hide everything but the canvas, and save it as 640 x 1053 with alpha.

Performance: the jar redraws only when its pose changes (scroll progress, the turn, the flutter settling) and never while the page is idle or the scene is off screen. The canvas is only as big as the jar's frame, at a pixel ratio capped at 2. The glass samples the contents behind it without three's roughness blur, so the crisp stays sharp through it. If a device struggles, the first lever is data-carton-jar="off"; the next is a lower cap in createJar.

Required:

• GSAP 3.12+ (the demo is built against 3.15.0)
• ScrollTrigger plugin

For the 3D jar (optional):

• three.js r180 (three@0.180.0) as an ES module through the import map in Quick Start, and WebGL. Without either, the baked render is shown. GSAP does not animate the jar: the carton's scroll progress sets its pose and three.js draws it.

Optional:

• Lenis 1.3+ for smooth scrolling (the demo loads 1.3.17). Turn it off with data-smooth="off" on <html> or ?smooth=off in the URL. If the page already runs its own window.lenis, the effect uses it and never destroys it.

Browser support: current Chrome, Edge, Safari and Firefox. Registered custom properties (@property) let the script read --u as pixels; older browsers fall back to measuring the front panel.