AI CSS Animations

Unboxing

In a bright blush studio, a forest-green corrugated mailer box with gold-foil lettering opens its tuck flap and lid, two sheets of tissue roll back from a sticker seal, and an amber-glazed candle with an ash-wood lid rises out and hovers above the box.

Written and rendered by AI CSS Animations Oct 18, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
3D
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Unboxing videos, in which someone opens a newly bought product on camera, grew into a popular online genre in the late 2000s. Brands responded by designing the opening itself: printed mailer boxes with a pattern inside, tissue paper sealed with a sticker, molded inserts and the product presented as the reveal. Product films now stage the same sequence in 3D, using one continuous move to show packaging, materials and care.

The prompt

Make a 10-second 3D unboxing film: a branded mailer box opens its tuck flap and lid, tissue paper rolls back from a sticker seal, and a glazed ceramic candle rises out under soft studio light.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Ollery, candles (fictional).
- Product: No. 7, Cedar & Smoke.
- Line: "Poured by hand in small batches."
- Details: 220 g · 50-hour burn · ash-wood lid
- Seal: a round sticker with an "O" monogram.
- Length: 10 seconds.
</inputs>

<direction>
- Studio, bright and airy, at 1 unit = 10 cm: a seamless blush sweep #EBCBC2 whose floor curves up into the wall, lifting to #F5E3DD behind the box.
- Light, so every surface reads from the first frame: bake an environment once with PMREMGenerator.fromScene from a white room with a large softbox overhead-left, a tall warm strip at right and a low fill in front. Add a warm DirectionalLight key from upper left with soft shadows (PCFSoftShadowMap, 2048 map, shadow radius 8), a cool DirectionalLight rim from behind right at 0.6 so the dark green box separates from the background, and a HemisphereLight (#FFFFFF / #E8CFC6, 0.8); ACESFilmic tone mapping at exposure 1.2, sRGB output. The frame never goes dark: the green box always shows lit edges, the foil always carries a highlight, and every shadow is a soft contact shadow.
- The box, built to read as a real corrugated mailer box, 24 × 18 × 9 cm: every panel is 0.3 cm board with visible thickness; cut edges show the corrugation (a generated texture of small arches between two liners, kraft #B98E5E); folds have small rounded bevels; a 3 cm semicircular thumb notch is cut into the front wall's top edge. The outside is printed matte forest #23402F (roughness 0.85, a faint paper grain in the roughness map); the inside is cream #EFE6D6 printed with a repeating pattern of small forest sprigs (a CanvasTexture). The lid hinges along the back top edge and has a front tuck flap that slots inside the front wall, with two side dust flaps folded under it. On the lid, "OLLERY" and a thin border rule in gold foil: a decal with an alpha map in MeshPhysicalMaterial (#D9B26A, metalness 1, roughness 0.25), with polygonOffset so it never z-fights.
- Inside: a molded paper-pulp insert (#CFC6B6, a fibrous roughness map, a softly rounded cavity) and two sheets of cream tissue (#F3EADF, roughness 0.95, opacity 0.92, a generated crinkle normal map) folded over the product from left and right, meeting in the middle under a 5 cm terracotta sticker (#B5583A with a cream "O").
- Tissue: each sheet is a 30×30-segment plane that folds back over its side wall like paper: rows rotate about the hinge line, each lagging the one before by a smooth falloff, so the sheet rolls back in a soft curl instead of swinging flat, with a few seeded sags so it never reads as board. The sticker rides on the right sheet.
- The candle, built to read as a real glazed ceramic candle: a stoneware tumbler 9 cm across and 10 cm tall (LatheGeometry: a gently tapered wall, a 0.4 cm rounded rim, a recessed foot ring) in an amber glaze #B8622F (MeshPhysicalMaterial, roughness 0.32, clearcoat 0.6) with seeded dark speckle, breaking paler at the rim; the bottom 1.2 cm is bare clay #D8C3A5 (roughness 0.9) below a wavy glaze line. A lid of pale ash #CDA978: a 9.4 cm disc 1.4 cm thick with rounded edges, fine parallel grain on top and end grain around the edge, resting on the rim with a hairline gap. A cream paper label 4.5 cm tall wraps the front (a slightly larger cylinder segment with a CanvasTexture): "OLLERY", "No. 7", "Cedar & Smoke", "220 g · 50 hr".
- Camera: fov 30, a three-quarter view from front-left and above (pitch 34°). It starts close on the foil lettering, pulls back as the lid opens, and eases up as the candle rises, so the final frame holds the open box centered at stage (1150, 760) with the candle hovering above it at about y 400 and the left side clear for type.
- Motion like real cardboard: the tuck flap pulls out of the front wall first, rotating about its fold; the lid swings open about its hinge to 105° over 1.0s on cubic-bezier(0.3, 0, 0.2, 1) and settles from a 3° overshoot; the dust flaps fold out to 70°, 0.1s apart. The candle rises straight up 18 cm over 1.4s on cubic-bezier(0.25, 0.1, 0.1, 1), turning 35° to bring its label to camera, and hovers; its shadow on the tissue widens and softens as it rises.
- Type (HTML over the canvas): "No. 7" over "Cedar & Smoke" in DM Serif Display 400, 84px, #2A1E1A, from (120, 360); the line in Outfit 400, 30px, #5E4E47, beneath; the details in Outfit 500, 20px, uppercase, tracked 0.16em, #5E4E47.
- Premium: cardboard with thickness and flutes, foil that catches the light, tissue that rolls like paper, a glazed object you could pick up, all in bright soft light. Cheap: a cube with an image on its lid, a lid snapping open, a shiny plastic cylinder in a dark void.
Banned: dark backgrounds, bloom, glow, sparkles, confetti, hands, a lit flame, real brand marks, z-fighting decals, gaps between box panels, hard grey shadow slabs, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: close on the lid: a soft highlight slides across the gold foil lettering as the camera pulls back to the whole box on the blush sweep.
- 1.2–1.8s: the front tuck flap pulls out of the front wall.
- 1.8–3.0s: the lid swings open and settles; the dust flaps fold out; the sprig-printed inside and the sealed tissue appear.
- 3.0–3.4s: a beat on the sticker.
- 3.4–4.6s: the left sheet rolls back over the left wall, then the right sheet with the sticker 0.3s later, revealing the candle in its pulp insert.
- 4.6–6.0s: the candle rises out, turning to show its label. At 6.0s it hovers above the open box: a complete frame.
- 6.0–7.2s: the name, the line and the details rise in at left, 0.15s apart; the camera eases up.
- 7.2–8.6s: everything settles; one last soft highlight creeps over the glaze.
- 8.6–10.0s: hold, perfectly still.
For other lengths, stretch the gaps between the reveals; keep the lid swing at 1.0s, the rise at 1.4s and at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Flap and lid angles, tissue curl, candle height and camera are closed-form functions of t; the corrugation, sprig print, crinkle, wood grain, glaze speckle and label textures are generated once at load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the box reads as corrugated board with thickness, a tuck flap and dust flaps from every angle, the scene is bright from t = 0 with the green box's edges visible, the foil and label never z-fight, the tissue curls rather than swinging flat, the candle reads as glazed stoneware under a wooden lid, its shadow stays soft, and the 6s and final frames are both complete compositions. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: 3D motion design inspiration