Float
A skincare hero where an amber serum, a stone jar, a lime tube, a droplet and two pebbles drift 18px on 6s sine yoyo loops, each offset by 30% of a cycle and tilting on its own period while their floor shadows shrink as they rise.
- Backgrounds
- gsap
- svg
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1145 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Breathe
A guided-breathing hero: a soft orb of light and three halo rings swell from scale 0.82 to 1.06 over 4s, rest 1s, then settle back (sine.inOut yoyo), each ring lagging a beat; the cue word crossfades Inhale, Hold, Exhale.
- gsap
Featured light 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.
- gsap
- splittext
- svg
light Pulse Rings
A courier-tracking map where three rings leave the live pin every 0.7s, growing to a 72px radius while fading from 70% to nothing; pressing the shop, home or a hotspot fires one quick burst of rings and a label.
- gsap
- svg
light Wobble and Swing
An SVG shop sign hangs from a bracket hook and sways idly; hover, focus or tap kicks it into a 12° swing that loses 38% per half-swing (0.9s, sine.inOut) until it settles, while bell, tag and heart icons rock around their own hinges.
- gsap
- svg