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

Live voice waveform

Live voice waveform

A live waveform in a recording pill — 64 thin bars rise and fall with "speech," spiking tall mid-speech and shrinking to a dotted line on pauses, scrolling right to left; a full speak-pause-speak-submit performance.

Interaçãoremotion16:95.06sApache-2.0
Type, filter, drill in

Type, filter, drill in

Typing a search on a real UI, the grid converges to a single card on its own, then a click drills through into the detail page.

Interaçãoremotion16:92.4sApache-2.0
Theme switch: sweep and ripple

Theme switch: sweep and ripple

Two theme-switch moves — theme-sweep, a diagonal wipe (the skin changes wherever the boundary passes), and palette-ripple, a combo move (a ⌘K panel collapses to a point, a ripple spreads from it to re-skin).

Interaçãoremotion16:94.72sApache-2.0
Segmented thumb hero

Segmented thumb hero

A segmented control's thumb shift becomes the star of a close-up — a cursor clicks it and a new icon springs in.

Interaçãoremotion16:93.71sApache-2.0
Picker carousel feature cycle

Picker carousel feature cycle

A mobile-style vertical picker — the focus pill stays still while content scrolls through it, snapping to a full stop each time.

Interaçãoremotion16:94.1sApache-2.0
Input trigger moves

Input trigger moves

Two input-trigger styles: cursor-performance, a cursor performance push-in click, and keycap-smash-cut, a keycap-fuse detonation hard cut.

Interaçãoremotion16:95.06sApache-2.0
Hashtag to pill materialize

Hashtag to pill materialize

"#word" types itself in, hard-cuts on 1 frame into a large pill label, holds, then shrinks and moves left into position, another hard cut reveals the finished page — two hard cuts around one slide.

Interaçãoremotion16:94.46sApache-2.0
Glass pill dictation typing

Glass pill dictation typing

On black, a glass pill pops in at 1.25× then eases to size, an accent light sweeping inside; the cursor leads, placeholder text types in as the glow dims with typing progress, ending as a neutral dark glass bar.

Interaçãoremotion16:92.17sApache-2.0
Command Palette Summon

Command Palette Summon

The command palette descends — the whole screen dims and blurs, the ⌘K panel springs down with overshoot, candidate rows appear staggered, and the list narrows in real time as you type.

Interaçãoremotion16:95.06sApache-2.0
Collab Cursor Moves

Collab Cursor Moves

Two ways collaborative cursors perform — dialogue-duet, a two-cursor dark-stage duet (approach/circle/hand off the light/zoom into a transition), and cast-ensemble, a five-cursor ambient crowd layer (staggered entrance + drift + a typing cameo + gathering around).

Interaçãoremotion16:94.72sApache-2.0
Chip Lift to User Pill

Chip Lift to User Pill

A target chip in a grid hard-cuts to inverted black-on-white in 3 frames, other chips fade and shrink out staggered by Manhattan distance to it; the black chip's left edge anchors and grows into a pill, typing out a name letter by letter and lighting a green dot, then a 1px line connects it to a circular badge.

Interaçãoremotion16:95.5sApache-2.0
Chip Grid Blackout Select

Chip Grid Blackout Select

Five option chips fade in one by one in a centered 3+2 layout; the selected one flashes a gray press frame, then within a few frames turns solid black with white text and a subtle 1→1.04→1 bounce, while other chips fade to 18% without moving; remaining chips then clear, and the black chip rises and narrows as a calculation row appears below.

Interaçãoremotion16:95.5sApache-2.0
Canvas Materialize Moves

Canvas Materialize Moves

Two ways content "materializes onto the canvas" — panel-to-canvas row-to-card (a panel table row flies out along an arc, morphing across containers into a canvas card) and diagram-cascade tree generation (nodes pop in layer by layer after a typed prompt, with connectors growing before the nodes).

Interaçãoremotion16:94.39sApache-2.0
AI Response Stream-In

AI Response Stream-In

The AI response panel drops a readable summary first, then status-icon evidence rows stream in one by one, settling into a completed state.

Interaçãoremotion16:95.06sApache-2.0
Autolayout Gap Dial

Autolayout Gap Dial

A gap dial drives layout — a row of link blocks with selection outlines and spacing callouts, badge numbers tick up as blocks are pushed apart in real time then spring back.

Interaçãoremotion16:94.05sApache-2.0