MOTION PRESET GALLERY

Lottie-style animations,
built in CSS & Motion.

Named presets you can request by name. Add data-animate="preset-name" to any element, or ask an agent: “Animation request: float-gentle on the hero badge.”

settle-up

Motion · scroll

Pop in from below with a soft scale settle — like a Lottie fade-up entrance.

Settle

<div data-animate="settle-up">...</div>

float-gentle

CSS · loop

Slow vertical float — Lottie-style idle levitation.

<div data-animate="float-gentle">...</div>

pulse-ring

CSS · loop

Expanding ring ripple — like a Lottie notification ping.

<div data-animate="pulse-ring" class="relative">...</div>

draw-line

CSS · scroll

SVG stroke reveal — Lottie-style path draw-on.

<svg data-animate="draw-line">
  <path class="preset-draw-target" .../>
</svg>

shimmer

CSS · loop

Gradient light sweep — Lottie skeleton / loading sheen.

<div data-animate="shimmer">...</div>

morph-blob

CSS · loop

Organic shape morph — Lottie liquid blob loop.

<div data-animate="morph-blob">...</div>

How to request a new animation

Paste this brief when asking an agent (Grok, Cursor, etc.):

Animation request
- Target: hero eyebrow / work cards / contact CTA
- Trigger: on load | on scroll into view | on hover | loop
- Feel: Lottie-style — soft bounce settle, floating loop, draw-on line, pulse glow
- Reference: [Lottie name, GIF, or description]
- Duration: ~0.6s once, or 3s loop
- Reduced motion: instant | fade only | disable loop

Catalog: data/animation-presets.json · Source: src/motion/presets/