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.
- SVG
- gsap
- svg
- advanced
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1780 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 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.
- gsap
- svg
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 SVG Line Drawing
A still life, a release-loop diagram and a signature draw themselves stroke by stroke with DrawSVG (0% → 100%, 1.8s, 0.06s stagger), then fills and labels scale in. Draw on load, scrub with scroll, draw on hover and erase on leave, or toggle on click.
- gsap
- scrolltrigger
- svg
light SVG Shape Morph
Six icon pairs — play → pause, menu → close, sun → moon, heart → star, stop → record, next → done — and a large pebble that becomes a flower, star, drop, squircle or wave, all interpolated with MorphSVG on hover, click, scroll or a loop.
- gsap
- scrolltrigger
- svg