Motion

Templates de motion para agentes de IA

Motion graphics em HTML autocontido com prompt, fluxo e player determinístico — o agente lê um JSON, preenche os parâmetros e renderiza o vídeo quadro a quadro. Sem build, sem dependências. llms.txt · API · MCP

Wall reveal: three moves

Wall reveal: three moves

Three whole-wall batch entrances — bento cell-by-cell light-up, grid wave flip, and blueprint draw-on; all reveal in place with no displacement, complementing the fly-in, displacement-type deck-deal-flyin.

Entrada de UIremotion16:95.06sApache-2.0
Value-stagger gradient bars

Value-stagger gradient bars

16 bars enter with delay as a time stagger, while height/hue/offset/blur each lay out as a value gradient from first to last; the second beat moves the stagger origin to center and re-lays the pulse peaking there.

Entrada de UIremotion16:95.5sApache-2.0
SVG shape morph loop

SVG shape morph loop

A 140-point closed outline morphs smoothly into another and back; both shapes are resampled to equal point counts in polar coordinates with per-point radius interpolation and inOutCubic, plus a light scale breathing, slow rotation, and hue drifting 185°→305° mid-morph.

Entrada de UIremotion16:95.7sApache-2.0
Skeleton reveal

Skeleton reveal

Three-tier reveal from sketch to structure to content — hand-drawn doodles get swapped for skeleton bars, which resolve into real UI.

Entrada de UIremotion16:95.78sApache-2.0
Runway ground skim entrance

Runway ground skim entrance

From a low ground-skim angle, UI cards rain down fast and land with zero bounce, then the whole page stands up and squares to camera.

Entrada de UIremotion16:93.99sApache-2.0
Row embed

Row embed

Content rows drop from above like cards, level out via rotateX, and an accent-color seam lights up along the bottom edge as they embed.

Entrada de UIremotion16:93.33sApache-2.0
Research card stack scroll

Research card stack scroll

Dark paper cards fly in every 12 frames along a bottom-right axis to stack up, only the topmost fully rendered while the rest blur and dim.

Entrada de UIremotion16:95.3sApache-2.0
Radial wave dot grid

Radial wave dot grid

A 17×9 grid of dots lights up in a wave based on distance from a source point, each dot overshooting to 1.5x scale then settling.

Entrada de UIremotion16:94.3sApache-2.0
Product card progressive assemble

Product card progressive assemble

A detail card self-assembles field by field — image, title, breadcrumb pill pop in, the old price strikes through, a new price springs in.

Entrada de UIremotion16:95.5sApache-2.0
Platform hinge rise

Platform hinge rise

A platform establishes first, two subjects flip up from adjacent hinges with a damped rebound, then a conclusion stand rises in.

Entrada de UIremotion16:93.52sApache-2.0
Paper craft moves

Paper craft moves

Two paper-craft techniques: masking-tape-slap pins a card down with tape slaps, and popup-book-rise stands cards up like a pop-up book.

Entrada de UIremotion16:94.72sApache-2.0
Page waterfall wall

Page waterfall wall

Real page screenshots split into 3–4 columns scroll endlessly at different speeds and directions on a tilted-back 3D wall.

Entrada de UIremotion16:95.06sApache-2.0
Neon frame orbit drop

Neon frame orbit drop

Neon frame draws in, then the camera arcs across the page as every element drops into place on the same frame.

Entrada de UIremotion16:94.6sApache-2.0
Neon frame forerun

Neon frame forerun

A steep-perspective neon frame draws itself in from both ends, the page brightens from dark inside it, components land from above with matching soft shadows, and background neon tubes dim out at the end.

Entrada de UIremotion16:94.46sApache-2.0
Morph from primitive shape

Morph from primitive shape

A stroked circle breathes once (anticipation), then its SVG path interpolates over 24f into a rounded card outline, and the content fades in.

Entrada de UIremotion16:94.72sApache-2.0
List stack press

List stack press

List cards fly up from the bottom of the frame one by one to stack up, each landing squashing and rebounding the whole pile while a counter ticks up in sync.

Entrada de UIremotion16:93.5sApache-2.0
List reveal with drift

List reveal with drift

A 6-item vertical menu settles into place in sequence at a 0.09 stagger with a light overshoot on landing, while the whole list container drifts linearly upward throughout — two unrelated layers of motion.

Entrada de UIremotion16:94.1sApache-2.0
Integration hub map

Integration hub map

The old page flips 180° in one go to land as a new hub page, five integration app icons pop in at once, then five rainbow light conduits connect all at once with pulses flowing continuously.

Entrada de UIremotion16:94.72sApache-2.0
Element body moves

Element body moves

Two element-body-feel styles: axial-stretch taffy-pull stretching, and contact-shadow-lift lifting off the surface with a contact shadow.

Entrada de UIremotion16:94.72sApache-2.0
Floating glossy label pills

Floating glossy label pills

Four wireframe panels each topped with a glossy pill label queue horizontally, swapping position in three beats while the centered panel enlarges and the sides shrink and blur, ending with a cursor sliding to rest.

Entrada de UIremotion16:94.5sApache-2.0