# Imgcli component index

> Every installable Imgcli component in one file. Scan the tables, pick by
> `Use for`, then fetch only the component pages you need.

Install any entry with `npx shadcn@latest add https://imgcli.com/r/<name>.json`. The CLI copies the
MIT-licensed source and installs the dependencies shown in `Deps`.

`Length` is how many frames the component's own animation runs at its native
fps. It is the floor for the `<Sequence>` that wraps it, not the whole beat:
add hold time on top when the element should stay on screen after it settles.

Full reference for one component — props, examples, the interactive preview —
lives at its Docs link. Every docs URL serves raw markdown: append `.md`.

## Text & Titles

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `hello-zoom` | Words flicker in place, one line types on, then the camera dives through its own letters into the next card | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/hello-zoom.md) |
| `spec-sweep` | A one-line spec slides in word by word while a highlight runs along it and an icon charges up | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/spec-sweep.md) |
| `drop-line` | Words cut past one card at a time, then the last word sinks out from under the dot of its own i | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/drop-line.md) |
| `title-sweep` | An end title lit by a gradient that travels through the letters, cuts in the dark, and a second title takes over | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/title-sweep.md) |
| `check-cycle` | A sentence that finishes itself over and over — the word beside a ticked checkbox rolls up out of a slot, Intros, Demos, Launches, Changelogs, Tutorials, And more — then the line steps back a little and rests | 136f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/check-cycle.md) |
| `word-wheel` | A column of words that spins like a reel and stops on one of them — the lead-in holds the left of the line while the answer rolls into the slot beside it, decelerating over a second and three quarters | 66f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/word-wheel.md) |
| `brand-wheel` | A lead word and a wheel of brand pills rolling through where you ship — X, YouTube, LinkedIn, Product Hunt — until a cursor clicks the last one | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/brand-wheel.md) |
| `word-gather` | A sentence that arrives one word at a time, out of order, and gathers — the first word holds the frame alone, then the rest drop in around it in the accent colour and slide the last of the way home | 49f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/word-gather.md) |
| `font-shuffle` | A launch title that decodes out of scrambled glyphs, flashes the accent, then the product name tries on eleven typefaces while the line steps closer | 115f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/font-shuffle.md) |
| `type-morph` | A headline that types itself under a glowing caret, sheds its lead, morphs letter by letter, and ends under a colour flood | 94f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/text-reveal.json` | [docs](https://imgcli.com/docs/text/type-morph.md) |
| `text-reveal` | A cinematic zoom-out title reveal — the lead word appears large, then scales down and slides into place as the sentence sweeps in and settles | 90f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-reveal.md) |
| `punch-lines` | Full-frame title cards that cut hard between beats — a statement flicked in line by line and rushed past the camera, then a hero line whose words punch up from a third of their size | 144f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/punch-lines.md) |
| `text-swell` | The lead word floats toward you and hangs there while the sentence assembles around it, letters bouncing up off the baseline — then the whole line falls back | 110f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-swell.md) |
| `text-highlight` | Animated emphasis on one span inside a static sentence — marker, color, underline, strikethrough, or shimmer | 56f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-highlight.md) |
| `text-rewrite` | A line writes itself, is selected, then has its opening swept away by a clip that cuts letters in half — and a new ending written on while it slides to its new centre | 102f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-rewrite.md) |
| `text-select` | A line that writes itself a word at a time — each arriving in the accent and cooling a beat later, so one word is ever coloured — then pushes forward to full size and gets selected under a shining gradient | 72f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-select.md) |
| `text-swap` | Replace one line of text with another using exit-then-enter scheduling and five transition presets | 90f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-swap.md) |
| `text-build` | Words enter one at a time while the already-placed words reflow to stay centered — as a line or a stack | 75f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/text-build.md) |
| `word-flip` | A headline types itself out, then one word cycles on a 3D flip — anticipation dip, motion-blurred throw, zero reflow | 180f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/text/word-flip.md) |

## Captions

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `word-captions` | Burned-in captions in the styles big channels use — the YouTube box by default (white Roboto on a per-line black box), plus outlined and accent presets | 96f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/captions/word-captions.md) |
| `karaoke-captions` | A caption line over any footage — the YouTube per-line black box by default, with karaoke fill, highlight-bar, and pill presets | 150f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/captions/karaoke-captions.md) |

## Logos

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `logo-collapse` | A stack of shots flicked through, collapsing into your mark, and the wordmark landing beside it — each card smaller and held for less time than the last, cutting rather than tweening, until the stack resolves into a logo | 52f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/logos/logo-collapse.md) |
| `logo-drift` | A field of stack tiles drifting past a headline while the camera pulls steadily back, so the wall of things-it-works-with keeps arriving from every edge | 108f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/logos/logo-drift.md) |
| `logo-assemble` | A ring of image cards revolves and drains to the centre, giving birth to a simple logo that slides left as the brand name reveals to its right | 108f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/logos/logo-assemble.md) |
| `logo-flicker` | Images flip across the screen very fast, the flicker decelerates and fades, and the logo and brand name resolve underneath | 100f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/logos/logo-flicker.md) |
| `block-wordmark` | A square scales in, a deck of coloured cards fans out around it and winds back, then the stack stretches into one block per letter and each block flashes a colour and swaps for its real letterform | 150f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/logos/block-wordmark.md) |

## Screens & Devices

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `phone-stack` | Phone screens playing clips rise out of a blur one after another, each pushing the stack back so the older ones peek out on top | — | `remotion` | [docs](https://imgcli.com/docs/screens/phone-stack.md) |
| `phone-frame` | iPhone-style device frame with a dynamic island — sways in 3D showing off a glowing ride-summary map that draws itself | 240f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/phone-frame.md) |
| `laptop-frame` | MacBook that opens, runs a notch notification, then dives into the screen until an image or video fills the frame | 240f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/laptop-frame.md) |
| `terminal-simulator` | Terminal window with chunked command playback, freeze-frame pauses, step scrolling, and an optional cursor-pinned zoom | 200f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/terminal-simulator.md) |
| `screen-recording` | Crops the browser and OS chrome off a raw screen capture, fits what is left to the frame, and runs a keyframed camera that pushes in on whatever matters | 139f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/screen-recording.md) |
| `cursor-track` | A synthetic cursor that walks a path of waypoints over any children and pulses a click ring on arrival — for sims, and for recordings whose cursor never made the file | 132f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/cursor-track.md) |
| `capture-reveal` | A toast counts a screenshot up to 100% over a browser window, the window drops away, "Copied to clipboard." pops and a headline rises out from behind it | 130f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/screens/capture-reveal.md) |

## Cursor & Clicks

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `click-type` | A prompt composer writes its own placeholder while a cursor flies in and clicks the field, then a hard cut into the field where the prompt types at the caret | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/input.json`, `https://imgcli.com/r/caret.json`, `https://imgcli.com/r/cursor-track.json` | [docs](https://imgcli.com/docs/cursor/click-type.md) |
| `button-press` | A cursor walks onto a split action button: hover, press, a spinner while it works, then a drawn tick. The deploy beat of every launch video | — | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/cursor-track.json` | [docs](https://imgcli.com/docs/cursor/button-press.md) |

## Transitions

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `dot-bloom` | A halftone transition — the outgoing shot washes to cream, breaks into warm drifting dots, and the dots thin out onto the incoming shot | — | `remotion` | [docs](https://imgcli.com/docs/transitions/dot-bloom.md) |

## Social Proof

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `channel-thread` | A work chat filling itself in — faces, a name in bold, a quiet timestamp and messages as plain lines on a dark stage; three dots hold a line until the words arrive, and the transcript scrolls once per arrival and is perfectly still in between | 110f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/social/channel-thread.md) |
| `follower-rush` | An X-style follower notification that piles up — avatars stack in and the count explodes, then the row bends into an undulating wave of faces | 300f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/social/follower-rush.md) |

## Scenes

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `reel-wall` | A curved wall of vertical clips turns past in the dark — it eases in from rest, then keeps turning | — | `remotion` | [docs](https://imgcli.com/docs/scenes/reel-wall.md) |
| `bloom-lockup` | A wall of finished work blooms outward from your logo, cuts in tight on it, then bends away through a lens and a flash while the logo rises to take its wordmark | 120f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/bloom-lockup.md) |
| `gather-lockup` | A wall of your work sits under a line of type. The line falls apart word by word, the wall cuts in to a row of four, and each slot swaps its picture and hands over to your mark and wordmark | 60f @ 24fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/gather-lockup.md) |
| `sky-lockup` | A one-line promise takes itself apart word by word, the page washes off to a soft sky, and the mark in the middle of the sentence slides over and becomes your logo | 57f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/sky-lockup.md) |
| `cut-lockup` | A logo reveal in hard cuts — huge on grid paper, three cuts down, a push to night where its construction lines draw themselves, then paper wipes up onto the lockup | — | `remotion` | [docs](https://imgcli.com/docs/scenes/cut-lockup.md) |
| `orb-swarm` | A sentence told one beat at a time while glass orbs burst out of it, split into eight and sixteen, wind into a vortex, pay out as a chain and loop around the last words | 160f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/orb-swarm.md) |
| `card-rail` | A rail of cards flicked sideways across a tilted plane — pushed three times, each flick leaving at speed and decelerating for over a second into the next, while the plane's foot runs a fifth wider than its head | 108f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/card-rail.md) |
| `count-grid` | A grid of cards rushes in under a horizontal smear and settles on five, then the camera pulls back a fraction while every empty cell fills in from the middle out and the count jumps from five to five hundred | 47f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/count-grid.md) |
| `roster-grant` | Three rows of roster cards stream past a call to action, a pointer walks in and clicks it, and the monograms start turning to the accent one every seven frames — top, middle, bottom, top, bottom, middle | 120f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/roster-grant.md) |
| `wordmark-cut` | A wordmark twice the width of the frame, cooling from a lit gradient to ink as it settles, then a hard cut onto its last letters and the dot — nearer, shallower, and pushing in | 66f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/wordmark-cut.md) |
| `announce-title` | A four-shot launch title — the eyebrow rushes past the camera on a receding type plane, the name assembles on paper, and a macro pan cuts wide as the tagline builds itself last word first | 170f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/announce-title.md) |
| `status-cycle` | A status pill whose label rolls behind a hard clip while its width springs past the target and back, then the field crossfades to a column of chips stepping up from below | 198f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/status-cycle.md) |
| `hero-launch` | Cinematic product-launch hero — two cards slide into formation as the headline reveals above | 170f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/hero-launch.md) |
| `orbit-gallery` | A ring of feature cards orbits a central product mark, each rotating upright as it swings to the front | 300f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/orbit-gallery.md) |
| `moodboard-reveal` | A kinetic headline with a swapping inline image, then a scattered photo gallery flies in and the camera pushes through it — dark to light — onto a hero image | 150f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/moodboard-reveal.md) |
| `reel-collage` | A photo reel between two captions shuts like an eyelid, the captions fold into one line, then split as a collage blooms in on a peach flush | 96f @ 30fps | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/reel-collage.md) |
| `portal-intro` | A sentence with a picture chip in it leans in until the chip takes the frame, then a title types over the picture and the mark and name arrive | — | `remotion`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/scenes/portal-intro.md) |

## AI Chat Input

| Component | Use for | Length | Deps | Docs |
|---|---|---|---|---|
| `search-typing` | A search field wider than the shot — it comes forward, types across its left half, then pages to its right half | 420f @ 60fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/caret.json`, `https://imgcli.com/r/input.json` | [docs](https://imgcli.com/docs/ai-input/search-typing.md) |
| `prompt-send` | A composer that unrolls from a hairline, writes a brief while the camera cuts in and rides the caret, then cuts back out as a pointer arrives and sends it — with typing that eases in and out instead of ticking | 165f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/input.json` | [docs](https://imgcli.com/docs/ai-input/prompt-send.md) |
| `prompt-zoom` | An assistant landing screen that offers its suggestions, then cuts hard into the caret — a measured 2.547× push anchored on the text insertion point — where the prompt types itself | 90f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/input.json` | [docs](https://imgcli.com/docs/ai-input/prompt-zoom.md) |
| `answer-stream` | The beat after send — a macro shot on the button cuts hard to the answer building itself, while the camera pulls back about a focal point above the frame to keep up with it | 150f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json`, `https://imgcli.com/r/input.json` | [docs](https://imgcli.com/docs/ai-input/answer-stream.md) |
| `answer-highlight` | A question, an answer that writes itself a word at a time, then a caret lands mid-sentence and drags a selection across the one statement that matters — and settles onto one word inside it | 190f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/ai-input/answer-highlight.md) |
| `agent-steps` | An agent narrating its own work — a log that writes itself one line at a time, always on the centre line, then swells and clears until only the answer is left | 160f @ 30fps | `remotion`, `@remotion/google-fonts`, `https://imgcli.com/r/snap-cn-ui.json` | [docs](https://imgcli.com/docs/ai-input/agent-steps.md) |