Continuous Spin
A text-ring badge, a two-arc loader, a 16-point seal and a pair of meshing gears turn forever on linear 360° loops. Pause, reverse and hover never snap: one signed timeScale eases through zero.
- SVG
- 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. 1422 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 Orbit Loop
Twelve integration nodes circle an accent hub on three rings at 1, 2/3 and 2/5 speed. Hover or focus one and the whole system eases to a stop, a dashed line links it to the core and its details slide in.
- gsap
- svg
light Spin Reveal
A letterpress seal, eight SVG ornaments and three packaging stamps wind in from one full turn and 60% scale to their resting angle on expo.out as they appear — turns and final tilt are separate knobs. Enter, scroll, hover or click.
- gsap
- scrolltrigger
- 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 State-machine Interactive Animation
Pip, an original SVG character, runs on a Rive-style state machine: Idle, Curious, Happy and Asleep, driven by isAwake, mood, a cheer trigger and pointer look inputs. Every change blends over 0.45s; a live graph and log show each transition.
- gsap
- svg