AI CSS Animations

Luxury Perfume Film

A faceted glass perfume bottle holding glowing amber liquid turns slowly on black: rim light runs down its edges, a fluted gold cap catches one sweep of light, a soft reflection pools beneath, and a fine serif name settles below.

Written and rendered by AI CSS Animations Oct 16, 2026

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

About this style

Fragrance advertising has to sell something invisible, so it treats the bottle as sculpture: dark sets, slow camera moves and light that traces the glass. Product photographers build that look with strip lights and rim lighting so a clear object reads against black, while the color of the liquid carries the mood of the scent. High-contrast serif wordmarks and widely tracked capitals complete the codes of luxury. Fragrance, spirits and jewelry brands use it whenever they want restraint to read as expense.

The prompt

Make a 10-second luxury perfume film: a faceted glass bottle of amber liquid turns slowly in rim light on black, its gold cap catches one sweep of light, then a serif name appears.

<inputs>
- House: Maison Orvel.
- Fragrance: Ambre Lente.
- Descriptor: Eau de Parfum · 50 ml.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: stage #000000; amber #C8761E; gold #D4A955; rim light #FFE9C9 with a faint cool kicker #9FB4D9; type ivory #EDE3D1, descriptor #B8955A.
Bottle: a heavy octagonal prism (1.0 × 1.25 × 0.62), bevelled shoulder, thick base, flat-shaded so facet edges stay crisp. Glass: MeshPhysicalMaterial, transmission 1, ior 1.5, thickness 0.6, roughness 0.015.
Liquid: an inset octagon filling 72%. Transmission refracts only opaque objects, so the liquid is an opaque ShaderMaterial: deep #6E3509 in the core, warming to #C8761E where backlight passes, with a thin bright meniscus. The glass bends it at every facet.
Cap: a gold cylinder with 24 vertical flutes; metalness 1, roughness 0.2.
Studio, the whole look: bake an environment once from a black room with two tall strip lights behind the bottle, a dim overhead panel and a small warm softbox for the cap; scene.environment only, never the background.
Floor: black gloss; a mirrored copy of the bottle under a black plane fading to opaque within 0.25 units.
Camera: fov 22. A macro on the cap and shoulder, then a pull-back to the whole bottle while orbiting 40°, on cubic-bezier(0.45, 0, 0.15, 1). The light sweep is the environment rotating 35° once.
Final layout: the bottle centered, cap top near y 110, base near y 650. HTML type, centered: house in Bodoni Moda 500, 28px, uppercase, tracking 0.45em, baseline y 800; fragrance in Bodoni Moda 400 italic, 104px, baseline y 905; descriptor in Tenor Sans 400, 22px, uppercase, tracking 0.32em, baseline y 968. Each fades up over 1.4s as its tracking closes by 0.08em.
Motion is stillness: one move at a time, no bounce.
Premium is darkness, true refraction at the facets, amber glowing where light passes, one sweep of light. Cheap is a gold gradient, sparkles and a spinning bottle.
Banned: sparkles, particles, smoke, splashes, lens flares, bloom on type, a visible background, turning past 45°, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: black; a thin warm rim line draws down the bottle's right edge.
- 1.2–3.4s: macro: the camera glides across the cap's flutes and down the shoulder facets.
- 3.4–5.6s: it pulls back and orbits to reveal the bottle; the amber glows; the reflection pools.
- 5.6–6.8s: the sweep: one broad highlight crosses the facets; the flutes catch it in turn.
- 6.8–8.2s: house, fragrance and descriptor fade up, 0.3s apart.
- 8.2–10s: hold; the orbit creeps 2° further.
Other lengths: lengthen the macro and pull-back; keep the sweep 1.2s and 1.5s of hold.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Camera path, environment rotation and type are eased functions of t.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for glass reading as a grey slab, liquid like orange plastic, large clipped highlights, reflection running into the type. Confirm 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 inspirationLogo animation inspiration