Luxury Product Hero Section

A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.

Compare Add to Prompt Builder

Techniques: SplitText lines mask
clip-path inset reveal
magnetic button
CSS variable colour tween
SVG textPath rotation
sine yoyo float
Tags: #hero #section #template #luxury #product #ecommerce #fragrance #magnetic
Inspired by: The restrained product heroes of high-end fragrance and skincare houses — a single object on a dark stage, type that arrives in masked lines, and swatches that re-tint the whole scene.
Added: 7 Oct 2026

Playground

Tune it live

Changes re-run the demo and rewrite the prompt so what you copy is exactly what you see.

Reveal durationClip-path wipe + 1.1→1 settle1.4sFloat amplitude8pxFloat periodOne way; the loop yoyos6sBadge rotation20sMagnetic strengthCTA follows the cursor by this fraction0.35Edition tint#b8743a

A complete section, not a fragment: eyebrow, two-line headline, paragraph, price, two CTAs, three swatches, product visual, rotating badge and a scroll cue, all choreographed on one timeline. The product is drawn entirely with CSS — layered gradients for glass, liquid, cap and shadow — and every colour in it derives from a single --tint custom property on the section, so switching editions is one gsap.to(section, { '--tint': '#3f8a7a', duration: 0.8 }).

Gotchas: keep the clip-path reveal, the scale, and the infinite float on three different elements (.lph__reveal → .lph__bottle → .lph__float) or the tweens will overwrite each other’s transforms. clip-path: inset(0 0 100% 0) must be set in CSS as well as the fromTo, otherwise the bottle flashes before JS runs. Use mask: 'lines' with an explicit <br> so the headline always splits into exactly two lines. The magnetic tween uses overwrite: 'auto', so hover it only after the entrance has landed (it is positioned at 1.1s).