Motion Garden

Motion Garden · Agent-ready registry

133 instruments.
One bench.

Animated React components, live on this page, every prop a dial. One copy hands your coding agent the full brief: source, dependencies, props and integration rules.

Enter the catalogthe Cook Book
Registry 133 units [live · tunable]
Exhibit α-01Backgrounds32 units

αBackgrounds

Full-screen animated backgrounds. They sit behind your content and set the tone.

All 32 Backgrounds →
Exhibit β-02Text Animations24 units

βText Animations

Text that moves: morphing headlines, counters, and scroll effects.

All 24 Text Animations →
Exhibit γ-03Power-User Systems29 units

γPower-User Systems

Complete widgets with real state: command menus, file trees, docks, and agent UIs for permissions, patch review and activity logs.

All 29 Power-User Systems →
Exhibit δ-04Micro-interactions39 units

δMicro-interactions

Small touches on buttons and cards. You feel them more than you see them.

Pixel Transition

Reveal a second layer through a random pixelated dissolve on hover.

Border Glow

A cursor-proximity gradient border with an outer glow.

Spotlight Shell

A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.

Animated Hamburger

A three-bar hamburger that morphs to an X, driven by a toggle prop.

Morph Dialog

A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.

Blueprint Card

A technical-drawing card. Dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.

All 39 Micro-interactions →
Exhibit ε-05Hero Templates9 units

εHero Templates

Ready-made hero sections. One strong opening above the fold.

All 9 Hero Templates →
Exhibit ε-05Calibration2 dials

εCalibration

Every dial is real. Turn one.

Trace the edges

Every component in the catalog has controls like these. Tune it live, watch the props table update, then copy the code — or the full brief for your agent.

Plate ζ-06Open archive133 units

Nothing stays in the shadow.

Every component renders live, so you can tune it before your agent writes a line. The pieces below run on this page. The full catalog is one click away.

Browse the source