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.
- Backgrounds
- gsap
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1330 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 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.
- gsap
- svg
light Starfield Depth Parallax
Three canvas layers of stars at different depths drift slowly across a sticky sky, slide under the pointer with depth-weighted parallax, rise as you scroll, and every few seconds a shooting star streaks through the near layer.
- canvas2d
- gsap
Featured medium Aurora Shader Background
A full-screen fragment shader folds three ribbons of aurora colour through layered fbm noise above a dark horizon, lets the pointer bend the curtains with a lagged lens, adds grain and a vignette; a CSS gradient stands in without WebGL or with reduced motion.
- threejs
- glsl
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