# Imgcli > Imgcli is a shadcn-style registry of Remotion components for product demos, launch videos and social clips. Install free components with `npx shadcn@latest add https://imgcli.com/r/.json`. The CLI copies the source and its dependencies into your project. To use `@imgcli/`, configure the mapping in the [installation guide](https://imgcli.com/docs/getting-started/installation). Set up the Remotion project's `components.json` and `@/` alias using the installation guide. The free component source is MIT licensed. The [Video Editor](https://imgcli.com/docs/video-editor) exports MP4 without a Remotion project. Sign in to save and reopen projects and share an exported video by link. New Pro purchases are paused. See the [Roadmap](https://imgcli.com/docs/roadmap) for what's available and what's next. Operated by Liqi Labs. The MIT-licensed source is based on snapcn by Sri Nath. Last updated: 2026-11-12 (newest component release) Building a video? Start at https://imgcli.com/llms-components.txt — every installable component in one table with what it is for, how many frames it runs and what it pulls in, linking to each component's full page. Any docs URL also serves raw markdown: append `.md`. For agent setup, see https://imgcli.com/docs/getting-started/agent-skill. ## Every installable component These 65 items are the complete set available from the free Imgcli registry. Use the names below and do not infer, pluralise or invent entries. - `npx shadcn@latest add https://imgcli.com/r/answer-highlight.json` - `npx shadcn@latest add https://imgcli.com/r/agent-steps.json` - `npx shadcn@latest add https://imgcli.com/r/announce-title.json` - `npx shadcn@latest add https://imgcli.com/r/answer-stream.json` - `npx shadcn@latest add https://imgcli.com/r/text-reveal.json` - `npx shadcn@latest add https://imgcli.com/r/text-highlight.json` - `npx shadcn@latest add https://imgcli.com/r/text-rewrite.json` - `npx shadcn@latest add https://imgcli.com/r/text-select.json` - `npx shadcn@latest add https://imgcli.com/r/text-swap.json` - `npx shadcn@latest add https://imgcli.com/r/text-swell.json` - `npx shadcn@latest add https://imgcli.com/r/text-build.json` - `npx shadcn@latest add https://imgcli.com/r/word-flip.json` - `npx shadcn@latest add https://imgcli.com/r/word-captions.json` - `npx shadcn@latest add https://imgcli.com/r/karaoke-captions.json` - `npx shadcn@latest add https://imgcli.com/r/logo-drift.json` - `npx shadcn@latest add https://imgcli.com/r/logo-assemble.json` - `npx shadcn@latest add https://imgcli.com/r/logo-flicker.json` - `npx shadcn@latest add https://imgcli.com/r/block-wordmark.json` - `npx shadcn@latest add https://imgcli.com/r/phone-frame.json` - `npx shadcn@latest add https://imgcli.com/r/laptop-frame.json` - `npx shadcn@latest add https://imgcli.com/r/terminal-simulator.json` - `npx shadcn@latest add https://imgcli.com/r/screen-recording.json` - `npx shadcn@latest add https://imgcli.com/r/count-grid.json` - `npx shadcn@latest add https://imgcli.com/r/roster-grant.json` - `npx shadcn@latest add https://imgcli.com/r/wordmark-cut.json` - `npx shadcn@latest add https://imgcli.com/r/cursor-track.json` - `npx shadcn@latest add https://imgcli.com/r/pulsing-border.json` - `npx shadcn@latest add https://imgcli.com/r/follower-rush.json` - `npx shadcn@latest add https://imgcli.com/r/prompt-send.json` - `npx shadcn@latest add https://imgcli.com/r/prompt-zoom.json` - `npx shadcn@latest add https://imgcli.com/r/punch-lines.json` - `npx shadcn@latest add https://imgcli.com/r/orbit-gallery.json` - `npx shadcn@latest add https://imgcli.com/r/hero-launch.json` - `npx shadcn@latest add https://imgcli.com/r/moodboard-reveal.json` - `npx shadcn@latest add https://imgcli.com/r/reel-collage.json` - `npx shadcn@latest add https://imgcli.com/r/reel-wall.json` - `npx shadcn@latest add https://imgcli.com/r/phone-stack.json` - `npx shadcn@latest add https://imgcli.com/r/portal-intro.json` - `npx shadcn@latest add https://imgcli.com/r/dot-bloom.json` - `npx shadcn@latest add https://imgcli.com/r/hello-zoom.json` - `npx shadcn@latest add https://imgcli.com/r/spec-sweep.json` - `npx shadcn@latest add https://imgcli.com/r/drop-line.json` - `npx shadcn@latest add https://imgcli.com/r/title-sweep.json` - `npx shadcn@latest add https://imgcli.com/r/cut-lockup.json` - `npx shadcn@latest add https://imgcli.com/r/bloom-lockup.json` - `npx shadcn@latest add https://imgcli.com/r/gather-lockup.json` - `npx shadcn@latest add https://imgcli.com/r/sky-lockup.json` - `npx shadcn@latest add https://imgcli.com/r/search-typing.json` - `npx shadcn@latest add https://imgcli.com/r/status-cycle.json` - `npx shadcn@latest add https://imgcli.com/r/type-morph.json` - `npx shadcn@latest add https://imgcli.com/r/orb-swarm.json` - `npx shadcn@latest add https://imgcli.com/r/word-gather.json` - `npx shadcn@latest add https://imgcli.com/r/word-wheel.json` - `npx shadcn@latest add https://imgcli.com/r/brand-wheel.json` - `npx shadcn@latest add https://imgcli.com/r/check-cycle.json` - `npx shadcn@latest add https://imgcli.com/r/font-shuffle.json` - `npx shadcn@latest add https://imgcli.com/r/button-press.json` - `npx shadcn@latest add https://imgcli.com/r/click-type.json` - `npx shadcn@latest add https://imgcli.com/r/capture-reveal.json` - `npx shadcn@latest add https://imgcli.com/r/channel-thread.json` - `npx shadcn@latest add https://imgcli.com/r/logo-collapse.json` - `npx shadcn@latest add https://imgcli.com/r/card-rail.json` - `npx shadcn@latest add https://imgcli.com/r/snap-cn-ui.json` - `npx shadcn@latest add https://imgcli.com/r/caret.json` - `npx shadcn@latest add https://imgcli.com/r/input.json` # Use Imgcli with an AI agent URL: https://imgcli.com/docs/getting-started/agent-skill Install Imgcli Skills and plugins from the public repository to build Remotion videos with a coding agent. ## Install the Skills Run this from your Remotion project. The `imgcli` Skill helps your agent choose components, compose scenes, and check the render. The [Skills repository](https://github.com/imgcli/skills) is public. ```bash npx skills add imgcli/skills --skill imgcli ``` Add another `--skill` flag to install a workflow along with the main Skill. ```bash npx skills add imgcli/skills --skill imgcli --skill remotion-product-demo ``` | Skill | Use it for | | --- | --- | | `remotion-launch-video` | Launch films and feature announcements | | `remotion-product-demo` | Product walkthroughs from screenshots or recordings | | `remotion-motion-graphics` | Motion graphics and short openers | | `remotion-kinetic-typography` | Animated text and title cards | | `remotion-logo-animation` | Logo reveals and end cards | | `remotion-explainer-video` | Narrated explainers with captions | ## Claude Code plugin Run these commands in a Claude Code session. ```text /plugin marketplace add imgcli/skills /plugin install imgcli@imgcli ``` ## Cursor plugin In **Customize**, choose **From GitHub Repository** and enter `https://github.com/imgcli/skills`. Select **Imgcli** and click **Install**. For a team rollout, import the same URL as a [team marketplace](https://cursor.com/docs/plugins#add-a-team-marketplace). To install the main Skill directly for Cursor, run `npx skills add imgcli/skills --skill imgcli -a cursor`. ## Use the component index Give your agent the [component index](/llms-components.txt) to find components, durations, and dependencies. Each entry links to its props and examples. The [installation guide](/docs/getting-started/installation) shows how to add components from the public Imgcli Registry. ```text Use https://imgcli.com/llms-components.txt to choose a text animation for my Remotion project. Install it from the Imgcli registry, add it to a composition, and render the composition to check that it works. ``` The [documentation index](/llms.txt) and [full documentation](/llms-full.txt) are available as plain text. --- # Installation URL: https://imgcli.com/docs/getting-started/installation Set up your Remotion project's aliases and install a free Imgcli component with the shadcn CLI. Start with a Remotion project. Run `npx create-video@latest` if you need one. ## 1. Teach your project the `@/` alias Components are copied in importing `@/components/imgcli/…` and `@/lib/snap-cn-ui`. A `create-video` project has no `@` alias, and Remotion's bundler does not read `tsconfig` paths — so set it in both places, or the import resolves in your editor and fails at render. ```json title="tsconfig.json" { "compilerOptions": { "paths": { "@/*": ["./src/*"] } } } ``` On TypeScript 5 you also need `"baseUrl": "."` alongside it. **TypeScript 7 removed `baseUrl`** and errors on it — `paths` are resolved relative to the `tsconfig.json` now, so leave it out. `create-video` scaffolds neither. ```ts title="remotion.config.ts" import path from "node:path"; import { Config } from "@remotion/cli/config"; import { enableTailwind } from "@remotion/tailwind-v4"; Config.overrideBundlerConfig((config) => { const c = enableTailwind(config); return { ...c, resolve: { ...c.resolve, alias: { ...c.resolve?.alias, "@": path.join(process.cwd(), "src") }, }, }; }); ``` ## 2. Add a `components.json` The shadcn CLI reads this to know where files go. `npx shadcn@latest init` writes one for you — but only in a framework it recognises, and Remotion is not one of them, so write it yourself: ```json title="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/index.css", "baseColor": "neutral", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } ``` ## 3. Add a component ```bash npx shadcn@latest add https://imgcli.com/r/text-reveal.json ``` The URL points to Imgcli's registry. The CLI copies `text-reveal.tsx` to `src/components/imgcli/` and adds the shared files under `src/lib/snap-cn-ui/`. You can install the free components without an account or API key. For shorter commands, add this mapping to your `components.json`. Keep any registry mappings you already use. ```json title="components.json" { "registries": { "@imgcli": "https://imgcli.com/r/{name}.json" } } ``` ```bash npx shadcn@latest add @imgcli/text-reveal ``` ## Component code The exact file `shadcn add` copies into your project. ## Install everything Want the whole library at once? ## 4. Use it in a Remotion composition ```tsx import { Composition } from "remotion"; import { TextReveal } from "@/components/imgcli/text-reveal"; export const RemotionRoot = () => ( ); ``` Components take shadcn's light palette by default, and a Remotion render with no background of its own is black — so pass `mode="dark"` (or your own `theme`) when you render onto a dark frame, or near-black text lands on a near-black background. That's it. Render with `npx remotion render HelloWorld out.mp4`. For Claude Code, Cursor, or another coding agent, see the [Imgcli Skills and plugin instructions](/docs/getting-started/agent-skill). --- # Introduction URL: https://imgcli.com/docs/getting-started/introduction What Imgcli is and who it's for — Remotion components you install with the shadcn CLI and own as code in your project. Imgcli is built for solo builders and small teams who need to ship product demo videos without rebuilding the same animation primitives every time. If you've used [shadcn/ui](https://ui.shadcn.com), you'll feel at home: the workflow is identical, just for video instead of UI. ## Why Imgcli - **The type is measured, not eyeballed.** Scaled text judders because the glyph rasteriser has no vertical sub-pixel positioning, so a moving baseline climbs the pixel grid in whole-pixel jumps. Every text component here pivots its scale on the measured baseline and renders with `text-rendering: geometricPrecision`, which stops the stems re-hinting mid-animation. Both were found on rendered frames rather than in a browser preview, because you cannot see a sub-pixel bug. - **What the preview shows is what the file renders.** Where a live `@remotion/player` misrepresents a scene, because frame pacing on a 120Hz display makes smooth motion look stuck, the gallery plays the actual rendered mp4 instead. - **One design system, and it is shadcn's.** Components take `theme` and `mode` props resolved from the same token set as the site's `Button` and `Input`, so a scene dropped into your app does not arrive with its own palette. `pnpm check:tokens` fails the build if the two ever drift. - **The file is yours the moment it lands.** The CLI copies the source and installs its declared dependencies. Your installed source changes when you edit or update it. ## Prerequisites You should already have a Remotion project set up. If you don't: ```bash npx create-video@latest ``` ## What's next - [Installation](/docs/getting-started/installation): add Imgcli to an existing Remotion project --- # License URL: https://imgcli.com/docs/getting-started/license MIT licensing for Imgcli's free Remotion component source and support for existing licenses. ## Free components The free component source distributed through the Imgcli registry is under the [MIT license](https://opensource.org/license/mit). Keep the copyright and license notice when you redistribute the source. The library is based on [snapcn by Sri Nath](https://github.com/shadcn-labs/snapcn). For questions about an existing license, contact [hello@imgcli.com](mailto:hello@imgcli.com). --- # Components URL: https://imgcli.com/docs/components Imgcli components, grouped by category ## Text & Titles - [Hello Zoom](https://imgcli.com/docs/text/hello-zoom): Words flicker in place, one line types on, then the camera dives through its own letters into the next card - [Glow Pullback](https://imgcli.com/docs/text/glow-pullback) (Pro access required): A line that opens in close and pulls back to the whole sentence. - [Spec Sweep](https://imgcli.com/docs/text/spec-sweep): A one-line spec slides in word by word while a highlight runs along it and an icon charges up - [Drop Line](https://imgcli.com/docs/text/drop-line): Words cut past one card at a time, then the last word sinks out from under the dot of its own i - [Title Sweep](https://imgcli.com/docs/text/title-sweep): An end title lit by a gradient that travels through the letters, cuts in the dark, and a second title takes over - [Cross Out](https://imgcli.com/docs/text/cross-out) (Pro access required): Cross out the advice, then name the thing it was standing in for. - [Check Cycle](https://imgcli.com/docs/text/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 - [Focus Pull](https://imgcli.com/docs/text/focus-pull) (Pro access required): A phrase at a time, resolving out of a moving colour field. - [Word Wheel](https://imgcli.com/docs/text/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 - [Brand Wheel](https://imgcli.com/docs/text/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 - [Word Gather](https://imgcli.com/docs/text/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 - [Font Shuffle](https://imgcli.com/docs/text/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 - [Type Morph](https://imgcli.com/docs/text/type-morph): A headline that types itself under a glowing caret, sheds its lead, morphs letter by letter, and ends under a colour flood - [Text Reveal](https://imgcli.com/docs/text/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 - [Manifesto](https://imgcli.com/docs/text/manifesto) (Pro access required): Three statements, three different arrivals, hard cuts between them. - [Punch Lines](https://imgcli.com/docs/text/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 - [Text Swell](https://imgcli.com/docs/text/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 - [Pack Up](https://imgcli.com/docs/text/pack-up) (Pro access required): A line types itself, catches the light, and its last word is packed into a box. - [Text Highlight](https://imgcli.com/docs/text/text-highlight): Animated emphasis on one span inside a static sentence — marker, color, underline, strikethrough, or shimmer - [Phrase Swarm](https://imgcli.com/docs/text/phrase-swarm) (Pro access required): One phrase comes apart and another gathers out of the pieces. - [Text Rewrite](https://imgcli.com/docs/text/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 - [Text Select](https://imgcli.com/docs/text/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 - [Text Swap](https://imgcli.com/docs/text/text-swap): Replace one line of text with another using exit-then-enter scheduling and five transition presets - [Read Through](https://imgcli.com/docs/text/read-through) (Pro access required): A sentence set enormous and read a word at a time. - [Text Build](https://imgcli.com/docs/text/text-build): Words enter one at a time while the already-placed words reflow to stay centered — as a line or a stack - [Word Flip](https://imgcli.com/docs/text/word-flip): A headline types itself out, then one word cycles on a 3D flip — anticipation dip, motion-blurred throw, zero reflow - [Say It](https://imgcli.com/docs/text/say-it) (Pro access required): A word that comes apart, leaves a control behind, and gets pressed. - [Sentence Set](https://imgcli.com/docs/text/sentence-set) (Pro access required): A sentence setting itself, a word at a time. - [Stretch Word](https://imgcli.com/docs/text/stretch-word) (Pro access required): A word that will not stop, and the line that follows it. - [Wall Cut](https://imgcli.com/docs/text/wall-cut) (Pro access required): A sentence read out on an LED wall, cut from the pixels to the room. - [Word Rush](https://imgcli.com/docs/text/word-rush) (Pro access required): A field of words the camera flies through, one line of it that runs at the lens, and the line that answers on the other side. - [Word Settle](https://imgcli.com/docs/text/word-settle) (Pro access required): A sentence that arrives a word at a time, hot, and cools as it lands. - [Trend Type](https://imgcli.com/docs/text/trend-type) (Pro access required): A headline types itself while a trend line draws underneath it. - [Ember Reveal](https://imgcli.com/docs/text/ember-reveal) (Pro access required): A soft blue brush sweeps across a white frame and blooms into a glow, and the line writes itself out of the glow behind it, settling with a faint halo. - [Spark Question](https://imgcli.com/docs/text/spark-question) (Pro access required): A question asked one phrase at a time: each phrase lands huge and settles while the camera keeps pulling back, its words blurring up into place one after another as small four-point sparkles dart past, and a hard cut swaps in the next. - [Word Insert](https://imgcli.com/docs/text/word-insert) (Pro access required): A line that grows from its last word, in 12fps stop motion: each new word is slipped in ahead of it, landing bold and dark and settling to the line's ink while the words to its left glide aside, the words to its right step over and the underline stretches to fit, every word shaking on its own each pose. - [Echo Stack](https://imgcli.com/docs/text/echo-stack) (Pro access required): One word with copies of itself stacked above and below in horizontal windows, fading as they go. - [Find Yours](https://imgcli.com/docs/text/find-yours) (Pro access required): "Find yours" rises in word by word while a list of what you could make rolls up beside it through a soft fade: slow, then a motion-blurred rush, then a long brake onto one answer. - [Count Portal](https://imgcli.com/docs/text/count-portal) (Pro access required): A lead word assembles out of order, words cut past and the last one slams and inverts. - [Slam Type](https://imgcli.com/docs/text/slam-type) (Pro access required): Three hard cuts of one ultra-wide black word, each larger than the last, with one hot-metal gradient travelling through all three while the type pushes in. - [Spec Wall](https://imgcli.com/docs/text/spec-wall) (Pro access required): A heading arrives word by word, spec lines type on underneath and the block scrolls, faster and faster, until the card inverts and the rest flies past too quickly to read. ## Captions - [Word Captions](https://imgcli.com/docs/captions/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 - [Karaoke Captions](https://imgcli.com/docs/captions/karaoke-captions): A caption line over any footage — the YouTube per-line black box by default, with karaoke fill, highlight-bar, and pill presets ## Logos - [Logo Collapse](https://imgcli.com/docs/logos/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 - [Lockup Reveal](https://imgcli.com/docs/logos/lockup-reveal) (Pro access required): A logo lockup opening on a construction grid, then turning out to be a window. - [Logo Drift](https://imgcli.com/docs/logos/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 - [Logo Assemble](https://imgcli.com/docs/logos/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 - [Logo Flicker](https://imgcli.com/docs/logos/logo-flicker): Images flip across the screen very fast, the flicker decelerates and fades, and the logo and brand name resolve underneath - [Block Wordmark](https://imgcli.com/docs/logos/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 ## Screens & Devices - [Phone Stack](https://imgcli.com/docs/screens/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 - [App Reveal](https://imgcli.com/docs/screens/app-reveal) (Pro access required): A wordmark that folds into an app, and a camera that flies around it. - [Brief Send](https://imgcli.com/docs/screens/brief-send) (Pro access required): An empty project page pulls away, and the brief that fills it gets sent. - [Build Out](https://imgcli.com/docs/screens/build-out) (Pro access required): A send button that fills the frame, and the app that comes out of it. - [Checkout Push](https://imgcli.com/docs/screens/checkout-push) (Pro access required): A phone paying for something, pushed through the camera. - [Gallery Push](https://imgcli.com/docs/screens/gallery-push) (Pro access required): A wall of screenshots that opens one column at a time. - [Laptop Open](https://imgcli.com/docs/screens/laptop-open) (Pro access required): A laptop opening out of focus, holding, and then swallowing the lens. - [LCD Type](https://imgcli.com/docs/screens/lcd-type) (Pro access required): A type specimen on a screen you can see the pixels of. - [Phone Pitch](https://imgcli.com/docs/screens/phone-pitch) (Pro access required): A headline and a phone: the pitch shot. - [Picker Commit](https://imgcli.com/docs/screens/picker-commit) (Pro access required): A picker wheel that flings, settles on one row, and commits it into a button. - [Screen Wall](https://imgcli.com/docs/screens/screen-wall) (Pro access required): Four phones down a tunnel around a sentence, and the shot backing out of them. - [String Hero](https://imgcli.com/docs/screens/string-hero) (Pro access required): A line of code being typed, and then the string inside it becomes the headline. - [Phone Frame](https://imgcli.com/docs/screens/phone-frame): iPhone-style device frame with a dynamic island — sways in 3D showing off a glowing ride-summary map that draws itself - [Tap Through](https://imgcli.com/docs/screens/tap-through) (Pro access required): Somebody's feed, the button they press, and the line that press was for. - [Laptop Frame](https://imgcli.com/docs/screens/laptop-frame): MacBook that opens, runs a notch notification, then dives into the screen until an image or video fills the frame - [Terminal Simulator](https://imgcli.com/docs/screens/terminal-simulator): Terminal window with chunked command playback, freeze-frame pauses, step scrolling, and an optional cursor-pinned zoom - [Screen Recording](https://imgcli.com/docs/screens/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 - [Cursor Track](https://imgcli.com/docs/screens/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 - [Capture Reveal](https://imgcli.com/docs/screens/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 ## Cursor & Clicks - [Click Type](https://imgcli.com/docs/cursor/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 - [Button Press](https://imgcli.com/docs/cursor/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 ## Transitions - [Pixel Peak](https://imgcli.com/docs/transitions/pixel-peak) (Pro access required): Transition for @remotion/transitions: the next shot climbs up through the last one as a stepped peak of blocks. - [Dot Dissolve](https://imgcli.com/docs/transitions/dot-dissolve) (Pro access required): LED dot-matrix transition: dots pop in across the frame in clumps until the matrix covers it, hold, then break up in clumps and let go, the last stragglers out bottom left. - [Dot Bloom](https://imgcli.com/docs/transitions/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 ## Charts & Stats - [Hex Tally](https://imgcli.com/docs/charts/hex-tally) (Pro access required): A metric card that lands while a hex unit chart fills in under a running total. - [Metric Morph](https://imgcli.com/docs/charts/metric-morph) (Pro access required): The control becomes the number it produces. - [Scatter Bloom](https://imgcli.com/docs/charts/scatter-bloom) (Pro access required): A scatter plot that blooms onto a tilted plane while the camera drifts along it. - [Tally Rise](https://imgcli.com/docs/charts/tally-rise) (Pro access required): A currency figure climbing on a bloom that dies under it. - [Ticker Climb](https://imgcli.com/docs/charts/ticker-climb) (Pro access required): A claim, and then the live number that proves it. - [Vault Count](https://imgcli.com/docs/charts/vault-count) (Pro access required): A balance ticking up while the payments that fed it drift past. ## Social Proof - [Chat Thread](https://imgcli.com/docs/social/chat-thread) (Pro access required): A chat thread sending itself — the moment a demo video actually gets shared. - [Comment Storm](https://imgcli.com/docs/social/comment-storm) (Pro access required): The comment section under a launch everyone is waiting for, burying the frame. - [Channel Thread](https://imgcli.com/docs/social/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 - [Thank You Swarm](https://imgcli.com/docs/social/thank-you-swarm) (Pro access required): A notification row of supporters that tears off under its own motion blur and comes back as a wall of them. - [Follower Rush](https://imgcli.com/docs/social/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 ## Scenes - [Hype Reel](https://imgcli.com/docs/scenes/hype-reel) (Pro access required): A vertical video post going viral in three seconds: a close-up on its view count racing up, a cut out to the whole card under its caption, then avatars, chat bubbles and reactions spring in around it while the count tops out at 999k. - [Depth Swap](https://imgcli.com/docs/scenes/depth-swap) (Pro access required): A headline swaps inside a wall of pictures with real depth. - [Reel Wall](https://imgcli.com/docs/scenes/reel-wall): A curved wall of vertical clips turns past in the dark — it eases in from rest, then keeps turning - [Column Cut](https://imgcli.com/docs/scenes/column-cut) (Pro access required): A four-line cascade with a square cursor beside its third line, a blue highlight running across that line letter by letter while the type drifts up — then a hard cut to a column of pictures that jumps one picture per beat, the beats tightening from five frames to four, while a sentence lands either side of it and the whole frame pans away left, faster and faster. - [Bloom Lockup](https://imgcli.com/docs/scenes/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 - [Gather Lockup](https://imgcli.com/docs/scenes/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 - [Sky Lockup](https://imgcli.com/docs/scenes/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 - [Cut Lockup](https://imgcli.com/docs/scenes/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 - [Orb Swarm](https://imgcli.com/docs/scenes/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 - [Card Rail](https://imgcli.com/docs/scenes/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 - [Library Flight](https://imgcli.com/docs/scenes/library-flight) (Pro access required): A title, a fly-through of the whole library, and the line it adds up to. - [Orbit Flow](https://imgcli.com/docs/scenes/orbit-flow) (Pro access required): Three dashed orbits round a line of type, with three labelled stops riding the inner one. - [Proof Line](https://imgcli.com/docs/scenes/proof-line) (Pro access required): Five pieces of shipped work collapse, one at a time, into the sentence that describes them. - [Render Wall](https://imgcli.com/docs/scenes/render-wall) (Pro access required): A field of loose code that resolves into a wall of finished work, and then the wall backs away. - [Showcase Drift](https://imgcli.com/docs/scenes/showcase-drift) (Pro access required): A wall of work sliding to a stop behind a headline. - [Version Drop](https://imgcli.com/docs/scenes/version-drop) (Pro access required): A name typing itself across two shots, and the number it was all for. - [Wire Feed](https://imgcli.com/docs/scenes/wire-feed) (Pro access required): A live feed writing its newest item while the camera pulls back. - [Word Montage](https://imgcli.com/docs/scenes/word-montage) (Pro access required): Photos gathering round a line that keeps changing its mind, then collapsing into the sentence it was building to. - [Count Grid](https://imgcli.com/docs/scenes/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 - [Roster Grant](https://imgcli.com/docs/scenes/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 - [Blueprint Collage](https://imgcli.com/docs/scenes/blueprint-collage) (Pro access required): A headline cycles through three phrases while five pictures and a disc hop around it in 15fps stop motion, the camera eases back, and the pictures clear away one by one to leave the last phrase fading from the accent to ink. - [Wordmark Cut](https://imgcli.com/docs/scenes/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 - [Flood Outro](https://imgcli.com/docs/scenes/flood-outro) (Pro access required): An end card: your mark and wordmark write in left to right over a warm wave, the wave sinks away, then a blue-to-orange gradient floods down the frame and the lockup turns white letter by letter. - [Announce Title](https://imgcli.com/docs/scenes/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 - [Status Cycle](https://imgcli.com/docs/scenes/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 - [Mark Grid](https://imgcli.com/docs/scenes/mark-grid) (Pro access required): The last scene wipes away and a line types itself in around your mark, lifts off word by word, and a staggered wall of tiles opens round the mark as the camera eases in. - [Product Hero](https://imgcli.com/docs/scenes/hero-launch): Cinematic product-launch hero — two cards slide into formation as the headline reveals above - [Lens Wall](https://imgcli.com/docs/scenes/lens-wall) (Pro access required): A wall of 18 pictures fades in tile by tile on a slow zoom-out, then a lens bends it: the edges stretch, the middle pulls back, flashes and cuts to the bare wall. - [Orbit Gallery](https://imgcli.com/docs/scenes/orbit-gallery): A ring of feature cards orbits a central product mark, each rotating upright as it swings to the front - [Moodboard Reveal](https://imgcli.com/docs/scenes/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 - [Mood Board](https://imgcli.com/docs/scenes/mood-board) (Pro access required): A collage builds itself under a two-line headline. - [Reel Collage](https://imgcli.com/docs/scenes/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 - [Launch Video Template](https://imgcli.com/docs/scenes/template-launch) (Pro access required): A finished product-launch video in five beats — hook, product, proof, numbers, wordmark — on one paper with a dissolve between each. - [Portal Intro](https://imgcli.com/docs/scenes/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 - [Glow Map](https://imgcli.com/docs/scenes/glow-map) (Pro access required): A light sweeps off the frame and a dotted world map wipes in west to east as it glides into place; points light up across it one after another and rings pulse out of them. - [Glow Type](https://imgcli.com/docs/scenes/glow-type) (Pro access required): Dark type lights up word by word as the camera eases back, then slides off left; the camera dives into the second line, glides along it letter-size while each letter lights as it passes, and pulls back out. - [Prompt Poster](https://imgcli.com/docs/scenes/prompt-poster) (Pro access required): A dark composer with an image attached finishes typing its request, a pointer glides in turning as it travels, presses send, and the page scrolls: the composer rides up and off while the generated poster rises in and settles. - [Pain Point](https://imgcli.com/docs/scenes/pain-point) (Pro access required): The opening beat of a launch video: the viewer's pain, typed as a question, while the camera pulls back through the tools they are stuck in. - [Glow Frame](https://imgcli.com/docs/scenes/glow-frame) (Pro access required): A line of type scales up while a thin light enters at the edge of the screen, runs round all four sides and fades to a hairline, its colours drifting round the frame. - [Metal Chip](https://imgcli.com/docs/scenes/metal-chip) (Pro access required): A brushed-metal chip with your mark embossed on its face pushes in and un-tilts in perspective while a soft light rolls over the surface. ## AI Chat Input - [Prompt Roll](https://imgcli.com/docs/ai-input/prompt-roll) (Pro access required): A prompt card is pushed in on while "Make your own …" types, cuts closer, and the last words wrap into a pill that rolls through what you can make, each in its own tint. - [Agent Chat](https://imgcli.com/docs/ai-input/agent-chat) (Pro access required): An agent conversation, from the empty field to the answer. - [Agent Open](https://imgcli.com/docs/ai-input/agent-open) (Pro access required): A line assembles a word at a time, resolves to your product's name, and becomes a prompt somebody types. - [Agent Compose](https://imgcli.com/docs/ai-input/agent-compose) (Pro access required): An agent's composer building itself around one chip, then sending a request. - [Agent Result](https://imgcli.com/docs/ai-input/agent-result) (Pro access required): An agent asked for something, and what it hands back. - [Agent Run](https://imgcli.com/docs/ai-input/agent-run) (Pro access required): A prompt typed, sent, and answered by an agent that shows its work. - [Agent Tools](https://imgcli.com/docs/ai-input/agent-tools) (Pro access required): The moment somebody hands an agent their tools. - [Files Drop](https://imgcli.com/docs/ai-input/files-drop) (Pro access required): A handful of frames is dragged into a prompt and becomes five attachments. - [Glass Prompt](https://imgcli.com/docs/ai-input/glass-prompt) (Pro access required): A prompt typed into a pane of glass, and a dive through its send button into the ring of pictures it asked for. - [Prompt Dive](https://imgcli.com/docs/ai-input/prompt-dive) (Pro access required): A prompt typed into an assistant, and then a dive into the send button. - [Search Retype](https://imgcli.com/docs/ai-input/search-retype) (Pro access required): A search field types its first query, the camera pushes in, the query deletes back to nothing and a new one types in. - [Task Stream](https://imgcli.com/docs/ai-input/task-stream) (Pro access required): An agent's task list, streaming in and ticking off. - [Search Typing](https://imgcli.com/docs/ai-input/search-typing): A search field wider than the shot — it comes forward, types across its left half, then pages to its right half - [Prompt Send](https://imgcli.com/docs/ai-input/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 - [Prompt Zoom](https://imgcli.com/docs/ai-input/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 - [Answer Stream](https://imgcli.com/docs/ai-input/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 - [Answer Highlight](https://imgcli.com/docs/ai-input/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 - [Agent Steps](https://imgcli.com/docs/ai-input/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 --- # Text & Titles URL: https://imgcli.com/docs/text Kinetic headlines, reveals, swaps, highlights and lower thirds — the decorative title layer of a video. Reach for this category whenever text is the shot: headlines, section titles, feature callouts, name bars. These components handle the enter/exit choreography — stagger, blur, slide, swap — so a title lands with intent instead of just appearing. For transcript-timed subtitles, use [Captions](/docs/captions) instead. --- # Brand Wheel URL: https://imgcli.com/docs/text/brand-wheel A lead word and a wheel of brand pills rolling through where you ship, until a cursor clicks the last one *(interactive preview: https://imgcli.com/docs/text/brand-wheel)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/brand-wheel.json ``` ## Component code The exact files `shadcn add` copies into your project. ## Usage Six items run 139 frames at 30fps; each extra item adds 20 (`brandWheelDuration(n)`). The wheel comes to rest on the last item. Known brands get their mark, anything else its initial. ```tsx import { BrandWheel } from "@/components/imgcli/brand-wheel"; export const Beat = () => ( ); ``` --- # Check Cycle URL: https://imgcli.com/docs/text/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 *(interactive preview: https://imgcli.com/docs/text/check-cycle)* A sentence with a checkbox in the middle of it. `Create your own` sits to the left of a ticked box; the word to its right rolls up out of a slot and is replaced — Intros, Demos, Launches, Changelogs, Tutorials, And more — then the whole line steps back to 80% of its size and rests. ## How it moves **The two words in the slot are one strip.** The word leaving and the word arriving keep the same distance on every frame of a roll, so it is one curve, not an ease-in exit and an ease-out entrance: the in-out cubic, `cubic-bezier(0.65, 0, 0.35, 1)`, over exactly half a second, a roll every twenty frames. **The type moves by fractions of a pixel.** A browser rounds a line of type's baseline to a whole pixel, so a word lifting off slowly holds still for four frames and then jumps. Each line is painted twice, one pixel apart, and cross-faded by the fraction between — which is exactly how a video of this line would look. ## Notes Every number was measured off a recording, frame by frame, and verified by rendering this component at the recording's own timestamps and diffing them in Y′CbCr: 0.24/255 mean error across all 65 frames, which is the size of the recording's own compression noise. The checkbox never moves. The lead-in is right-aligned to it and the word left-aligned from it, so new copy changes the words' widths, not where the sentence sits. The type is Inter 3.19, loaded from fontsource; the recording was set in Inter 3, not the Inter 4 Google serves today. If it cannot load, Google's Inter paints. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/check-cycle.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { CheckCycle } from "@/components/imgcli/check-cycle"; const Hook = () => ( ); export const RemotionRoot = () => ( ); ``` Each extra word adds one roll — 20 frames. ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: '"light" | "dark"', description: "Which end of the design system to resolve tokens against", }, ]} /> --- # Drop Line URL: https://imgcli.com/docs/text/drop-line Words cut past one card at a time, then the last word sinks out from under the dot of its own i *(interactive preview: https://imgcli.com/docs/text/drop-line)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/drop-line.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage Drop Line paints its own card and runs 38 frames at 30fps. Timing is measured frame by frame off a reference; every word, colour and font is a prop. ```tsx import { DropLine } from "@/components/imgcli/drop-line"; export const Beat = () => ; ``` --- # Font Shuffle URL: https://imgcli.com/docs/text/font-shuffle A launch title that decodes out of scrambled glyphs, flashes the accent, settles to ink, then the product name tries on eleven typefaces while the line steps closer *(interactive preview: https://imgcli.com/docs/text/font-shuffle)* A launch line, `Introducing snapcn Pro`. It decodes out of scrambled glyphs set in the wrong typeface, lands in the accent, settles to ink and holds. Then the product name tries on eleven typefaces: mono, light, humanist, pixel, script, slab, condensed, italic, blackletter, wide and a bold grotesk. The whole line steps closer on every swap. ## How it moves **Nothing tweens. Every beat is a held state.** The decode, the accent flash and the swaps are cuts on the 30fps frame grid, the way the original was made: two frames per decode beat, one for the full accent line, three or four per typeface. **The decode is the real line, half-hidden.** It is set in a Baskerville with a per-character mask, plus a handful of oversized foreign glyphs (`b`, `e`, `a`) that hang on from one beat to the next. Longer or shorter copy samples the same mask proportionally, so the density stays the same. **Each swap is also a zoom.** The line stays centred and steps from ×1.03 to ×1.25 about the middle of the frame. The lead keeps its serif. Only the subject changes face. ## Notes Every beat was measured off a 2s screen recording, frame by frame. Each was fitted in BT.709 Y′CbCr through the capture's own blur, then verified by rendering this component at the recording's size and timestamps and diffing the two. Timing, layout, zoom and colour are the recording's. The recording's typefaces are not free, so each one was fingerprinted against every Google family in its category and the closest taken: Source Serif 4 (text cut, pinned), Libre Baskerville, Fragment Mono, Hind, a pixel face and Mona Sans. They load from fontsource; if one cannot, the next face in its stack paints. The accent is the title's own colour, not a theme token. Pass `accent` to change it. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/font-shuffle.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { FontShuffle } from "@/components/imgcli/font-shuffle"; const Launch = () => ; export const RemotionRoot = () => ( ); ``` ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: '"light" | "dark"', description: "Which end of the design system to resolve tokens against", }, ]} /> --- # Hello Zoom URL: https://imgcli.com/docs/text/hello-zoom Words flicker in place, one line types on, then the camera dives through its own letters into the next card *(interactive preview: https://imgcli.com/docs/text/hello-zoom)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/hello-zoom.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage Hello Zoom paints its own card and runs 75 frames at 30fps. Timing is measured frame by frame off a reference; every word, colour and font is a prop. ```tsx import { HelloZoom } from "@/components/imgcli/hello-zoom"; export const Beat = () => ; ``` --- # Punch Lines URL: https://imgcli.com/docs/text/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 and push slowly forward until it cuts *(interactive preview: https://imgcli.com/docs/text/punch-lines)* A whole sequence in one component: you write the script, it cuts itself. Two card looks, and the sequence alternates them. **`slide` — the statement card.** Its lines are already at full size the moment the card opens, sitting left of centre. Each one is flicked right, sails past its mark and settles home, one line behind the last. It leaves by **rushing past the camera** — a scale about the middle of the frame, so the top line climbs out of shot while the bottom line dives out of the bottom. **`punch` — the hero line.** Every word starts at a third of its size and swells into place in a wave, left to right. Once they have all landed the whole line keeps **pushing slowly forward** for as long as it is on screen. It leaves on a hard cut. ```tsx ``` `|` starts a card, `/` starts a line inside one. The three lists are parallel — one entry per card, and the **last entry repeats**, so `"slide,punch"` means "the first card is a statement and everything after it is a hero line". ## The cadence, and why a card is already moving when you first see it `holds` is time **on screen**, one entry per card. So `holds="48"` is three cards of 48 frames each, back to back, and no card can bleed over the one in front of it whichever way that one leaves. The whole run is `durationInFrames` = the sum of `holds`, and nothing else. The one thing that happens off screen is `lead`: a card's clock starts a few frames before its cut, so it is caught mid-entrance rather than starting from nothing. That is the reference's own trick — its third card is already at 87% of its size on the very first frame you can see it, and there is no trace of it, not one coloured pixel, on the frame before. It is most of what makes a cut read as expensive rather than abrupt. Set `lead={0}` and every entrance plays in full. ## The slide is not a spring It looks like one: the line comes in from the left, sails past the middle and eases back. But a damped sinusoid fits the overshoot and then insists on an undershoot that never happens, and a spring released from rest cannot overshoot 0.71em without starting forty times that far out. What fits — to **0.42px rms across 37 frames, both lines at once** — is a **critically damped** system given an initial kick: ``` x(t) = (A + B·t) · e^(−λ·t) ``` `slideFrom` is `A`, `slideKick` is `B`, `slideSettle` is `λ`. The line starts 0.74em left of centre, leaves at speed, reaches 0.71em past centre just under half a second in, and comes home without ever crossing back. Raise `slideSettle` and the whole move tightens up; drop `slideKick` to nothing and it just eases in from the left. ## The smear A browser animating `translate` draws every frame perfectly sharp. Film does not, and neither does anything rendered through a shutter — and the absence of that is most of what makes a fast move read as computer graphics rather than footage. So a sliding line is blurred **horizontally by the distance it covered in that frame**, and by nothing at all once it has stopped. The number is not a taste call: a box blur one frame wide has a Gaussian equivalent of `width / √12`, and the reference's first frame measures at exactly that. `motionBlur` is the shutter angle as a fraction — `1` is fully open, `0` turns it off. Under a fifth of a pixel the filter is dropped entirely, so a still frame is never paying for a blur it does not need. ## Sizing a card `fontSize` sets a `size = 1` card; `sizes` scales each card from there. They are not all the same for a reason — a one-word payoff wants to be three times the sentence that set it up, and that jump *is* the beat. A card is centred on its **ink**, not on its line boxes: the top of the first line's tallest letter down to the bottom of the last line's lowest one, measured per card from the copy you actually passed. A face's cap height is the wrong number twice over — some faces draw their ascenders taller than their caps, so a line with an ascender in it sits high; and a word with no ascender but a descender, a lowercase wordmark for instance, is not a cap band at all, and centring it as one drops it half a descender low. Both are small, and both are exactly the sort of thing that reads as "not quite right" without ever being nameable. Long copy is caught by `fit`: if a card's widest line would cross that fraction of the frame, the **whole card** comes down a size together, so the block never changes shape because one line happened to be the long one. It is fitted against the widest that card ever gets, not the width it is laid out at — a punch card keeps growing for its whole life, and a slide card swings most of an em either side of centre. A fit that ignores both passes on frame one and runs off the stage later. (The rush is deliberately exempt: leaving the frame is what it is for.) ## Colour A card is a full-bleed page rather than a control sitting on one, so it takes the design system's two page colours — `background` and `foreground` — instead of inventing a pair. `mode="dark"` inverts the whole run; `ground` and `ink` override either end. The accent is the exception. `accentColor` is a bare prop and deliberately *not* `theme.primary`: an accent that is supposed to shout is the design, not a token, and a brand palette swapped in underneath it should not be able to turn the payoff card into the same grey as everything else. `accentBeat` picks which card gets it, counting from 1. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/punch-lines.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { PunchLines } from "@/components/imgcli/punch-lines"; const Titles = () => ( ); export const RemotionRoot = () => ( ); ``` `durationInFrames` is simply the sum of `holds` — 48 × 3 here. `punchLinesDuration(script, holds)` is exported so a script you change does not leave a composition length behind. ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: '"light" | "dark"', description: "Which end of the design system to resolve tokens against", }, ]} /> --- # Spec Sweep URL: https://imgcli.com/docs/text/spec-sweep A one-line spec slides in word by word while a highlight runs along it and an icon charges up *(interactive preview: https://imgcli.com/docs/text/spec-sweep)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/spec-sweep.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage Spec Sweep paints its own card and runs 75 frames at 30fps. Timing is measured frame by frame off a reference; every word, colour and font is a prop. ```tsx import { SpecSweep } from "@/components/imgcli/spec-sweep"; export const Beat = () => ; ``` --- # Text Build URL: https://imgcli.com/docs/text/text-build Words enter one at a time while the already-placed words physically reflow to stay centered — on the x axis as a growing line or the y axis as a growing stack *(interactive preview: https://imgcli.com/docs/text/text-build)* Unlike a plain text reveal, every word that is already on screen moves to make room: each new word enters (from the right on `axis="x"`, from above on `axis="y"`) and pushes the placed words through a re-centered layout, with a soft blur pulse while they travel. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/text-build.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { TextBuild } from "@/components/imgcli/text-build"; const TextBuildScene = () => ( ); export const RemotionRoot = () => ( ); ``` Set `axis="y"` to build a centered stack of rows instead of a single line: ```tsx ``` ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: "\"light\" | \"dark\"", description: "Which end of the design system to resolve tokens against", }, ]} /> --- # Text Highlight URL: https://imgcli.com/docs/text/text-highlight A mark wipes a wordmark open, spins into its lockup, then swings wide and comes round past the lens while its ink floods the frame — plus five span-emphasis presets *(interactive preview: https://imgcli.com/docs/text/text-highlight)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/text-highlight.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { TextHighlight } from "@/components/imgcli/text-highlight"; const TextHighlightScene = () => ( ); export const RemotionRoot = () => ( ); ``` Unlike text-reveal components, the copy is fully visible from frame one — only the emphasis on the highlighted span animates in. ## Presets - `marker` — a translucent accent marker block (16% tint of `accentColor`) sweeps behind the span with a high-damping spring, so the text underneath stays readable. - `color` — the span's text color crossfades from `baseColor` to the accent (or `highlightedTextColor`). - `underline` — an accent underline of `thickness` px draws left-to-right beneath the span. - `strikethrough` — an accent line draws across the span, then it crossfades into `replaceWith` and holds. - `shimmer` — a `shineColor` gradient sweeps across the span via background-clip text. ## How `logo-wipe` works **The wipe is a clip, not a fade.** The mark rides an edge across the word, and everything to the right of that edge exists. So the letters arrive already solid, the way a lid sliding off a thing reveals it — and they appear right-to-left, because the edge is travelling left. The whole reveal is expressed in percentages of the word's own box (`clip-path` for the letters, `left: %` for the mark), so nothing has to be measured and it works at any font size or string length. **The rush is perspective, not easing.** The mark does not grow on a ramp — it *travels toward the eye*, and its apparent size goes as `1 / (1 - travel)`. It creeps for most of the trip and then blows up at the end, which is the whole character of a thing coming at your face and is not something a curve can fake. **The rush is a swing, and the swing is built in world space.** The mark does not come down the lens in a straight line — it leaves the lockup, arcs wide to the left, comes round, and passes you on the right. A semicircle from the screen to your eye. The part that matters is *where the curve is authored*. The lateral path is a world-space crossing with a bow pulled out of it, and the projection multiplies it by the apparent scale. That single multiply is the whole effect: the same world path is a nudge while the mark is far away and a whip across the frame once it is at the lens, because that is what an arc coming at your face does — it opens up as it arrives. Author the offset in screen pixels instead and no curve you pick will fix it; you get a shape sliding around on glass, in front of the scene rather than through it. It turns, and turning is not doubling back. A pendulum at the end of its swing has not changed its mind — it is still going, and the instant its sideways speed passes through nought it is coming at you faster than ever. What you must never do is take the mark off one way and then send something else back the other. **The colour comes out of the mark.** Not in from an edge. That distinction is the whole ending, and it is forced by geometry rather than taste: the frame has to end flat, so the colour has to close over the *left* of the frame while the mark is travelling *right*, and there are exactly two ways to get it there. Something sweeps leftwards across the screen — a wall, a wipe, a roller — which is a second momentum pulling against the first, and it reads as paint being rolled on by an off-stage hand. Or the mark is already lying over that ground when its ink spreads. This is the second job the bow does, and the reason it is not decoration. Because the mark swings *left* first, it is still left of centre at the moment it is big enough to go off — lying right across that half of the frame. So the ink is born on the left and opens out to the **right, following the mark out**. Take the bow away, send the mark straight down the lens, and the ink has to close leftward against the direction of everything else in the shot. Which is what it did, and it looked like paint. The size is the other half of it: at 42× the mark's arms are past all four corners by the time the ink moves, so what closes the frame is the gaps between them filling in. So the last beat is the mark's ink **flooding out of it** — a hard-edged disc of `coverColor`, born inside the mark's own centre knot where it cannot be seen, that then outruns it. Three things about it are load-bearing: - **It is a shape, not an opacity.** Fading a full-frame rectangle up to opaque leaves a half-transparent wash lying over the backdrop for several frames, and there is no reading of that except "the screen faded to blue". - **It is keyed to the mark's size, never to the clock.** It cannot begin until the mark is already frame-sized. On a timer it starts while the mark is small, and you get a blue screen with a little logo on it. - **It lags the mark.** Ink is emitted, not carried: the mark punches ahead and its colour is left in the wake. Pin the disc *to* the mark and it flies out to the side with it, which drags the burst off-centre — and then the furthest corner of the frame is the one behind the mark, so the last thing on screen is a colour edge closing backwards, against the direction the whole shot is travelling. **A logo cannot cover the frame by growing**, and that is a shape fact, not a tuning problem: scaling a mark scales its *holes* by exactly as much. Measured on the bundled clover, filling the frame with solid ink by scaling would take **396×**. The ink is what closes them. **The wordmark does not fade out.** The mark blows up straight through it and the ink takes what is left, so the word is *erased* rather than merely absent — and the frame is never empty, which is what fading it used to cost. Set `coverColor` to `"transparent"` to skip the ink and end on the giant mark instead, with the backdrop still showing through it. ### If your logo is an image, it needs `max-width: none` Tailwind's preflight sets `img { max-width: 100% }`, and it applies to `img` but **not** to `svg`. The mark is placed in an absolutely-positioned box at `left: 100%` (the word's right edge), where the width available to an auto-width box is *(containing block − left) = zero*. Shrink-to-fit then asks the content for its minimum width: an `

{text}

); const AppPreview = () => ( ); export const RemotionRoot = () => ( ); ``` ```bash npx remotion render AppPreview out/app-preview-iphone.mp4 ``` For iPad, register a second `` at `1200×1600` with the iPad capture. Same components, different `width`, `height` and `src`. If your capture already matches 886×1920 there is nothing to crop. If it is a different aspect, give Screen Recording `sourceAspect` (width ÷ height of the file) so the crop and fit are exact. ## The Google Play video: here a device frame fits On YouTube you are not bound by 2.3.4, so the opening shot can be the app inside a phone. [Phone Frame](/docs/screens/phone-frame) takes the same capture as `screenSrc` and brings the device in with a crane move: ```tsx import { staticFile } from "remotion"; import { PhoneFrame } from "@/components/imgcli/phone-frame"; export const PlayHero = () => ( ); ``` Open on that for a few seconds, then cut to the full-frame capture — Google's guidance is that most of the video should be the real experience. *(interactive preview: https://imgcli.com/app-store-preview-video)* ## Install ```bash npx shadcn@latest add https://imgcli.com/r/screen-recording.json https://imgcli.com/r/phone-frame.json ``` More on devices in [how to add an iPhone mockup to a Remotion video](/remotion-iphone-mockup). Next: [product tour and onboarding videos in React](/onboarding-video-react). --- # The best tools for making a product demo video in 2026 URL: https://imgcli.com/best-product-demo-video-tools Screen recorders, interactive demo builders and code-based video — Screen Studio, Tella, Loom, Cap, Arcade, Supademo, Storylane and Remotion compared on output, platform and price. **Short answer:** for a polished screen recording on a Mac, **Screen Studio**; on Mac or Windows, **Tella** or **Cap**; for a quick async walkthrough, **Loom**. If you want people to click through the product rather than watch it, use an interactive demo tool — **Arcade**, **Supademo** or **Storylane**. If you want the video to live in your repo and re-render when the product changes, build it in code with **Remotion**. Prices and platforms below were checked on each tool's own site in October 2026. They change often, so confirm on the pricing page before you buy. ## At a glance | Tool | Makes | Platform | Price | Best for | | --- | --- | --- | --- | --- | | [Screen Studio](https://screen.studio) | Screen recording with auto zooms | macOS only | $29/month, or $9/month billed yearly | Polished Mac recordings | | [Tella](https://www.tella.com) | Screen + camera recording, editor | Mac, Windows, browser, Chrome extension | From $13/user/month billed annually | Edited walkthroughs with a camera | | [Loom](https://www.loom.com) | Async video messages | Mac, Windows, iOS, Android | Free plan; Business $18/user/month | Fast, shareable explanations | | [Cap](https://cap.so) | Open-source screen recorder | macOS, Windows, Linux | Free plan; Desktop $29/year or $58 lifetime | A free or open-source recorder | | [Arcade](https://www.arcade.software) | Interactive demos (plus AI video) | Chrome extension, desktop app, Figma plugin | Free plan; Pro from $49/month billed annually | Clickable demos that also export MP4/GIF | | [Supademo](https://supademo.com) | Interactive demos | Chrome extension, Mac and Windows apps | Free plan; Scale $38/month billed annually | Self-serve demos for marketing and onboarding | | [Storylane](https://www.storylane.io) | Interactive and sandbox demos | Web | Free plan; Starter $50/month | Sales-led teams | | [Remotion](https://www.remotion.dev) | Videos rendered from React | Any OS with Node | Free for individuals and companies up to 3 employees | Videos that live in code | ## Screen recorders ### Screen Studio Screen Studio calls itself "the screen recorder for Mac that handles the hard parts" — zooms, motion, sound and framing — so a raw recording comes out looking edited. It is macOS only; its FAQ says there are no near-future plans for Windows. Pricing is $29 a month, or $9 a month billed yearly, and every feature is in every plan. **Best for:** a Mac user who wants a polished recording without opening an editor. If you are on Windows, see our [Screen Studio alternatives](/screen-studio-alternatives). ### Tella Tella records your screen, camera, microphone and system audio as separate tracks, so you can change the layout after recording, and its editor handles trimming, layouts, zooms, captions and sound cleanup. It runs on Mac and Windows, in the browser, and as a Chrome extension. The pricing page lists Pro at $13 per user per month and Premium at $19, both billed annually; there is no free plan, though the FAQ mentions a free trial. **Best for:** a walkthrough with you on camera that needs light editing. ### Loom Loom is for recording and sharing video messages with teammates and customers. It records your screen and camera, on Mac, Windows, iOS and Android. The free Starter plan allows 25 videos of up to five minutes each, at up to 720p. Business is $18 per user per month with unlimited videos and recording time, and Business + AI is $24. **Best for:** a quick explanation sent to one person or a team, not a launch video. ### Cap Cap is an open-source screen recorder. Most of the code is AGPLv3, according to its GitHub repository. The download page offers macOS (Apple Silicon and Intel), Windows and Linux builds. The free plan is for personal use; commercial use needs a paid plan. The Desktop License is $29 a year or $58 once for lifetime, and Cap Pro, which adds cloud sharing and AI titles and transcripts, is $12 per user per month or $8.16 billed annually. **Best for:** a low-cost or open-source recorder, including on Windows and Linux. ## Interactive demo tools These capture your product as clickable steps rather than a video. We cover when that is the right format in [interactive demo vs video demo](/interactive-demo-vs-video-demo). ### Arcade Arcade records with a Chrome extension, a desktop app or a Figma plugin, then lets you add hotspots, callouts, voiceover and branching. Demos embed on websites, help centres and inside your product, and any demo can be exported as an MP4, a GIF or a step-by-step guide. Arcade's homepage now leads with an AI video generator for marketing teams, and its pricing page lists credit-based plans: a free plan and Pro from $49 a month billed annually. **Best for:** a clickable demo that you also want as a video or GIF. ### Supademo Supademo captures demos with a Chrome extension or Mac and Windows desktop apps. Its site lists website, sales and onboarding use cases, and its FAQ says demos export as GIF, MP4 and PDF. The free plan includes five interactive demos for one creator. Scale is $50 a month, or $38 a month billed annually, per creator. **Best for:** a small team that wants interactive demos on a free or low tier. ### Storylane Storylane offers interactive demos, sandbox demos ("a pixel-perfect clone of the product") and Hubs, a digital sales room. The free plan allows one published demo at a time. Starter is listed at $50 a month, with a 20% discount for yearly billing; Growth and Premium are priced for sales teams. **Best for:** a sales-led company that wants demos inside a sales process. ## Code-based: Remotion and component libraries [Remotion](https://www.remotion.dev) describes itself as a way to "create videos and motion graphics with React". Each scene is a React component, you preview it in Remotion Studio, and `npx remotion render` writes the file (H.264 is the default codec). Remotion's license is free for individuals, for-profit companies with up to three employees, and non-profits; larger companies need a company license. What you get is a demo you can edit like code: change a string, re-render, and the video matches the new UI. What you pay is setup time and the motion design itself, which is where component libraries come in. We compare them in [the best Remotion component libraries](/best-remotion-component-libraries). [Imgcli](/docs/components) is ours, so weigh this paragraph accordingly. It is a shadcn registry of Remotion components built for software videos — a [screen recording with a camera move](/docs/screens/screen-recording), a [cursor track](/docs/screens/cursor-track), a [prompt being typed](/docs/ai-input/prompt-send), a [laptop frame](/docs/screens/laptop-frame). You install one with `npx shadcn@latest add https://imgcli.com/r/.json` and the source is copied into your project. The [free catalog](/docs/components) lists the MIT-licensed components. Use the [browser video editor](/docs/video-editor) to assemble scenes and export MP4 without a Remotion project. Sign in to save projects and share your exports. **Best for:** developers who want the demo video in their repo, re-rendered as the product changes. Walkthroughs: [product demo video in React](/product-demo-video-react) and [a SaaS demo video without After Effects](/saas-demo-video-without-after-effects). ## How to choose 1. **Do viewers need to click through the product?** Use an interactive demo tool. 2. **Are you recording real UI on a Mac and want it polished?** Screen Studio. 3. **On Windows or Linux, or want it free?** Cap; Tella if you want an editor with a camera. 4. **Is it a quick note to a teammate or customer?** Loom. 5. **Will the video be re-made every release, or does it need motion graphics?** Remotion, with prebuilt components. The categories mix well: record the product in Screen Studio or Cap, then bring the clip into a Remotion composition for the titles and the cut. For launch specifics see [the Product Hunt launch video](/product-hunt-launch-video), and for a README see [the GitHub demo GIF](/github-readme-demo-gif). ## Sources - https://screen.studio/ - https://www.tella.com/ - https://www.tella.com/pricing - https://www.loom.com/ - https://www.loom.com/pricing - https://cap.so/pricing - https://cap.so/download - https://github.com/CapSoftware/Cap - https://www.arcade.software/ - https://www.arcade.software/product/interactive-demo - https://www.arcade.software/pricing - https://supademo.com/ - https://supademo.com/pricing - https://www.storylane.io/ - https://www.storylane.io/pricing - https://www.remotion.dev/ - https://www.remotion.dev/docs/render - https://www.remotion.dev/docs/encoding - https://github.com/remotion-dev/remotion/blob/main/LICENSE.md --- # The best Remotion component libraries in 2026 URL: https://imgcli.com/best-remotion-component-libraries Every Remotion component library worth knowing in 2026 — Remotion Elements, remocn, RemotionUI, Imgcli and React Video Editor — what each is for, how it installs and what it costs. **Short answer:** start with **Remotion Elements** (official, drops into Studio), reach for **remocn** or **RemotionUI** when you need breadth, use **Imgcli** when the video is a product demo, and buy **React Video Editor** only if you are building an editor into your own app. All but the last copy source into your project, so you can mix them. Third-party catalog figures reflect the original September 2026 comparison. ## At a glance | Library | Size | Price | Installs with | Best for | | --- | --- | --- | --- | --- | | [Remotion Elements](https://www.remotion.dev/elements) | ~40 | See Remotion's license | Remotion Studio | Official building blocks: captions, charts, backgrounds, maps | | [remocn](https://remocn.dev) | ~308 | Free, MIT | shadcn CLI | Breadth: typography, shaders, transitions, icons | | [RemotionUI](https://remotionui.com) | ~210 | Free | `npx remotion-ui add` | Scenes, transitions, data, device frames | | [Imgcli](/docs/components) | See the catalog | MIT for free components | shadcn CLI | Product demo shots | | [React Video Editor](https://www.reactvideoeditor.com) | Full editor | From $149 one-time | Source template or SDK | Putting a video editor inside your app | ## Remotion Elements The official catalogue from the Remotion team, at remotion.dev/elements. Around forty elements across audio, backgrounds, captions, layouts, charts, maps, overlays, storytelling, text effects and YouTube. The distinguishing feature is the Studio integration: install an element and it appears on the canvas you have open. Start here — it is the set most likely to track Remotion's own API. ## remocn The widest free library: roughly 300 components, MIT, no paid tier. Categories include typography, shaders, transitions, animated icons, UI primitives, filters, effects and layout. It is the natural pick when you need a transition or a shader background. See the original comparison in [upstream snapcn vs remocn](/snapcn-vs-remocn). ## RemotionUI Around 210 components with its own CLI (`npx remotion-ui@latest init` to start, `npx remotion-ui add ` per component), copying source into your repo. Covers compositions, scenes, transitions, data and media, maps and devices, and shapes. ## Imgcli Our library, so read this one with that in mind. Imgcli is narrower on purpose: its components are the shots a software video is made of — a [prompt typed and sent](/docs/ai-input/prompt-send), an [answer streaming in](/docs/ai-input/answer-stream), a [terminal](/docs/screens/terminal-simulator), a [screen recording with a camera](/docs/screens/screen-recording), a [phone](/docs/screens/phone-frame) or [laptop](/docs/screens/laptop-frame), [captions](/docs/captions) and [logo stings](/docs/logos). Components take shadcn theme tokens, text is tuned against render judder, and there is an [MCP server](/docs/mcp) for coding agents. *(interactive preview: https://imgcli.com/best-remotion-component-libraries)* ## React Video Editor Not a component library: a complete video editor built on Remotion, sold as source code (one-time, from $149) or as a managed SDK. Timeline, captions, effects, uploads. Buy it if your product needs an editor; skip it if you are making one video. ## How to choose 1. **Is the video about your software?** Start with Imgcli's demo shots and fill gaps from the others. 2. **Do you need transitions, shaders or backgrounds?** remocn or RemotionUI. 3. **Do you edit in Remotion Studio?** Remotion Elements first. 4. **Are your users making videos?** React Video Editor. They do not conflict. Components that copy source into your project are just React files — install from two libraries and use them in one ``. Next: [how to make a product demo video in React](/product-demo-video-react). --- # Free and paid Remotion templates in 2026 URL: https://imgcli.com/best-remotion-templates Every official create-video template, what the Remotion Store sells and for how much, and the third-party template collections listed in Remotion's docs. **Short answer:** start with the free official templates from `npx create-video@latest`. Pick **Hello World** for a first project, **Next.js** or **React Router** for a video-generation SaaS, or **Render Server** / **Next.js (Vercel Sandbox)** if you need server rendering. Pay for a Remotion Store item only if you are building an editor (**Editor Starter**, **Timeline**). For ready-made scenes, Remotion's docs link free MIT collections (**SwiftClip**, **RenderComp Free**, **cliphou.se**) and a paid one (**Lexington Motion**). Everything below was checked in October 2026, on remotion.dev, the Remotion Store, the create-video source on GitHub and each third-party site. Prices are as published that day. ## At a glance | Source | What you get | Price (as published) | License | | --- | --- | --- | --- | | [create-video templates](https://www.remotion.dev/templates) | 20 official starters | Free | Remotion license | | [Remotion Store](https://www.remotion.pro/store) | Editor Starter, Timeline, Cube Transition, Colors and Shapes | $10 to $600 per item | Remotion terms | | [SwiftClip](https://github.com/zz41354899/SwiftClip) | 30+ composition templates | Free | MIT | | [RenderComp Free](https://rendercomp.com/free) | 50 templates | Free; full catalogue $149 | MIT | | [cliphou.se](https://cliphou.se/remotion-templates/) | Editable templates, source download | Free | MIT-0 | | [Lexington Motion](https://lexingtonthemes.com/remotion) | 415 templates | $99 one payment | Commercial license | Whichever you pick, Remotion's own license still applies to Remotion. It is free for individuals, for-profit organisations with up to 3 employees and non-profits. Bigger companies need a Company License (see [License & Pricing](https://www.remotion.dev/docs/license/pricing)). ## Official templates: `npx create-video@latest` The wizard asks for a package manager, a template, and whether to install Agent Skills. The docs recommend Hello World for a first project. To skip the questions: ```bash npx create-video@latest --yes --blank my-video ``` That command is from the getting-started page. It creates a blank project with Agent Skills and no Tailwind. The list below is the `FEATURED_TEMPLATES` array in `packages/create-video/src/templates.ts`, and it matches the "Free templates" section on remotion.dev/templates: | Template | Description from the source | | --- | --- | | Blank | Nothing except an empty canvas | | Hello World | A playground with a simple animation | | Next.js | SaaS template for video generation apps | | Next.js (Vercel Sandbox) | Render videos on-demand using Vercel Sandbox | | Recorder | A video production tool built entirely in JavaScript | | Prompt to Motion Graphics SaaS Starter Kit | SaaS template for AI-powered animation generation | | Render Server | An Express.js server for rendering videos with Remotion | | Electron | Render Remotion videos from a desktop app | | React Router | SaaS template for video generation apps | | Element Library | Build and publish your own Remotion Element library | | React Three Fiber | Remotion + React Three Fiber starter template | | Still images | Dynamic PNG/JPEG template with built-in server | | Audiogram | Text and waveform visualization for podcasts | | Music Visualization | Music visualization starter | | Prompt to Video | Create a story with images and voiceover from a prompt | | Skia | React Native Skia starter | | Overlay | Overlays for video editing software | | Code Hike | Beautiful code animations | | Stargazer | Celebrate your repo stars with a video | | TikTok | Generate animated word-by-word captions | Most are maintained under the `remotion-dev` GitHub organisation. Stargazer is the exception: its repository is `pomber/stargazer`. Blank, Hello World, Audiogram, Music Visualization, Prompt to Video, Overlay, Stargazer and TikTok let the CLI add Tailwind. (Music Visualization's description in the source reuses Audiogram's text, so the table describes it by name.) The same file has a separate `PAID_TEMPLATES` list. It holds one entry, Editor Starter, which links to remotion.pro. ## The Remotion Store The store at remotion.pro/store listed four products: | Item | Price | What it is | | --- | --- | --- | | Editor Starter | $600 | A starting point for building your own video editor. GitHub repository, copy-and-pasteable. Marked as an Enterprise license perk | | Timeline | $300 | A `` component that syncs with the Remotion Player, shipped in a Vite example project. Built with Tailwind CSS and React | | Cube Transition | $10 | A 3D cube presentation for `` from `@remotion/transitions`, also available as an npm package | | Colors and Shapes | $20 | Marked as a "License perk" on the store listing. Its product page did not load when we checked | The templates page also lists **Watercolor Map** under paid templates. Its store page now says "This product is no longer available for purchase." On "license perk": Remotion's pricing page lists "Editor Starter included" in the Enterprise License (starting at $500 per month). The Editor Starter page marks it as included with the Enterprise license, not the Company license. If your company is already on Enterprise, check your perks before you buy. ## Third-party template collections These are the template collections linked from Remotion's [List of resources](https://www.remotion.dev/docs/resources). We checked each one ourselves. **SwiftClip.** MIT, open source, 45 GitHub stars. The README describes it as "an open-source library of 30 copy-paste video composition templates". Its feature list says 32: Product Launch, SaaS Promo, Data Viz, Lower Third, Testimonial Card, End Screen and more. They are built on `useCurrentFrame()`, `interpolate()` and `spring()`, with Remotion, React and lucide-react as the only dependencies. **RenderComp Free.** 50 templates under MIT. The page says you can use them in commercial projects as long as you keep the MIT notice. Full source is on GitHub with no signup. RenderComp sells the full catalogue (1,000+) as "RenderComp Solo" for $149, "pay once, lifetime updates". **cliphou.se.** Templates under MIT-0. You can edit text and colours in the browser, download MP4s, or download a standalone Remotion source package (`npm ci`, then render with your props). The page says "100% free", with no watermark or attribution required. **Lexington Motion.** Paid: "415 video templates for reels, social, web, charts and more", $99 for all of them, one payment, with a commercial license and unlimited renders. The page notes that a Remotion license is not included. ## Templates vs components A template is a whole project you start from. If you already have a Remotion project and need the shots inside it, a component library fits better. Those are covered in [the best Remotion component libraries](/best-remotion-component-libraries). Imgcli is one of them (ours): you install components into an existing project with `npx shadcn@latest add https://imgcli.com/r/.json`, including full scenes like [Product Hero](/docs/scenes/hero-launch), and the source is copied into your repo. Browse the [free MIT-licensed components](/docs/components) for scenes you can add to your project. If you are rendering on a server, the next question is where to run it: [Lambda vs Cloud Run vs your own server](/remotion-lambda-vs-self-hosted-rendering). ## Sources - https://www.remotion.dev/docs (Creating a new project) - https://www.remotion.dev/templates - https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/templates.ts - https://www.remotion.dev/docs/vercel-sandbox - https://www.remotion.pro/store - https://www.remotion.pro/editor-starter - https://www.remotion.pro/timeline - https://www.remotion.pro/cube-transition - https://www.remotion.pro/watercolor-map - https://www.remotion.dev/docs/license/pricing - https://github.com/remotion-dev/remotion/blob/main/LICENSE.md - https://www.remotion.dev/docs/resources - https://github.com/zz41354899/SwiftClip - https://rendercomp.com/free - https://github.com/RenderComp/free-remotion-templates - https://cliphou.se/remotion-templates/ - https://lexingtonthemes.com/remotion --- # The best shadcn-compatible animation libraries in 2026 URL: https://imgcli.com/best-shadcn-animation-libraries Magic UI, Aceternity UI, Motion Primitives, Animate UI, React Bits, Kokonut UI and Cult UI compared on license, install method, price and animation engine. **Short answer:** for MIT code with a big catalogue, start with **Magic UI**. **Motion Primitives**, **Kokonut UI** and **Cult UI** are also MIT and free. **Aceternity UI** has a free tier and a paid all-access plan under its own license. **React Bits** and **Animate UI** are free to use in your product, but their MIT + Commons Clause license forbids reselling or redistributing the components. Every one of them has a namespace in the shadcn registry directory. Everything below was checked in October 2026, on each project's site, its GitHub repository and the shadcn registry directory. Star counts come from the GitHub API on the same day and will drift. ## At a glance | Library | License | Installs with | Price | GitHub stars | Animates with | | --- | --- | --- | --- | --- | --- | | [Magic UI](https://magicui.design) | MIT | shadcn CLI (`@magicui`) | Free; Pro $199 one-time | 22,775 | Motion on animated items (some are CSS-only) | | [Aceternity UI](https://ui.aceternity.com) | Aceternity's own license | shadcn CLI (`@aceternity`) | Free tier; paid plans from $169 one-time | No public repo found | Motion on most items | | [Motion Primitives](https://motion-primitives.com) | MIT | Own CLI, manual copy, `@motion-primitives` | Free; separate Pro site | 6,779 | Motion | | [Animate UI](https://animate-ui.com) | MIT + Commons Clause | npm + own CLI, `@animate-ui` | Free | 4,563 | Motion | | [React Bits](https://reactbits.dev) | MIT + Commons Clause | shadcn CLI (`@react-bits`) or copy-paste | Free; Pro from $129 one-time | 49,890 | GSAP, Motion, Three.js or OGL, per component | | [Kokonut UI](https://kokonutui.com) | MIT | shadcn CLI (`@kokonutui`) | Free; separate Pro site | 2,188 | Motion | | [Cult UI](https://www.cult-ui.com) | MIT | shadcn CLI (`@cult-ui`) | Free | 6,654 | Motion on most items | "Animates with" comes from the `dependencies` field of the registry items we fetched (for example Magic UI's `blur-fade` lists `motion` and its `marquee` lists none) and from each project's docs. Always check the component you actually install. ## Magic UI MIT-licensed, and the most-starred MIT library in this list. The docs install components with the shadcn CLI: ```bash pnpm dlx shadcn@latest add @magicui/globe ``` Animated items depend on `motion`. Some, like `marquee`, list no dependencies at all. Magic UI Pro is sold separately as templates plus premium components, for $199 one-time, according to the docs page. ## Aceternity UI Components install through the `@aceternity` namespace, for example `npx shadcn@latest add @aceternity/3d-card`. Most registry items we checked (`text-generate-effect`, `background-beams`, `hero-highlight`) depend on `motion`; `3d-card` lists no dependencies. Read the licence page before you ship. It is not MIT: one set of terms covers every item, free or paid. You can build unlimited end products for yourself or your clients, and those products may be sold. You cannot redistribute the source files, sell items on a marketplace, or build themes or templates to sell on a marketplace. The pricing page lists a free tier, a 1-Year License at $169, Lifetime Access at $199 and Team at $1,590, all one-time payments, each shown against a higher "regular price". ## Motion Primitives MIT. The repo describes it as motion components built with Motion and Tailwind CSS, and says the project is in beta. Install with its CLI (`npx motion-primitives@latest add text-effect`) or copy the code by hand. Manual setup needs `motion` (plus `lucide-react` for some components). It is also registered as `@motion-primitives`. A separate site, pro.motion-primitives.com, sells sections and templates; it showed no prices when we checked. ## Animate UI A different approach: animated drop-in versions of Radix UI, Base UI and React Aria primitives. The README says "Swap the import, keep your shadcn/ui components." The docs install `@animate-ui/react` and `motion`, then `npx @animate-ui/cli@latest animate all` animates every installed shadcn/ui component. Individual items are also served under the `@animate-ui` namespace. **License:** MIT + Commons Clause. You may use it in any application, website or product, commercial or not, "so long as you do not sell or redistribute the components themselves in their original form". ## React Bits The most-starred project in this list. The README shows effects such as Split Text, Liquid Chrome, Ballpit and Circular Gallery. Every component comes in four versions: JavaScript or TypeScript, styled with CSS or Tailwind. Install with the shadcn CLI, where the suffix picks the version: ```bash npx shadcn@latest add @react-bits/SplitText-TS-TW ``` Or copy the files from a component's Code tab. The engine varies by component. `SplitText-TS-TW` depends on `gsap` and `@gsap/react`, `BlurText-TS-TW` on `motion`, and the repo's package.json also includes `three` and `ogl`. **License, precisely:** the LICENSE file is "MIT + Commons Clause License Condition v1.0". It grants use, copying, modification and distribution "as part of an application, website, or product", including for commercial purposes, "so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version." The same restriction covers the React Bits tools (Background Studio, Texture Lab and the others) and its sound library. What you export from the tools is yours to use in any product, but you may not sell the exports on their own as a pack. So using React Bits in your SaaS landing page is fine. Porting its components into another library you publish is not. React Bits Pro is a separate paid product. Its pricing page lists lifetime plans at $129 (Starter), $249 (Pro) and $349 (Ultimate), as one-time payments. ## Kokonut UI MIT. Built with Tailwind CSS, shadcn/ui and Motion, according to its README. Install with `npx shadcn@latest add @kokonutui/particle-button`. The CLI pulls in what a component needs, such as `lucide-react`, shadcn/ui primitives and `motion`. Kokonut UI Pro (kokonutui.pro) sells templates and premium sections; the main site shows no price. ## Cult UI MIT. The README says every component is a shadcn/ui registry item, uses Tailwind CSS v4 and shadcn theme tokens, and that "most animate with Motion". Install with either the URL or the namespace: ```bash npx shadcn@latest add @cult-ui/shift-card ``` The site calls the components "all free" and links a separate Cult Pro site. ## How to choose 1. **Need plain MIT?** Magic UI, Motion Primitives, Kokonut UI or Cult UI. 2. **Want your existing shadcn components to animate?** Animate UI's CLI does that in one command. 3. **Want showpiece effects (WebGL, 3D, text)?** React Bits, as long as you are not planning to redistribute the components. 4. **Building a client site from paid blocks?** Read Aceternity's licence first; the marketplace limits matter for agencies. ## What about video? Remotion's docs say that "all animations in Remotion must be driven by the value returned by the `useCurrentFrame()` hook". Anything else needs an integration that syncs timing with Remotion. For GSAP there is a `@remotion/gsap` package. For Framer Motion, the docs say there is no integration yet. So most of the libraries above will not render correctly in a Remotion video without rework. For video there are shadcn registries written for Remotion: - **[remocn](https://www.remocn.dev)**: MIT, 1,624 GitHub stars, installs as `@remocn/`. - **[Imgcli](/docs/getting-started/installation)**: our registry, so weigh that. It installs as `npx shadcn@latest add https://imgcli.com/r/.json` and copies the source into your project. The [free MIT-licensed catalog](/docs/components) includes [text-reveal](/docs/text/text-reveal) and [terminal-simulator](/docs/screens/terminal-simulator). The full rundown of Remotion libraries is in [the best Remotion component libraries](/best-remotion-component-libraries). ## Sources - https://ui.shadcn.com/r/registries.json - https://github.com/magicuidesign/magicui - https://magicui.design/docs/installation - https://magicui.design/r/blur-fade.json - https://magicui.design/r/marquee.json - https://ui.aceternity.com/docs - https://ui.aceternity.com/components/3d-card-effect - https://ui.aceternity.com/registry/text-generate-effect.json - https://ui.aceternity.com/licence - https://ui.aceternity.com/pricing - https://github.com/ibelick/motion-primitives - https://motion-primitives.com/docs/installation - https://pro.motion-primitives.com - https://github.com/imskyleen/animate-ui (README and LICENSE.md) - https://animate-ui.com/docs/installation - https://github.com/DavidHDev/react-bits (README, LICENSE, package.json) - https://reactbits.dev/get-started/installation - https://reactbits.dev/r/SplitText-TS-TW.json - https://pro.reactbits.dev - https://github.com/kokonut-labs/kokonutui - https://kokonutui.com/docs - https://kokonutui.com - https://github.com/nolly-studio/cult-ui - https://www.cult-ui.com - https://github.com/Remocn/remocn - https://motion.dev - https://www.remotion.dev/docs/third-party --- # How to make a changelog video in React URL: https://imgcli.com/changelog-video-react Turn every release into a changelog video with Remotion — one React composition, the release notes passed in as props, rendered from the CLI or CI with a single command. To make a changelog video in React, build **one** [Remotion](https://www.remotion.dev/docs) composition that takes the release as props — a version and a list of changes — and render it per release with `npx remotion render --props=release.json`. Let `calculateMetadata` size the video to the number of changes, and every release gets its video from a JSON file. *(interactive preview: https://imgcli.com/changelog-video-react)* ## 1. Describe the release as data ```json title="release.json" { "version": "v2.4", "tagline": "Faster renders, dark mode, and a new CLI.", "changes": ["Renders 2× faster", "Dark mode everywhere", "npx acme deploy"] } ``` This file is the only thing that changes between releases. Generate it from your changelog, your tags or your PR titles — it is just JSON. ## 2. One composition, driven by props A title card for the version, then one card per change. [Announce Title](/docs/scenes/announce-title) opens; [Punch Lines](/docs/text/punch-lines) cuts hard between the changes, one card each (`|` starts a new card): ```tsx // src/Changelog.tsx import { Series } from "remotion"; import { AnnounceTitle } from "@/components/imgcli/announce-title"; import { PunchLines, punchLinesDuration, } from "@/components/imgcli/punch-lines"; export type Release = { version: string; tagline: string; changes: string[]; }; export const TITLE_FRAMES = 170; export const HOLD = "48"; // frames per change card export const changesScript = (changes: string[]) => changes.join(" | "); export const Changelog = ({ version, tagline, changes }: Release) => ( ); ``` `punchLinesDuration()` is exported by the component for exactly this: change the script and the sequence length follows. ## 3. Let the video size itself Five changes need a longer video than three. `calculateMetadata` computes the duration from the props before anything renders: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { Changelog, changesScript, HOLD, TITLE_FRAMES, type Release, } from "./Changelog"; import { punchLinesDuration } from "@/components/imgcli/punch-lines"; export const RemotionRoot = () => ( ({ durationInFrames: TITLE_FRAMES + punchLinesDuration(changesScript(props.changes), HOLD), })} /> ); ``` ## 4. Render it per release `--props` takes a JSON string or a path to a JSON file: ```bash npx remotion render Changelog out/v2.4.mp4 --props=./release.json ``` Put that in CI on every tag and the MP4 is waiting when you write the announcement. Render a square cut for social by changing `width` and `height`; the components size themselves to the frame. ## What makes a changelog video worth watching - **Three changes, not twelve.** A video is the trailer, not the notes. Link the full changelog. - **Name the outcome, not the ticket.** "Renders 2× faster" beats "Refactor render queue". - **Show one change working.** If a change has UI, cut to it — a [screen recording with a camera](/docs/screens/screen-recording) or a [terminal typing the new command](/docs/screens/terminal-simulator). - **End on how to get it.** A version number and an install command. *(interactive preview: https://imgcli.com/changelog-video-react)* Both components install as source you own: ```bash npx shadcn@latest add https://imgcli.com/r/announce-title.json https://imgcli.com/r/punch-lines.json ``` Next: [how to make a product demo video in React](/product-demo-video-react). --- # Making videos with Claude Code and Remotion URL: https://imgcli.com/claude-code-remotion-videos Claude Code can write a whole Remotion video from a brief. Give it Remotion's agent skills, a component library to compose instead of improvised motion, and a prompt with real copy — here is the setup and what agents still get wrong. **Short answer:** Claude Code makes videos by writing Remotion — React components rendered to MP4. Install [Remotion](https://www.remotion.dev/docs)'s agent skills so it knows the API, give it a component library to **compose** rather than animation to invent, and brief it with your real copy and a length. Then review the frames yourself. ## 1. Set up the project with skills ```bash npx create-video@latest ``` The Remotion scaffolder offers to add Remotion's agent skills — say yes. In an existing project: ```bash npx skills add remotion-dev/skills ``` These teach the agent Remotion's own best practices: `useCurrentFrame()`, `interpolate()`, ``, rendering. They work with Claude Code, Codex, Cursor and other agents. Remotion's docs also serve every page as markdown: append `.md` to a docs URL, and Claude Code fetches that version when you paste a link. ## 2. Give it components, not a blank canvas Give the agent the [Imgcli component index](/llms-components.txt) so it can choose a component for each beat and read its props, duration, and install command. *(interactive preview: https://imgcli.com/claude-code-remotion-videos)* ## 3. Write the brief like a shot list Vague prompts get vague videos. Name the length, the format, the beats and the exact words on screen: ```text Make a 20-second 1920x1080 launch video for Acme Billing in this Remotion project. Beats: 1. Title: "Invoices, sent before lunch" (3s) 2. A prompt being typed and sent: "Bill Acme for September's usage" (5s) 3. The answer streaming in (6s) 4. Screen recording public/recordings/checkout.mp4, push in on the Send button (6s) Use installed Imgcli components for every beat; do not write animation by hand. Transitions between beats: slide from the right, not fade. Render it to out/launch.mp4 when Studio looks right. ``` The last lines do the most work: "do not write animation by hand" keeps the agent composing, and naming the transition avoids the most common defect. ## 4. What agents still get wrong - **Crossfades that stack scenes.** Remotion's `fade()` keeps the outgoing scene at full opacity, so two headlines sit on top of each other mid-transition. Ask for `slide()` — the full reason is in [why your Remotion scene transitions look broken](/remotion-scene-transitions-overlap). - **Improvised easing.** Linear moves, springs that bounce type, quint ease-outs that look frozen on a 30fps clock. See [how to animate text in Remotion](/remotion-text-animations). - **Guessed props.** An agent that has not read a component's props invents plausible ones. Use the component index to confirm each install name. - **Invisible text.** A render with no background is black, and light-theme text disappears on it. Tell the agent the background colour. - **Never looking.** The agent cannot see motion. Scrub it in Studio yourself before you ship. *(interactive preview: https://imgcli.com/claude-code-remotion-videos)* Next: [how to make a product demo video in React](/product-demo-video-react) — the same video, step by step, if you would rather build it yourself. --- # Documentation URL: https://imgcli.com/docs Imgcli is a shadcn registry of Remotion components — install an animation into your own project and own the file. You have shipped the product and now you need the video. Imgcli is a [shadcn](https://ui.shadcn.com) registry of Remotion components — titles, captions, device frames, logo stings, whole scenes — that you install into your own project with the CLI you already use. The component lands in your repo as a file you own, written against the plain Remotion API, and you edit it like any other component you wrote yourself. ## How it works 1. **Have a Remotion project.** Imgcli does not bootstrap one — `npx create-video@latest` does. See [Installation](/docs/getting-started/installation). 2. **Add a component.** `npx shadcn@latest add https://imgcli.com/r/text-reveal.json` copies the source into `components/imgcli/`, with anything it depends on. No dependency on Imgcli is added to your `package.json`. 3. **Put it in a composition.** Pass the words you are animating; every other prop has a working default, so it renders the moment it is mounted. Change the copy, the colours, the timing — it is your file now. 4. **Render.** `npx remotion render`. The same component that played in the browser preview is the one that goes into the mp4. ## What is in here [Components](/docs/components) is the gallery: every component in Imgcli in one filterable grid, each card playing its own scene. The category pages below are the same components grouped by the job they do, with the installation and usage notes for that group. Free components are [MIT licensed](/docs/getting-started/license). Send component requests to [hello@imgcli.com](mailto:hello@imgcli.com). --- # AI Chat Input URL: https://imgcli.com/docs/ai-input Prompt bars, search fields and chat composers that type themselves — the shot where a product gets asked a question. Reach for this category when the input *is* the shot: the search bar at the top of a landing page, the prompt box in an AI product, the composer someone is about to hit enter on. These components animate the query being written — and the camera that leans in to watch it happen. The hard part is not the typing, it is the type. A field that resizes as it fills, or a line of text that re-kerns as it grows, or a scale that drags the baseline across the pixel grid, is what makes a demo look cheap. These components lay the sentence out once and reveal it by clipping, and they pivot every scale on the baseline — so the letters land, and nothing else moves. --- # Agent Steps URL: https://imgcli.com/docs/ai-input/agent-steps An agent narrating its own work — a log that writes itself one line at a time, always on the centre line, and then clears until only the answer is left *(interactive preview: https://imgcli.com/docs/ai-input/agent-steps)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/agent-steps.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage The prompt lands in a pill. Under it the log writes itself: each step arrives **running** — present tense, ellipsis, a faint globe turning beside it — and later flips to **past tense** behind a check, carrying whatever number it found. The whole column steps up one row every time a line is added, so the line that is still running is always the one on the centre of the frame. When the work is done the column swells and clears, the surviving line slides to the middle of the frame, and the answer takes its place in a chip of its own. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { AgentSteps } from "@/components/imgcli/agent-steps"; const Working = () => ( ); export const RemotionRoot = () => ( ); ``` ### The last step never finishes That is the whole structure, not an oversight. Every step but the last one runs for its `hold` and then flips to `done`; the last one is **still running** when the column clears, and the result chip is what it turns into. Write it in the present tense (`"Rendering frames…"`) and put the number in `result` (`"Rendered 900 frames"`) — the payoff is the moment the sentence completes. There is no gap to tune between one step finishing and the next appearing: the next line **is** the acknowledgement that the last one finished, so it enters on the very next frame. That is what the reference does, frame for frame, and a pause between the two reads as a stall. ### The column is bottom-anchored, not top-anchored Rows stack downwards but the column hangs from its **last** row, which sits on `centerY`. So the list grows upward out of the frame rather than downward into empty space, and the live line never moves. The travel is one `ROW_PITCH` per step on a `cubic-bezier(.3,.7,.3,1)` over **0.308s**, and it is additive: if two steps land inside one travel, the column carries both moves at once instead of interpolating between row indices — which is the difference between a list that keeps up with a fast agent and one that stalls and then jumps. ### Proportions Every measurement is a fraction of the composition height, so the whole thing scales as one piece. They come off a 718×398 screen recording, and none of them are eyeballed. | | fraction of frame height | measured | | --- | --- | --- | | row pitch | **0.0738** | 29.39px, from six consecutive settle positions agreeing to 0.07px | | query pill height | 0.0553 | 22.0px, by the **mass** of its fill, not by its edges | | corner radius | 0.28 of pill height | not a pill; a stadium would be 0.500 and sits 3.5px wrong | | result pill height | 0.0691 | 27.5px — the answer gets a bigger chip than the question | | icon box | 0.0314 | 12.5px, derived from drawn ink, since a lucide glyph does not fill its box | | step type | 0.0254 | 10.11px | | prompt type | 0.878 × step type | the prompt is set *smaller* than the log it starts | The prompt being the smaller type is the one that looks like a mistake and is not. It falls out of a cross-correlation of the reference's column ink against this component's own render under a horizontal scale sweep: three separate step labels peak at 0.882, 0.868 and 0.887, and the prompt at 0.772. The same ratio shows up independently in the two strings' widths. A prompt has to survive one line in its pill; a step label never gets long enough to care. ### Why the measurements are mass, not edges A Gaussian blur moves an edge crossing but conserves an integral. The reference is a compressed recording of 10px type with a soft edge either side of every shape and a faint shadow under the pill, so every distance-between-two-edges came out wrong in a different direction each time. The pill height is therefore measured as the **mass** of its fill over a column band clear of both the type and the corner radius, and the icon strokes are fitted on **ink** — the one thing a blurred 12px glyph still reports honestly. Lucide's default stroke-width of 2 puts 34% more ink on the globe than the reference carries, which at this size is the difference between an icon and a dark blob. ### The running step's icon is nearly invisible `RUNNING_ICON` is **0.17**, and that is measured too: the reference's spinner carries 850 of ink where its finished globe carries 5110. A running step is a *place* in the list, not a thing to look at — the moment it finishes, its icon is what tells you. The globe turns while it runs, and only its meridian turns: spinning the whole glyph would spin the equator with it and read as a wheel rather than a sphere. The label, on the other hand, is **not** dimmed while it runs. The reference's running and done labels carry the same ink per glyph. ### The outro is two lengths, not one The column swells to **1.40×** and fades, and the surviving row slides to the middle. Both curves are `cubic-bezier(.3,0,.3,1)`, fitted separately at rms 0.017 and 0.015 — and they are deliberately not the same length. The swell finishes in **0.5s**, the slide in **0.6s**: the row is already at its final size while it is still travelling, so the last thing that moves is the thing you are meant to read. The slide needs no DOM measurement. The row is wrapped in an element as wide as the column and the pair carry `translateX(+50%)` and `translateX(-50%)` — percentages of two different widths — so the row's centre lands on the column's centre whatever the copy is. ### The surface is the design system's, not the reference's The proportions above are measured. The **colours are not** — they were the reference's brand. The page is `theme.background`, the pills are `theme.card`, the log is `theme.mutedForeground`, the checks and the glint are `theme.primary`, and the wash in the corner is `mixOklch(background, primary, 0.17)` — a tint of the page, never a second colour on it. Override any of them per-prop, or the lot through `theme`. ## Props done @globe; running > done\"", }, { name: "result", type: "string", default: '"Rendered 900 frames"', description: "The answer the last step turns into", }, { name: "queryHold", type: "number", default: "0.683", description: "Seconds the prompt holds alone before the first step", }, { name: "stepHold", type: "number", default: "0.45", description: "Default seconds a step runs, for steps that do not set their own hold", }, { name: "finalHold", type: "number", default: "0.283", description: "Seconds the last step runs before the column starts to clear. It never flips to its done label — the result replaces it", }, { name: "paperColor", type: "string", description: "Page behind the scene. Defaults to theme.background", }, { name: "glowColor", type: "string", description: "The wash in the corner. Defaults to mixOklch(paper, primary, 0.17)", }, { name: "glowX", type: "number", default: "0.858", description: "Wash centre, as a fraction of frame width", }, { name: "glowY", type: "number", default: "0.854", description: "Wash centre, as a fraction of frame height", }, { name: "glowRadius", type: "number", default: "0.465", description: "Wash radius, as a fraction of composition height. 0 turns it off", }, { name: "pillColor", type: "string", description: "Pill fill. Defaults to theme.card", }, { name: "inkColor", type: "string", description: "Prompt and result ink. Defaults to theme.foreground", }, { name: "stepColor", type: "string", description: "Step ink and the globe. Defaults to theme.mutedForeground", }, { name: "accentColor", type: "string", description: "The completed check and the glint that crosses the result. Defaults to theme.primary", }, { name: "centerY", type: "number", default: "0.5", description: "The line the running step sits on, as a fraction of frame height", }, { name: "fontFamily", type: "string", description: "Overrides Inter", }, { name: "theme", type: "Partial", description: "Design-system token overrides — the same shape every snap-cn-ui component takes", }, { name: "mode", type: '"light" | "dark"', default: '"light"', description: "Which default token set to resolve against", }, { name: "speed", type: "number", default: "1", description: "Global playback multiplier applied to the whole sequence", }, ]} /> --- # Answer Highlight URL: https://imgcli.com/docs/ai-input/answer-highlight A question, an answer that writes itself, and then a selection dragged across the one sentence that matters — and settled onto one word inside it *(interactive preview: https://imgcli.com/docs/ai-input/answer-highlight)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/answer-highlight.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage Four beats. The question lands in a pill. The answer writes itself a word at a time. A caret appears mid-sentence and a **selection band drags across one statement**, wrapping onto the next line the way a real one does. Then the band settles onto **one word** inside it, and that word takes the accent. The point of the shot is the third beat. The typing is the setup — it is what makes the highlight land on something the viewer has just read rather than on a paragraph that was always there. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { AnswerHighlight } from "@/components/imgcli/answer-highlight"; const Ask = () => ( ); export const RemotionRoot = () => ( ); ``` ### You name the sentence, not its coordinates `statement` and `word` are **strings, matched against the answer** — not indices, not offsets, not a markup syntax inside the copy. Edit the answer and the highlight follows it; edit it so far that the sentence is gone and nothing highlights, which is the signal that the two have drifted apart rather than a band drawn over the wrong words. Punctuation does not have to line up. `statement="keep the timeline declarative"` finds the answer's `declarative,` — writing the comma into the prop to make the match land is the kind of thing nobody remembers and everybody debugs twice. `word` only counts if it falls **inside** `statement`; the same word appearing earlier in the answer is not the one you meant. ### The band is a background, not a rectangle Every word of the answer is its own inline span, and the selection is a `background` on the spans the drag has passed. That is the whole trick, and it is what buys: - **Real wrapping.** A selection that runs over a line break breaks square at the line end and picks up at the start of the next one — because the browser is doing the wrapping, not a measured rectangle trying to imitate it. - **No DOM measurement.** No refs, no `delayRender`, no `getBoundingClientRect` that reports device pixels and has to be divided back out by the current scale. Put any copy you like in it. The word gap is `padding`, not `margin`, so the band is drawn behind the spaces too — otherwise a selection over four words comes out as four chips with holes where the spaces were. ### Why the drag has a caret Because a selection without one is a highlight animating in, and a highlight animating in reads as decoration. The leading edge is drawn as a **hard stop inside a gradient**, with a sliver of the accent just past it — one `background` doing the band, its edge, and the caret at once. The stop moves *through* the word it is crossing rather than jumping over it: at 30fps a per-word step advances three whole words a second and the whole thing turns into four chips appearing in sequence. `dragStep` is seconds per word, default **0.11** — four words in a little under half a second, which is what a hand actually does. ### The selection is a tint, never the accent `accentColor` at 16% over the page for the statement, 30% for the picked word, and the picked word's ink mixed toward the accent. Primary at full strength behind body type puts white-on-blue in the middle of a paragraph and the line stops being readable — which is exactly why a browser's own selection is pale until the window loses focus. The tint is composited as **alpha, not `mixOklch`**. Mixing the warm off-white page toward a blue in oklch takes the short way round the hue wheel and passes through green: the first cut of this scene highlighted the answer in pale mint. ### Proportions The question pill is the one measured object here — its height, radius, padding and entrance are the numbers [Agent Steps](/docs/ai-input/agent-steps) carries, fitted off the same recording. Everything below it is chosen for this scene, and the constants in the file say what each one is for. | | value | | --- | --- | | answer type | 0.0385 of frame height | | answer measure | 0.6 of frame width — three or four lines of a real answer | | line height | **1.64**, looser than a paragraph wants, so the band on one line does not sit against the type on the next | | band inset | 0.18em above and below the type | | caret | 0.06em wide | ## Props ", description: "Design-system token overrides — the same shape every snap-cn-ui component takes", }, { name: "mode", type: '"light" | "dark"', default: '"light"', description: "Which default token set to resolve against", }, { name: "speed", type: "number", default: "1", description: "Global playback multiplier applied to the whole sequence", }, ]} /> --- # Answer Stream URL: https://imgcli.com/docs/ai-input/answer-stream The beat after send — a macro shot on the button that cuts hard to the answer building itself, while the camera pulls back to keep up with it *(interactive preview: https://imgcli.com/docs/ai-input/answer-stream)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/answer-stream.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage It opens where [Prompt Zoom](/docs/ai-input/prompt-zoom) leaves you — close on the composer — and carries through the send, the cut, and the answer. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { AnswerStream } from "@/components/imgcli/answer-stream"; const ReplyScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## Scene to scene, the frame cuts Read frame by frame, the reference has exactly one grammar for changing shot, and it is a **hard cut** — one frame wide, no blur, no ramp. What makes the cuts invisible is not a transition. It is what happens either side of them. **Every cut lands on motion.** The camera is eight frames into an accelerating push toward the send button when the cut fires. It is moving fastest at the moment it is replaced. **Every cut is followed by a glide, not a stop.** The answer page arrives 27px high and settles down over 15 frames on an ease-out. Cut to a static frame and the edit becomes the loudest thing in the shot. The only *moves* are inside a shot, and there are two kinds: a slow drift that never quite stops, and one fast blurred push onto whatever is about to happen. ## The pull-back is fitted to the content As the answer grows — paragraph, then headline, then four cards, then the composer sliding up — the camera pulls back and rises to keep the block in frame. Tracking the column's left and right edges across the move recovers a scale of **1.364× → 1.0** about a fixed point at **(0.5, −0.548)** of the frame: dead centre horizontally, and 273px *above the top edge*. Both edges independently agree on that point to within 1px, which is what makes it a measurement rather than a guess. The focal point being above the frame is the whole reason the page appears to **rise** as it shrinks, instead of collapsing toward its own middle. Peak velocity sits at 48–52% of the move, which is a cubic in-out and rules out a spring — a spring peaks at a third. Measured back off the rendered frames against the reference's, the two curves start together, end together and part by at most 0.048 of scale near the midpoint. `pullbackFrom` is expressed against where the shot **settles**, not where the pull-back bottoms out. It overshoots its mark by 2.8% and creeps back onto it, and normalising against the bottom of that move instead puts every constant 2.8% out. The move carries **motion blur** derived from the camera's own speed — a frame that carries a typical element `d` px smears it by `d/4` — rather than dialled in by eye. ## Words arrive hot Containers land empty and fill: the question pill and each of the four cards appear as a bare surface first, and their text streams in after. Each word lands at `accentColor` and cools to `foreground` on a fixed clock, so the lit band at the head of the stream is `wordsPerSecond × coolSeconds` words wide — six, on the reference — no matter how fast you run it. Words that have not landed are hidden, not absent. Removing them lets the line reflow underneath and every word already on screen shifts as the next one arrives; on the reference they do not move at all. ## Props | prop | default | | | --- | --- | --- | | `question` | — | fills the pill, and stays in the composer | | `answer` | — | `\n` is a hard break; everything else wraps | | `headline` | — | lands under the reply, introduces the cards | | `cards` | four | `{ title, body, icon? }` — `icon` is an SVG path on a 24×24 box | | `commitAt` | `1.0` | when the push into the button starts accelerating | | `cutAt` | `1.284` | when the shot cuts. One frame, never a ramp | | `pullbackAt` | `1.933` | when the camera starts keeping up | | `pullbackDuration` | `1.1` | | | `pullbackFrom` | `1.364` | relative to where the shot settles | | `pullbackUndershoot` | `0.028` | how far past its mark it goes first | | `focusX` / `focusY` | `0.5` / `-0.548` | above the frame, on purpose | | `macroZoom` | `2.36` | the opening shot on the send button | | `wordsPerSecond` | `25` | | | `coolSeconds` | `0.23` | how long a word stays lit | | `blur` | `3` | ceiling on the camera's motion blur | Plus `accentColor`, `theme`, `mode` and `speed`, like every other component. ## Notes The preview above plays a **rendered mp4**, not a live ``. The pull-back re-shapes every line of type on the page at a new size for 33 consecutive frames; a frame that misses its budget in the browser is shown for the wrong length of time, and the eye reads that as the answer sticking as it arrives. The reference has no button press — its cursor is already down when the shot opens, and the accelerating push does all the work. Synthesised, the cut needs a visible cause, so there is a three-frame dip on `commitAt`. The colours and the copy are **not** measured. The reference is a specific product with its own coral, its own four icon tints and its own marketing lines; none of that belongs in a component that lands next to somebody else's `Input`. The paint is the shadcn token set, the composer takes its surface from the `Input` primitive's own style context, and every string is a prop. --- # Prompt Send URL: https://imgcli.com/docs/ai-input/prompt-send A composer that unrolls from a hairline, writes a brief while the camera rides the caret, then cuts back out as a pointer arrives and sends it *(interactive preview: https://imgcli.com/docs/ai-input/prompt-send)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/prompt-send.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { PromptSend } from "@/components/imgcli/prompt-send"; const BriefScene = () => ( ); export const RemotionRoot = () => ( ); ``` Give it a longer sentence, more chips, a shorter field — it all still lands: ```tsx ``` ## The typing is eased, and that is the whole shot The surprise in the reference recording is that it does **not** type at a constant rate. It accelerates in and decelerates out: about 17 characters a second over the first word, 33 through the middle, and a visible settle on the last three. Fitting an **ease-in-out sine** to the character count read off twenty-four frames lands within **0.30 characters rms** across all 69 — no constant rate comes close. That matters beyond the typing, because the camera rides the same curve. Pin a camera to a character *count* and it lurches once per keystroke; pin it to the continuous curve underneath and it glides, while the caret hops forward and back onto its mark — which is exactly the ±8px wobble the reference shows. `typeStart` and `typeDuration` are the two props. Everything about the rate falls out of them, and any length of copy finishes in the same window. ## Two cuts, not two zooms At **1.975s** the view cuts to **2.327×** in a single frame, landing with the caret 57% across the frame, and then tracks left with the sentence. At **4.008s** it cuts again, out to **1.44×**, centred on the send button — which is where the pointer is already heading. Both are **steps**. `cameraFor` returns one of exactly three states and there is a test asserting that no frame of the clip sits anywhere else. Ramping a cut, even across two frames, turns it into a zoom and loses the snap. Both marks are *fractions of the frame*, never pixel offsets, so a wider panel or a bigger type size reframes instead of drifting off the edge. ## The unroll The panel does not fade in and it does not scale up from nothing. A 2px hairline appears at its top edge and the box grows **downward** out of it — top edge pinned, bottom edge travelling its full height in 445ms — while the width goes 0.93 → 1. The writing surface and the chip strip are two heights on the same curve with different durations, which is why the strip surfaces from under the field late instead of being there from the first frame. | | measured | | --- | --- | | unroll | `445ms`, `cubic-bezier(0.3, 0, 0.35, 1)` | | placeholder + button | `417ms`, over `300ms`, linear | | chips | one every `100ms`, each rising `11.4px` | | typing | `0.915s` → `3.94s`, ease-in-out sine | | cut in | `1.975s`, `2.327×`, caret at `(0.573, 0.488)` | | cut out | `4.008s`, `1.44×`, button at `(0.531, 0.526)` | | pointer | enters `4.04s`, halves its distance every `44ms` | | click | `4.658s` | ## Nothing is a constant tuned to one sentence Every offset above is either a fixed inset — a padding, which should not change when the type does — or a **ratio of a font size**, which must. `layoutFor` turns four numbers into the whole geometry, and the defaults are the recording's own measurements, so the shipped shot is pixel-identical to the one that was measured: - **Longer copy scrolls the field under the caret**, the way a real single-line input does, instead of running past its edge. It scrolls on the continuous curve, so the line glides while the caret hops. - **More chips wrap**, and the panel grows by exactly the rows they needed. The stagger keeps running in label order across them. - **No chips at all** and the panel hugs the field. - **A short `fieldHeight`** puts the text and the send button on the same row, and the line yields the button's gutter — but only then, so the reference's tall field still gets its full width. ## The pointer belongs to the screen It is drawn **outside** the camera. A pointer is a property of the display, not of the thing on it, so it must not grow when the shot pushes in — and the reference's does not. Set `cursor={false}` to drop it, and the click and the send bloom go with it. ## The caret blinks off the last keystroke Not off a wall clock. A real caret stays solid while you type and starts blinking a fixed interval after you stop, and anchoring it that way is what gets the reference's two measured blinks — dark at 4.267s, back at 4.741s — without a single extra number. ## Colour and wording The proportions and the timing are measured. The **colours and the labels are not** — the reference is a specific product, and its blue and its copy are its brand. The paint is the shadcn token set, the field takes its surface from the `Input` primitive's own style context so the two cannot drift, and the backdrop wash is layered from `accentColor` (which defaults to `theme.primary`), so it is the installer's accent. ## Props ", description: "Token overrides. The field's surface comes from the Input primitive's own style context, so the two cannot drift", }, { name: "mode", type: '"light" | "dark"', default: "\"light\"", description: "Which token set to resolve against", }, { name: "speed", type: "number", default: "1", description: "Multiplies the frame clock. Every beat above scales with it", }, ]} /> The recording is 5.02s and ends 140ms into the send bloom. The opening of that bloom is measured; the sweep that follows it is the component's own, which is why the default duration is 165 frames rather than 151. --- # Prompt Zoom URL: https://imgcli.com/docs/ai-input/prompt-zoom A prompt field that types a sentence into itself and, partway through, cuts — hard, in a single frame — into the caret and keeps going *(interactive preview: https://imgcli.com/docs/ai-input/prompt-zoom)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/prompt-zoom.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage The prompt starts typing in the wide shot. Partway through the sentence the view **cuts** to the caret — and the typing does not pause for it, it carries straight on at the new size. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { PromptZoom } from "@/components/imgcli/prompt-zoom"; const AskScene = () => ( ); export const RemotionRoot = () => ( ); ``` ## The cut is the point It is a **cut, not a zoom**. On the reference the wide view is whole on one frame and fully pushed in on the very next — 803ms to 824ms, with nothing in between. Interpolating it, even across two or three frames, turns a cut into a move and loses the snap entirely. `isZoomed` is deliberately a boolean, and there is a test asserting no frame is ever partway. It fires **mid-sentence**, and that is what keeps it from reading as a scene change: the frame either side of the cut shows the same half-typed prompt, so there is one continuous action running through it and the cut simply gets you closer to it. Where it lands matters as much as how fast. The push is **2.547×**, anchored on a point **10% across and 41% down the input field** — the text insertion point. The shot doesn't just get bigger, it arrives on the thing that is about to happen. That focal point was fitted to the field's top and left edges, then checked against geometry it had not seen: it predicts the `+` glyph's centre to within **1.2px** and the field's bottom edge to **0.0px**. | | measured | | --- | --- | | typing starts | `0.35s` | | cut at | `1.0s` — mid-sentence | | zoom | `2.547×` | | focal point | `(0.270, 0.516)` of the frame | | typing | `18` chars/sec | Every one of those is a prop. ## Colour and wording The proportions and the timing are measured. The **colours and the labels are not** — the reference is a specific product, and its mark, model names and suggestion labels are its brand, not something to ship to strangers. The paint is the shadcn token set, the field takes its surface from the `Input` primitive's own style context so the two cannot drift, and `greeting`, `placeholder`, `model` and `effort` are all props. Suggestion pills are off by default — pass `chips={["Write", "Learn"]}` to show a static row under the field. `accentColor` paints the starburst and defaults to `theme.primary`. The reference clip is 1.078s and stops **mid-word** — it is still typing "Get…" when it ends. The default duration here is the choreography's own end plus a hold, not the recording's length. --- # Search Typing URL: https://imgcli.com/docs/ai-input/search-typing A search field wider than the shot — two thirds in frame, then it comes forward, types across its left half, pages to its right half, and goes back *(interactive preview: https://imgcli.com/docs/ai-input/search-typing)* ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/search-typing.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage Two thirds of the field are in frame to begin with, parked back. On the first keystroke it comes forward, and now only its **left half** fits. The sentence types across that half; when the caret runs out of frame the field slides, and its **right half** comes in. The sentence finishes there — and then the field goes back **further than it started**, far enough that the **whole** of it lands in frame, centred. That is the only moment in the clip you see the complete field and the finished sentence at once, so it is the shot the whole thing is built toward. Everything is driven by the current frame, so scrubbing and rendering are deterministic — including the keystroke jitter, which is seeded, not sampled from a clock. ```tsx // src/Root.tsx import { Composition } from "remotion"; import { SearchTyping } from "@/components/imgcli/search-typing"; const AskScene = () => ( ); export const RemotionRoot = () => ( ); ``` The component ships with a transparent background — place it over any backdrop, or over one of the [Backgrounds](/docs/backgrounds). ### The field is wider than the frame That is the whole idea. `fieldHeight` sets how tall the field reads on screen (0.27 of the frame, so it comes out long and slim), and `frontVisible` sets how much of it is in frame once it has come forward. The field is then **padded out to whatever length that framing needs**. That padding matters, and it is not a fudge. A field only as long as its sentence has a *fixed* aspect ratio — so demanding that half of it fill the frame would force its height, and it would come out as a chunky slab. Separating the two knobs is what lets it be both half-in-frame and slim. A real search field is longer than what you type into it anyway. `dolly` is the ratio between the two depths — **1.25**, which is what the reference measures. `frontVisible × dolly` is how much is in frame at rest: 0.56 × 1.25 ≈ **two thirds**. The **ending depth is not a third knob**: it falls out of the geometry. The field retreats until it is exactly as wide as the page, so it fits — and because `edgeInset` leaves an equal margin either side, anchoring the retreat on the field's right cap lands it centred with no special case. The push and the retreat are therefore two separate moves to two separate depths (`cameraPush`, `cameraRetreat`), not one move played backwards. Folding them together is what kept the field from ever pulling back far enough to be seen whole. The page across is not on a timer — it fires on the **character whose caret is about to run out of frame**, which falls near the middle of the sentence. It fires a little early on purpose: the pan eases in, so for its first frames the field has barely moved while the typing carries the caret on rightwards. Fire it *at* the edge and the caret spills over before the field catches up. Short sentences that fit in the first half never pan at all. ### Proportions Every measurement is a ratio of the field's height, so the whole thing scales as one piece. They are not invented: they come off the reference frames. | | ratio of field height | | --- | --- | | corner radius | **0.276** — not a pill; a pill would be 0.500 | | font size | 0.379 (cap height 0.265) | | left cap → first glyph | 1.024 | | left cap → icon | 0.357; icon 0.378 | | caret | 0.024 wide × 0.434 tall | The face is **Outfit Light (300)**, loaded through `@remotion/google-fonts` so the Player, the rendered mp4 and your own project all get the same one. It was chosen by measurement, not by eye: the reference's stem-to-cap ratio is 0.121, and Outfit 300 is the geometric face that lands on it. ### The surface is the design system's, not the reference's The proportions above are measured. The **colours are not** — they were the reference's brand. The field paints itself from `inputStyleContext()`, the very same style context the shadcn `` uses, so it is a card surface on a hairline border and it cannot drift away from the input sitting next to it in your app. That matters most for the shadow. The reference's field carries a heavy drop shadow and a grey-crown gradient. On its dark violet backdrop those read as depth and as glass; on a light page they read as a **grey smear** and an **inner shadow**. So the default carries **no shadow at all** — a flat `#FFFFFF` card and a `#E4E7EC` hairline border, which is how shadcn defines a control. `surface="glass"` keeps the measured reference field; use it only over something dark. ### Why the type doesn't judder as it scales A browser gives glyph origins **no vertical sub-pixel precision at all** — it rounds them to a whole device pixel. So a scale that *moves the baseline* makes the type climb the pixel grid in whole-pixel jumps: sit still, jump, sit still. So the scale **pivots on the baseline**, which is measured (a zero-sized inline-block sitting on it), never guessed from a line-height. On the rendered frames the baseline holds to a **single pixel row** across the full 1.25× sweep. Separately, hinting bends each glyph so its stems land on whole pixels, and under a sliding scale they re-snap every frame — the letterforms boil. `text-rendering: geometricPrecision` turns that off. `will-change: transform` is gated on `getRemotionEnvironment().isRendering`: right for the Player (one long-lived tab, a hard frame budget), wrong for a render (parallel tabs each inherit a stale raster). ### Why the text doesn't shift as it types The obvious way to type a string is `text.slice(0, n)`. That re-shapes the run every keystroke, and a run that re-shapes can re-kern — settled glyphs twitch as new ones land. Instead the sentence is laid out **once, in full**, and revealed by clipping to a measured character boundary. A run shaped once cannot move a glyph. Ligatures are off, so the clip can never bisect an "fi". The measurement runs once, behind `delayRender()`, after `document.fonts.ready` — and with the camera transform switched off, because `getBoundingClientRect()` reports device px and would otherwise hand back every advance multiplied by the current scale. ## Props ", description: "Design-system token overrides — the same shape every snap-cn-ui component takes", }, { name: "mode", type: '"light" | "dark"', default: '"light"', description: "Which default token set to resolve against", }, { name: "icon", type: '"search" | "sparkle" | "none"', default: '"search"', description: "Glyph in the left of the field", }, { name: "fontFamily", type: "string", description: "Overrides Outfit", }, { name: "fontWeight", type: "number", default: "300", description: "CSS font-weight. The reference measures as a Light", }, { name: "seed", type: "string", default: '"search-typing"', description: "Seeds humanize. Same seed, same performance, forever", }, { name: "speed", type: "number", default: "1", description: "Global playback multiplier applied to the whole sequence", }, { name: "className", type: "string", description: "Optional className passed to the field", }, ]} /> --- # Remotion cursor animations URL: https://imgcli.com/docs/collections/cursor-animations A synthetic mouse pointer that moves, hovers and clicks over any UI in a Remotion video — no screen recording, no real cursor to chase. A demo reads as a demo when something is being *used*. A cursor that walks to a button and presses it does that in about forty frames, and it is the one thing a static screenshot cannot fake. [Cursor Track](/docs/screens/cursor-track) is the general case: give it waypoints over any children and it moves, eases, and presses. The others are scenes with a click already choreographed into them — [Roster Grant](/docs/scenes/roster-grant) clicks a call to action and switches a team on, [Tap Through](/docs/screens/tap-through) is the phone version. Keep the path short. A pointer that wanders is a pointer the viewer is watching instead of the product. --- # Remotion device mockups URL: https://imgcli.com/docs/collections/device-mockups iPhone and MacBook frames for Remotion — put a screenshot or a screen recording inside a device that moves, without leaving React. A product shot needs the product in something. These put your screenshot, your `` or a live component inside a phone or a laptop and then move the camera, so the device is part of the shot rather than a PNG sitting on top of it. Reach for a **frame** ([Phone Frame](/docs/screens/phone-frame), [Laptop Frame](/docs/screens/laptop-frame)) when the device is the container and you are composing the rest of the scene around it. Reach for a **shot** ([Phone Pitch](/docs/screens/phone-pitch), [Laptop Open](/docs/screens/laptop-open)) when the device arriving *is* the beat — they carry their own camera move and their own timing. Every one takes its screen content as a child, so what goes inside can be an image, a recording cropped with [Screen Recording](/docs/screens/screen-recording), or another snapcn component. --- # Remotion image gallery animations URL: https://imgcli.com/docs/collections/image-galleries Photo walls, moodboards and 3D card rails for Remotion — the shot that shows a body of work rather than one screen. Some beats are not about one screen, they are about *how much* there is: a portfolio, a template library, a feed. These arrange your images in space and move the camera through them. [Orbit Gallery](/docs/scenes/orbit-gallery) rings them around a centre mark, [Moodboard Reveal](/docs/scenes/moodboard-reveal) flies a scatter in and lands on a hero, and [Card Rail](/docs/scenes/card-rail) flicks them sideways on a tilted plane. All of them take your own images — pass real ones, because a gallery running snapcn's demo pictures is a video about snapcn. --- # Remotion terminal animations URL: https://imgcli.com/docs/collections/terminal-animations A terminal that types its own commands and prints real output, plus the code and LED-screen shots that go with it — all in React, no screen recording. The install line is the product for a lot of developer tools, and filming a real terminal means a real cursor, a real font and a real mistake in take four. [Terminal Simulator](/docs/screens/terminal-simulator) types the command and prints the output you give it, deterministically, at whatever speed reads. Use it for the command itself. Use [String Hero](/docs/text/string-hero) when the shot is a line of code whose *content* is the headline, and [LCD Type](/docs/text/lcd-type) when you want the pixels of the screen to be visible — a type specimen rather than a shell. Because the output is data and not a recording, the same component renders a different transcript per video, which is the point of doing it in code. --- # Cursor & Clicks URL: https://imgcli.com/docs/cursor Cursors that click, pick and collaborate — the interaction beats of a product video. This is the category for the moment someone uses the product. A cursor presses the button, picks the option, or a team of cursors works on the same card. Every one is built on [Cursor Track](/docs/screens/cursor-track), so a pointer moves the same way in all of them. --- # Button Press URL: https://imgcli.com/docs/cursor/button-press A cursor walks onto a split action button: hover, press, a spinner while it works, then a drawn tick *(interactive preview: https://imgcli.com/docs/cursor/button-press)* A cursor walks in and lands on a split action button: the label, a hairline divider and a chevron, in your primary colour. The button darkens as the cursor reaches it, gives a little on the click and springs back. The label slides out for a spinner, then the spinner slides out for a tick that draws itself. It's the deploy, publish or send beat in a launch video. ## How it moves **Only the surface presses.** The fill gives by 3.5% and returns to exactly 1. The label never scales, so it never shimmers. **One width, three labels.** The button is sized once (`width`, at 720p) for the longest label, so it never reflows under the cursor sitting on it. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/button-press.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ButtonPress } from "@/components/imgcli/button-press"; const Scene = () => ; export const RemotionRoot = () => ( ); ``` ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: '"light" | "dark"', description: "Which end of the design system to resolve tokens against", }, ]} /> --- # Click Type URL: https://imgcli.com/docs/cursor/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 *(interactive preview: https://imgcli.com/docs/cursor/click-type)* A prompt composer in Prompt Send's style: a glass panel over a soft accent wash, a white writing surface, two icon buttons and a round send button. The placeholder writes itself while a cursor flies in from the edge and clicks the field. Then the shot cuts hard into the field, the placeholder is gone, and your prompt types at the caret. Use it for the "just describe it" beat of an AI product video. ## How it moves **It cuts with Prompt Send.** Same glass panel, same writing surface, same wash, all from your theme. Change the wash with `accentColor`. The send button arms to ink once the first letter lands. **Two shots, one card.** The close-up is the same card under a constant camera, pinned on the first letter. Nothing scales while it moves, so the type stays sharp. **The cursor stays in the wide shot.** It clicks, and the cut leaves it behind, the way a real screen recording would. **Typing is a keystroke a frame.** A space costs an extra beat. The caret holds solid while it types and blinks while it waits. The length depends on the prompt: `clickTypeFrames(prompt)` returns it. ## Installation ```bash npx shadcn@latest add https://imgcli.com/r/click-type.json ``` ## Component code The exact file `shadcn add` copies into your project. ## Usage ```tsx // src/Root.tsx import { Composition } from "remotion"; import { ClickType, clickTypeFrames } from "@/components/imgcli/click-type"; const prompt = "Build me a booking app"; const Scene = () => ; export const RemotionRoot = () => ( ); ``` ## Props ", description: "Design-system token overrides. Anything you leave out falls back to the shadcn defaults", }, { name: "mode", type: '"light" | "dark"', description: "Which end of the design system to resolve tokens against", }, ]} /> --- # How to make a GitHub README demo GIF with Remotion URL: https://imgcli.com/github-readme-demo-gif Render a crisp, looping demo GIF for your GitHub README with Remotion — the exact CLI flags, how to stay under GitHub's 10MB limit, and when an MP4 is the better choice. To make a README demo GIF with [Remotion](https://www.remotion.dev/docs), render your composition with `--codec=gif`, halve the frame rate with `--every-nth-frame=2`, and shrink it with `--scale`. Keep it short and loopable, and under GitHub's 10MB limit for images and GIFs. ```bash npx remotion render Demo out/demo.gif --codec=gif --every-nth-frame=2 --scale=0.5 ``` *(interactive preview: https://imgcli.com/github-readme-demo-gif)* ## 1. Build a short, loopable composition A README GIF is watched in a loop, at small size, with no sound. So: - **5–10 seconds.** One command, one result. - **Big type.** It will be shown at the README's width, often half your composition's. - **End where it starts.** A loop that snaps from the last frame to the first looks broken; fade both ends to the same background. For a CLI tool, a [terminal that types its own command](/docs/screens/terminal-simulator) is the whole video: ```tsx // src/Root.tsx import { Composition } from "remotion"; import { TerminalSimulator } from "@/components/imgcli/terminal-simulator"; const Demo = () => ( ); export const RemotionRoot = () => ( ); ``` For a UI, crop a recording and push in on the part that matters with [Screen Recording](/docs/screens/screen-recording), and add a pointer back with [Cursor Track](/docs/screens/cursor-track). ## 2. Render it as a GIF ```bash npx remotion render Demo out/demo.gif --codec=gif --every-nth-frame=2 --scale=0.5 ``` What each flag does: | Flag | Effect | | --- | --- | | `--codec=gif` | Output a GIF instead of an MP4 | | `--every-nth-frame=2` | Render every second frame: 30fps becomes 15fps. `3` gives 10fps. Only valid for GIFs | | `--scale=0.5` | Halve the output dimensions: 1280×720 becomes 640×360 | | `--number-of-gif-loops=0` | Play once. Omit it to loop forever — what a README wants | | `--frames=0-149` | Render only a range, to trim without touching the composition | 15fps is plenty for a README. Frame rate and dimensions are where the bytes are: half the frames at a quarter of the pixels is a far smaller file. ## 3. Get it under 10MB GitHub accepts images and GIFs up to **10MB** when you drag them into an issue, pull request or comment. For a README, aim far lower — a few megabytes — so the page does not stall. If the file is too big, in order: 1. **Shorten it.** Every second costs the same; cut the ones that are not the payoff. 2. **Drop the frame rate.** `--every-nth-frame=3`. 3. **Shrink it.** `--scale=0.4`. 4. **Simplify the frame.** GIF has 256 colours per frame. Gradients, blur and photos cost the most; flat backgrounds and text compress best. ## 4. Put it in the README Drag the GIF into the README editor on GitHub, or commit it and reference it: ```md ![acme deploy in one command](./docs/demo.gif) ``` Write the alt text as the sentence the GIF proves. It is what screen readers, search engines and anyone on a slow connection see. ## When to use an MP4 instead A GIF is huge for what it shows. An MP4 of the same clip is a fraction of the size and keeps full colour. GitHub plays `.mp4`, `.mov` and `.webm` uploads inline with a player — but they do not autoplay like a GIF, and a GIF also works where a README is mirrored, such as npm. Common split: a GIF in the README, the full-quality MP4 in the release notes. *(interactive preview: https://imgcli.com/github-readme-demo-gif)* Install the components: ```bash npx shadcn@latest add https://imgcli.com/r/terminal-simulator.json https://imgcli.com/r/screen-recording.json ``` Next: [how to make a changelog video in React](/changelog-video-react). --- # Interactive product demo vs video demo: which to make URL: https://imgcli.com/interactive-demo-vs-video-demo When a clickable interactive demo beats a product video and when it does not — landing pages, sales, onboarding and launch posts on X and Product Hunt — with the tools for each. **Short answer:** make a **video** when the viewer is passive — scrolling a feed, landing on your homepage, watching a launch. Make an **interactive demo** when the viewer is actively evaluating — a buyer who wants to try before a call, or a new user learning a workflow. Most products end up with both: a 30–60 second video at the top, and a clickable demo for the people who want more. Tool details below were checked on each vendor's site in October 2026. The advice sections are our own judgement, not survey data. ## At a glance | | Video demo | Interactive demo | | --- | --- | --- | | Viewer | Watches | Clicks through | | Pace | Yours | Theirs | | Works in a feed (X, LinkedIn) | Yes, as a video post | Needs a link out | | Product Hunt gallery | Yes, as a YouTube link | Yes, as a demo link | | Landing page | Top of the page | Lower down, or behind "try it" | | Sales | Before the first call | During and after evaluation | | Onboarding | Overview | Step-by-step guides | | Tools | Screen Studio, Tella, Loom, Cap, Remotion | Arcade, Supademo, Storylane | ## What each one is A **video demo** is a file — usually an MP4 — that plays the same way for everyone. You choose what is shown, in what order and how fast. It can be a cleaned-up screen recording, a camera walkthrough, or a motion-graphics cut built from scratch. An **interactive demo** is a captured copy of your product that the viewer steps through. Arcade describes recording with a Chrome extension, desktop app or Figma plugin and then adding hotspots, callouts, voiceover and branching. Storylane also offers "sandbox demos" that "let buyers and sellers navigate a pixel-perfect clone of the product." The viewer is driving, so the demo has to survive them clicking in an order you did not plan. ## When a video wins **Launch posts on X and LinkedIn.** A feed post carries a video that plays in place. A clickable demo has to be a link to somewhere else, and a link is a second decision the scroller has to make. For the launch moment, the video is the asset; see [how to make a Product Hunt launch video](/product-hunt-launch-video) for the structure and the aspect ratios. **Product Hunt.** Product Hunt's [posting guide](https://help.producthunt.com/en/articles/479557-how-to-post-a-product) says gallery videos must be YouTube links, and that it needs at least two gallery images. It also lists interactive demo tools — Arcade, Storylane, ScreenSpace, Hexus, Supademo and Layerpath — whose demos can be added to the gallery as a link. So you can ship both; the video is what plays first. **The top of a landing page.** A first-time visitor has not decided to invest any effort yet. A short video asks nothing of them — it can autoplay muted, it shows the outcome, and it is over in under a minute. An interactive demo asks them to start clicking before they know whether they care. **A README or docs page.** A looping GIF shows the product right where the reader already is, with no click. See [the GitHub README demo GIF](/github-readme-demo-gif). **When the product is hard to show by clicking.** Anything that happens over time — an AI answer streaming in, a build running in a terminal, a background job finishing — is easier to stage as a video than as a sequence of click targets. ## When an interactive demo wins **A buyer evaluating before a sales call.** Storylane's pitch is exactly this: "Interactive demos open your product before a form or a call." Supademo lists landing-page embeds so visitors "try the product before booking" a call, and personalised demos in outbound sequences. A buyer comparing three tools wants to poke at the real flow, not watch your edit of it. **Onboarding a specific workflow.** Supademo describes helping new customers "complete key workflows with interactive demos they can follow at their own pace." A step-by-step guide beats a video here because the user can stop on the step they are stuck on. **When sales wants to know who looked.** Interactive demo platforms build analytics in — Supademo lists tracking links and analytics on its paid plan, and Storylane's Starter plan includes HubSpot and Zapier integrations. If the demo is a sales-pipeline tool, that tracking is the point. ## The tradeoffs | | Video | Interactive demo | | --- | --- | --- | | Control of the story | Full | Shared with the viewer | | Effort for the viewer | None | They have to click | | Keeping it current | Re-record or re-render | Re-capture the changed steps | | Motion and titles | Yes | Mostly callouts and hotspots | | Where it plays | Anywhere a video plays | Where the embed or link works | Two practical points. First, a video goes stale when the UI changes; an interactive demo does too, step by step. If you ship UI every week, pick the format whose update path you will actually do. Second, many interactive tools also export video — Arcade says any demo can be exported "as an MP4 video, a GIF, or a step-by-step guide", and Supademo's FAQ says it "exports in GIF, MP4, and PDF formats" — so capturing once can cover both, at the cost of a video that looks like a click-through. ## Tools for each **Video:** - [Screen Studio](https://screen.studio) — macOS-only recorder with automatic zooms; $29 a month or $9 a month billed yearly. - [Tella](https://www.tella.com) — screen and camera on separate tracks, with an editor; Mac, Windows and browser. - [Loom](https://www.loom.com) — quick async video messages; free Starter plan. - [Cap](https://cap.so) — open-source recorder with a free personal-use plan. - [Remotion](https://www.remotion.dev) — videos written as React components, rendered to a file. Free for individuals and companies up to three employees. If you build the video in code, prebuilt scenes save you the motion design. Imgcli is our library of them, so read this with that in mind: shadcn-installed Remotion components for software videos such as a [prompt being typed and sent](/docs/ai-input/prompt-send), an [answer streaming in](/docs/ai-input/answer-stream), a [terminal](/docs/screens/terminal-simulator) and a [framed screen recording](/docs/screens/screen-recording). These are free under MIT. The [browser video editor](/docs/video-editor) can assemble and export an MP4 without a Remotion project. The step-by-step build is in [how to make a product demo video in React](/product-demo-video-react). **Interactive:** - [Arcade](https://www.arcade.software) — Chrome extension, desktop app or Figma plugin; exports MP4 and GIF; free plan, Pro from $49 a month billed annually. - [Supademo](https://supademo.com) — Chrome extension and desktop apps; free plan with five interactive demos; Scale from $38 a month billed annually. - [Storylane](https://www.storylane.io) — interactive and sandbox demos; free plan with one live demo; Starter $50 a month. The full comparison, with pricing for each, is in [the best product demo video tools](/best-product-demo-video-tools). ## A sensible default 1. Make one 30–60 second video of the core job. Put it at the top of the landing page, in the launch post and in the Product Hunt gallery. 2. If buyers evaluate before talking to you, or onboarding has a workflow people get stuck in, add an interactive demo for that one flow. 3. Update whichever one goes stale first; that is the one people are using. No motion designer? See [a SaaS demo video without After Effects](/saas-demo-video-without-after-effects). ## Sources - https://help.producthunt.com/en/articles/479557-how-to-post-a-product - https://www.arcade.software/product/interactive-demo - https://www.arcade.software/pricing - https://supademo.com/ - https://supademo.com/pricing - https://www.storylane.io/ - https://www.storylane.io/pricing - https://screen.studio/ - https://www.tella.com/ - https://www.loom.com/pricing - https://cap.so/pricing - https://www.remotion.dev/ - https://github.com/remotion-dev/remotion/blob/main/LICENSE.md --- # What we learned shipping llms.txt for a component registry URL: https://imgcli.com/llms-txt-component-registry How to install Imgcli components from the current registry, plus an upstream snapcn case study on llms.txt, Markdown docs, and missing component names. ## Install an Imgcli component today Choose a component from the [Imgcli component index](/llms-components.txt) and prepare your Remotion project using the [installation guide](/docs/getting-started/installation). For example, install Text Reveal with: ```bash npx shadcn@latest add https://imgcli.com/r/text-reveal.json ``` The short command `npx shadcn@latest add @imgcli/text-reveal` works after you add the `@imgcli` registry mapping to `components.json`. The [current llms.txt](/llms.txt) lists the exact install commands. ## Case study from upstream snapcn The examples and measurements below describe the [upstream snapcn registry](https://github.com/shadcn-labs/snapcn) at the time of the case study. **Short answer:** an `llms.txt` that lists pages is not enough for a component registry. Agents need the **complete list of installable names**, documentation as **markdown at `.md`**, and a registry **404 that answers in JSON** with the real names. Before snapcn made those changes, agents guessed nonexistent component names 208 times in thirty days. Upstream snapcn documented `npx shadcn@latest add @snapcn/` for its [Remotion](https://www.remotion.dev/docs) components. ## Agents guess names, and guess wrong Snapcn's first `llms.txt` said the install pattern was `@snapcn/` and then never named a single component. The gallery section listed *display* names behind links, so the slug had to be guessed. Agents guessed. In thirty days the registry served **208 requests for names that do not exist**, across 41 distinct spellings — `blur-out-up` (21), `dynamic-grid` (10), `soft-blur-in` (9), `number-wheel`, `line-by-line-slide`, `shader-warp`. None appeared in the upstream repository, roadmap or links. They were invented, and each one was someone who had already typed `npx shadcn add` — one failed install for every eight that worked. ## Fix 1: say the list is complete The fix is a section in `llms.txt` generated from the same list the "install everything" button uses, so a new component appears there by existing: ```ts const INSTALLABLE = `## Every installable component These ${INSTALL_ALL_NAMES.length} names are the complete set. \`@snapcn/\` resolves for these and for nothing else — any other name returns 404, so do not infer, pluralise or invent one. If what you want is not on this list, snapcn does not have it yet; say so rather than guessing a plausible name. ${INSTALL_ALL_NAMES.map((name) => `- \`npx shadcn@latest add @snapcn/${name}\``).join("\n")} `; ``` Two details matter. The list is **runnable commands**, not names, so there is nothing left to assemble. And it **tells the agent what to do on a miss**: say the component does not exist. Without that instruction, a model's default is to produce something plausible. The upstream header also recorded the August 2026 rename from `@snap-cn` to `@snapcn`. ## Fix 2: answer `.md` Appending `.md` to a docs URL is the convention coding agents try first. Snapcn initially answered with a 200 and forty-seven kilobytes of React shell. An agent that spends its context on `