---
name: "@snapcn"
slug: "snapcn"
description: "Remotion video components for React. Text reveals, karaoke captions, device mockups, logo stings and full scenes, installed with the CLI and owned as source."
category: "Animated components"
tags: ["ai", "animation", "blocks", "cards", "e-commerce", "forms", "icons", "media", "pro-available", "retro", "text-effects"]
framework: "react"
license: "MIT"
author: "snapcndev"
website: "https://snapcn.dev"
github: "https://github.com/snapcndev/snapcn"
registry: "https://snapcn.dev/r/registry.json"
pro: true
pro_url: "https://snapcn.dev/docs/pricing"
github_stars: 199
component_count: 93
generated_at: "2026-09-21T01:50:16.753Z"
---

# @snapcn

Remotion video components for React. Text reveals, karaoke captions, device mockups, logo stings and full scenes, installed with the CLI and owned as source.

## Links

- Website: https://snapcn.dev
- GitHub: https://github.com/snapcndev/snapcn
- Registry JSON: https://snapcn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/snapcn
- This file: https://sh4dcn.vercel.app/md/snapcn.md
- Pro / pricing: https://snapcn.dev/docs/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://snapcn.dev/r/registry.json
pnpm dlx shadcn@latest add https://snapcn.dev/r/registry.json
bunx shadcn@latest add https://snapcn.dev/r/registry.json
# clone the source repo
git clone https://github.com/snapcndev/snapcn.git
# fetch the raw registry index
curl -s https://snapcn.dev/r/registry.json
```

## Components (93)

| name | type | description | install |
| --- | --- | --- | --- |
| answer-highlight | registry:component | AI answer highlight animation, ChatGPT-style chat response with a text selection. A question in a pill, an answer that writes itself a word at a time, and then… | `npx shadcn@latest add https://snapcn.dev/r/answer-highlight.json` |
| agent-steps | registry:component | AI agent steps animation: a streaming task log with spinner and checkmarks for agent demos. An agent narrating its own work: the prompt lands in a pill, and un… | `npx shadcn@latest add https://snapcn.dev/r/agent-steps.json` |
| announce-title | registry:component | Launch title animation, product announcement intro with kinetic typography. A four-shot launch title: the eyebrow rushes past the camera on a receding type pla… | `npx shadcn@latest add https://snapcn.dev/r/announce-title.json` |
| answer-stream | registry:component | Streaming AI response animation, from the send button to the answer typing in. The beat after send: a macro shot on the button that cuts — hard, on its fastest… | `npx shadcn@latest add https://snapcn.dev/r/answer-stream.json` |
| text-reveal | registry:component | Text reveal animation: word-by-word and letter-by-letter kinetic typography with blur-in, fade, slide, scale and tracking-in presets. One staggered enter/exit … | `npx shadcn@latest add https://snapcn.dev/r/text-reveal.json` |
| text-highlight | registry:component | Text highlight animation: marker highlighter, underline, strikethrough and shimmer on a word. Animated emphasis on one span inside a static sentence — marker s… | `npx shadcn@latest add https://snapcn.dev/r/text-highlight.json` |
| text-rewrite | registry:component | Text rewrite animation, a typewriter line that deletes and retypes its ending. A line that writes itself a word at a time, comes forward and gets selected — th… | `npx shadcn@latest add https://snapcn.dev/r/text-rewrite.json` |
| text-select | registry:component | Typewriter with text selection: a line types word by word, then gets highlighted. A line that writes itself a word at a time — each one arriving in the accent … | `npx shadcn@latest add https://snapcn.dev/r/text-select.json` |
| text-swap | registry:component | Text swap animation, rotating headline that replaces one line with another. Replaces one line of text with another using exit-then-enter scheduling, with five … | `npx shadcn@latest add https://snapcn.dev/r/text-swap.json` |
| text-swell | registry:component | Kinetic typography title with a bouncing letter wave. A title reveal where the lead word floats toward the viewer and hangs there while the sentence assembles … | `npx shadcn@latest add https://snapcn.dev/r/text-swell.json` |
| text-build | registry:component | Word-by-word text build animation that keeps the line centred. Words enter one at a time while already-placed words physically reflow to stay centered — a grow… | `npx shadcn@latest add https://snapcn.dev/r/text-build.json` |
| word-flip | registry:component | Word flip text rotator: a typewriter headline with a 3D rotating word. A headline types itself out, then one word cycles on a 3D flip — it sinks into an antici… | `npx shadcn@latest add https://snapcn.dev/r/word-flip.json` |
| word-captions | registry:component | TikTok-style captions: animated subtitles with word pop, Hormozi and MrBeast styles for Reels and Shorts. Burned-in captions in the styles big channels actuall… | `npx shadcn@latest add https://snapcn.dev/r/word-captions.json` |
| karaoke-captions | registry:component | Karaoke captions: word-by-word highlighted subtitles synced to speech. A caption line that fills word by word as it is spoken — heavy outlined type that reads … | `npx shadcn@latest add https://snapcn.dev/r/karaoke-captions.json` |
| logo-drift | registry:component | Logo wall animation: a logo cloud of integrations drifting behind a headline. A field of tiles drifting past a headline while the camera pulls steadily back, s… | `npx shadcn@latest add https://snapcn.dev/r/logo-drift.json` |
| logo-assemble | registry:component | Logo reveal animation: image cards orbit and collapse into your logo and brand name. A single ring of image cards revolves around a centred title, then spins i… | `npx shadcn@latest add https://snapcn.dev/r/logo-assemble.json` |
| logo-flicker | registry:component | Logo reveal intro: a fast image flicker that settles on your logo. Images flip across a central card very fast, the flicker decelerates and fades, and the logo… | `npx shadcn@latest add https://snapcn.dev/r/logo-flicker.json` |
| block-wordmark | registry:component | Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out arou… | `npx shadcn@latest add https://snapcn.dev/r/block-wordmark.json` |
| phone-frame | registry:component | iPhone mockup animation: phone device frame for app screenshots and screen recordings. iPhone-style device frame with a dynamic island and a screen slot — flat… | `npx shadcn@latest add https://snapcn.dev/r/phone-frame.json` |
| laptop-frame | registry:component | MacBook laptop mockup animation that opens and zooms into your screenshot or video. MacBook-style laptop that opens, runs a dynamic-island notch notification, … | `npx shadcn@latest add https://snapcn.dev/r/laptop-frame.json` |
| terminal-simulator | registry:component | Terminal animation: CLI demo that types commands and prints output. Terminal window with chunked command playback, freeze-frame pauses, step scrolling, and an … | `npx shadcn@latest add https://snapcn.dev/r/terminal-simulator.json` |
| screen-recording | registry:component | Screen recording zoom: crop and auto-zoom a product demo capture. The treatment that turns a raw screen capture into a shot: crop the browser and OS chrome off… | `npx shadcn@latest add https://snapcn.dev/r/screen-recording.json` |
| count-grid | registry:component | Number count-up grid: cards multiply and a counter jumps, the it-scales stat shot. A grid of cards rushes in under a horizontal smear, settles on five and a la… | `npx shadcn@latest add https://snapcn.dev/r/count-grid.json` |
| roster-grant | registry:component | Access granted animation: a cursor clicks a CTA and team avatars switch on. Three rows of roster cards stream past a call to action, a pointer walks in and cli… | `npx shadcn@latest add https://snapcn.dev/r/roster-grant.json` |
| wordmark-cut | registry:component | Wordmark reveal end card: a huge brand name with a hard cut to a close-up. A wordmark twice the width of the frame, cooling from a lit gradient to ink while it… | `npx shadcn@latest add https://snapcn.dev/r/wordmark-cut.json` |
| cursor-track | registry:component | Cursor click animation: a mouse pointer that moves and clicks over any UI. A synthetic cursor that walks a path of normalized waypoints over any children and p… | `npx shadcn@latest add https://snapcn.dev/r/cursor-track.json` |
| pulsing-border | registry:component | AI glow border: a pulsing thinking frame around the screen. Glowing 'AI is working' frame — a soft pulsing border overlay that breathes around the scene edges … | `npx shadcn@latest add https://snapcn.dev/r/pulsing-border.json` |
| follower-rush | registry:component | Follower count animation: X/Twitter follower notification with a count-up and avatar wave, for social proof. An X-style follower notification that piles up — a… | `npx shadcn@latest add https://snapcn.dev/r/follower-rush.json` |
| prompt-send | registry:component | AI prompt typing animation: a chat input types a prompt and a cursor clicks send. A composer that unrolls from a hairline, writes a brief into itself while the… | `npx shadcn@latest add https://snapcn.dev/r/prompt-send.json` |
| prompt-zoom | registry:component | AI prompt zoom: an assistant home screen that cuts into the chat input as the prompt types. An assistant landing screen that offers its suggestions, then cuts … | `npx shadcn@latest add https://snapcn.dev/r/prompt-zoom.json` |
| punch-lines | registry:component | Kinetic typography title cards: bold statements that cut hard between beats. A run of full-frame title cards that cut hard between beats. A statement card is f… | `npx shadcn@latest add https://snapcn.dev/r/punch-lines.json` |
| orbit-gallery | registry:component | Image gallery intro: photos spiral into the centre around a title. An image-universe hero: a continuous stream of photos flows along an Archimedean spiral (a v… | `npx shadcn@latest add https://snapcn.dev/r/orbit-gallery.json` |
| hero-launch | registry:component | Product launch hero scene for a SaaS launch video intro. Cinematic product-launch hero — two cards slide into formation as the headline reveals above. | `npx shadcn@latest add https://snapcn.dev/r/hero-launch.json` |
| moodboard-reveal | registry:component | Photo gallery reveal: a moodboard fly-through that lands on a hero image. A kinetic headline with a swapping inline image, then a scattered gallery of photos f… | `npx shadcn@latest add https://snapcn.dev/r/moodboard-reveal.json` |
| search-typing | registry:component | Search bar typing animation for AI search and command palette demos. A search field wider than the shot: two thirds in frame, then it comes forward, types acro… | `npx shadcn@latest add https://snapcn.dev/r/search-typing.json` |
| status-cycle | registry:component | Status badge animation: a pill whose label cycles through states. A centred line whose status pill cycles: the label rolls up behind a hard clip while the pill… | `npx shadcn@latest add https://snapcn.dev/r/status-cycle.json` |
| type-morph | registry:component | Typewriter effect: a headline types with a blinking caret, then morphs letter by letter. A headline that types itself under a glowing caret, sheds its lead, mo… | `npx shadcn@latest add https://snapcn.dev/r/type-morph.json` |
| word-gather | registry:component | Word-by-word sentence animation: words fly in out of order and settle into the line. A sentence that arrives one word at a time, out of order, and gathers. The… | `npx shadcn@latest add https://snapcn.dev/r/word-gather.json` |
| word-wheel | registry:component | Rotating words text: a slot machine word wheel that spins and stops on one word. A column of words that spins like a reel and stops on one of them. A fixed lea… | `npx shadcn@latest add https://snapcn.dev/r/word-wheel.json` |
| channel-thread | registry:component | Slack-style chat animation: team messages arrive with typing dots. A work chat filling itself in, the way the channel actually reads: an avatar, a name in bold… | `npx shadcn@latest add https://snapcn.dev/r/channel-thread.json` |
| logo-collapse | registry:component | Logo reveal intro: a stack of photos flicks through and collapses into your logo. A stack of shots flicked through, collapsing into your mark, and the wordmark… | `npx shadcn@latest add https://snapcn.dev/r/logo-collapse.json` |
| card-rail | registry:component | Card carousel animation: cards flicked sideways on a tilted 3D plane. A rail of cards flicked sideways across a tilted plane. The cards do not crawl past on a … | `npx shadcn@latest add https://snapcn.dev/r/card-rail.json` |
| snap-cn-ui | registry:lib | Shared timeline-fold hook, theme context, and color math for snapcn UI primitives. | `npx shadcn@latest add https://snapcn.dev/r/snap-cn-ui.json` |
| caret | registry:component | A blinking text caret — a controlled vertical bar, or a pure motion atom that blinks deterministically from useCurrentFrame. | `npx shadcn@latest add https://snapcn.dev/r/caret.json` |
| input | registry:component | A text input whose idle/hover/active/typing/invalid state is a pure function of the timeline; the focus ring, border, caret, and value reveal are keyframed pre… | `npx shadcn@latest add https://snapcn.dev/r/input.json` |
| picker-commit | registry:component | iOS picker wheel animation that spins, settles and commits to a button. A picker wheel that flings, settles on one row, and commits it into a button. A cylinde… | `npx shadcn@latest add https://snapcn.dev/r/picker-commit.json` |
| manifesto | registry:component | Kinetic typography statements: three text reveals with hard cuts, for manifesto and promo videos. Three statements, three different arrivals, hard cuts between… | `npx shadcn@latest add https://snapcn.dev/r/manifesto.json` |
| read-through | registry:component | Word-by-word reading text animation: a huge sentence panned one word at a time. A sentence set enormous and read a word at a time. Three lines pan left togethe… | `npx shadcn@latest add https://snapcn.dev/r/read-through.json` |
| word-settle | registry:component | Word-by-word text animation: words arrive in the accent colour and cool as they land. A sentence that arrives a word at a time, hot, and cools as it lands. Two… | `npx shadcn@latest add https://snapcn.dev/r/word-settle.json` |
| chat-thread | registry:component | iMessage-style chat animation: message bubbles sending one by one. A chat thread sending itself — the moment a demo video actually gets shared. Bubbles arrive … | `npx shadcn@latest add https://snapcn.dev/r/chat-thread.json` |
| lcd-type | registry:component | Pixel screen typography: LCD-style typewriter text on a display. A type specimen on a screen you can see the pixels of. A title accelerates up and out of frame… | `npx shadcn@latest add https://snapcn.dev/r/lcd-type.json` |
| say-it | registry:component | Text to button animation: a word scrambles into a UI control that gets pressed. A word that comes apart, leaves a control behind, and gets pressed. One line of… | `npx shadcn@latest add https://snapcn.dev/r/say-it.json` |
| scatter-bloom | registry:component | Scatter plot chart animation: data points blooming onto a 3D plane, for data visualization. A scatter plot that blooms onto a tilted plane while the camera dri… | `npx shadcn@latest add https://snapcn.dev/r/scatter-bloom.json` |
| sentence-set | registry:component | Word-by-word text reveal: a sentence setting itself as each word darkens into place. A sentence setting itself, a word at a time. Each word arrives grey and a … | `npx shadcn@latest add https://snapcn.dev/r/sentence-set.json` |
| showcase-drift | registry:component | Showcase wall animation: a scatter of work sliding in behind a headline. A wall of work sliding to a stop behind a headline. The whole scatter arrives from the… | `npx shadcn@latest add https://snapcn.dev/r/showcase-drift.json` |
| agent-run | registry:component | AI agent run animation: a prompt sent and answered with visible tool steps. A prompt typed, sent, and answered by an agent that shows its work. A composer open… | `npx shadcn@latest add https://snapcn.dev/r/agent-run.json` |
| agent-chat | registry:component | AI agent chat animation: prompt typing, send and a streaming reply. An agent conversation, from the empty field to the answer. Five beats on one clock: the pro… | `npx shadcn@latest add https://snapcn.dev/r/agent-chat.json` |
| version-drop | registry:component | Version launch title: a product name typing and a big version number reveal. A name typing itself across two shots, and the number it was all for. Three shots … | `npx shadcn@latest add https://snapcn.dev/r/version-drop.json` |
| agent-open | registry:component | AI prompt intro animation: kinetic text that becomes a typed prompt. A line assembles a word at a time, resolves to your product's name, and becomes a prompt s… | `npx shadcn@latest add https://snapcn.dev/r/agent-open.json` |
| phrase-swarm | registry:component | Text morph animation: one phrase breaks into letters that swarm into another. One phrase comes apart and another gathers out of the pieces. The opening line ho… | `npx shadcn@latest add https://snapcn.dev/r/phrase-swarm.json` |
| word-rush | registry:component | 3D words fly-through: a camera flying through a field of words. A field of words the camera flies through, one line of it that runs at the lens, and the line t… | `npx shadcn@latest add https://snapcn.dev/r/word-rush.json` |
| app-reveal | registry:component | App reveal animation: a wordmark folds into an app UI with a 3D camera move. A wordmark that folds into an app, and a camera that flies around it. The mark hol… | `npx shadcn@latest add https://snapcn.dev/r/app-reveal.json` |
| build-out | registry:component | App reveal from a button: zoom out of a send button into the app. A send button that fills the frame, and the app that comes out of it. The shot opens inside t… | `npx shadcn@latest add https://snapcn.dev/r/build-out.json` |
| stretch-word | registry:component | Stretchy text animation: a repeating letter that stretches a word. A word that will not stop, and the line that follows it. "And more" says itself normally, th… | `npx shadcn@latest add https://snapcn.dev/r/stretch-word.json` |
| files-drop | registry:component | File drop animation: files dragged into an AI prompt and landing as attachments. A handful of frames is dragged into a prompt and becomes five attachments. A s… | `npx shadcn@latest add https://snapcn.dev/r/files-drop.json` |
| focus-pull | registry:component | Blur-in text animation: phrases resolving from blur out of a gradient field. A phrase at a time, resolving out of a moving colour field. Each line arrives from… | `npx shadcn@latest add https://snapcn.dev/r/focus-pull.json` |
| gallery-push | registry:component | Screenshot wall animation: a gallery of app screenshots opening column by column. A wall of screenshots that opens one column at a time. The columns rise into … | `npx shadcn@latest add https://snapcn.dev/r/gallery-push.json` |
| agent-tools | registry:component | AI agent tools animation for agent and MCP product demos. The moment somebody hands an agent their tools. A spark writes a line word by word, each new word arr… | `npx shadcn@latest add https://snapcn.dev/r/agent-tools.json` |
| phone-pitch | registry:component | iPhone mockup scene: a headline and a phone placed into frame, the app pitch shot. A headline and a phone: the pitch shot. The device is put down from the righ… | `npx shadcn@latest add https://snapcn.dev/r/phone-pitch.json` |
| comment-storm | registry:component | Comments animation: a flood of social comments and replies for launch hype. The comment section under a launch everyone is waiting for, burying the frame. One … | `npx shadcn@latest add https://snapcn.dev/r/comment-storm.json` |
| thank-you-swarm | registry:component | Supporters animation: a notification wall of avatars, for thank-you and social proof. A notification row of supporters that tears off under its own motion blur… | `npx shadcn@latest add https://snapcn.dev/r/thank-you-swarm.json` |
| hex-tally | registry:component | Chart animation: a hex unit chart filling in under a counting metric card, for stats and dashboards. A metric card that lands while a hex unit chart fills in u… | `npx shadcn@latest add https://snapcn.dev/r/hex-tally.json` |
| brief-send | registry:component | Product demo scene: a project brief typed and sent. An empty project page pulls away, and the brief that fills it gets sent. Two shots on one clock with a hard… | `npx shadcn@latest add https://snapcn.dev/r/brief-send.json` |
| render-wall | registry:component | Code to showcase animation: loose code resolving into a wall of finished work. A field of loose code that resolves into a wall of finished work, and then the w… | `npx shadcn@latest add https://snapcn.dev/r/render-wall.json` |
| string-hero | registry:component | Code typing animation: a line of code types and its string becomes the headline. A line of code being typed, and then the string inside it becomes the headline… | `npx shadcn@latest add https://snapcn.dev/r/string-hero.json` |
| proof-line | registry:component | Portfolio proof scene: shipped work cards collapsing into one sentence. Five pieces of shipped work collapse, one at a time, into the sentence that describes t… | `npx shadcn@latest add https://snapcn.dev/r/proof-line.json` |
| ticker-climb | registry:component | Line chart animation: a climbing trend line and a live number ticker counting up. A claim, and then the live number that proves it. A headline settles out of a… | `npx shadcn@latest add https://snapcn.dev/r/ticker-climb.json` |
| tap-through | registry:component | Phone feed tap animation: scroll a social feed and tap a button. Somebody's feed, the button they press, and the line that press was for. A phone hangs in the … | `npx shadcn@latest add https://snapcn.dev/r/tap-through.json` |
| cross-out | registry:component | Strikethrough text animation: marker cross-out, then the replacement word. Cross out the advice, then name the thing it was standing in for. A headline sits on… | `npx shadcn@latest add https://snapcn.dev/r/cross-out.json` |
| screen-wall | registry:component | Phone mockups tunnel: four phones around a headline with a camera pull-back. Four phones down a tunnel around a sentence, and the shot backing out of them. The… | `npx shadcn@latest add https://snapcn.dev/r/screen-wall.json` |
| laptop-open | registry:component | Laptop mockup animation: a MacBook opening with depth of field and a zoom into the screen. A laptop opening out of focus, holding, and then swallowing the lens… | `npx shadcn@latest add https://snapcn.dev/r/laptop-open.json` |
| tally-rise | registry:component | Counter animation: a currency count-up number, revenue and payout odometer. A currency figure climbing on a bloom that dies under it. One number, one label, on… | `npx shadcn@latest add https://snapcn.dev/r/tally-rise.json` |
| lockup-reveal | registry:component | Logo lockup reveal animation on a construction grid. A logo lockup opening on a construction grid, then turning out to be a window. The mark starts alone in th… | `npx shadcn@latest add https://snapcn.dev/r/lockup-reveal.json` |
| word-montage | registry:component | Photo montage with rotating words: images gathering round a changing line. Photos gathering round a line that keeps changing its mind, then collapsing into the… | `npx shadcn@latest add https://snapcn.dev/r/word-montage.json` |
| orbit-flow | registry:component | Orbit diagram animation: labelled steps riding orbits around a headline, for workflow explainers. Three dashed orbits round a line of type, with three labelled… | `npx shadcn@latest add https://snapcn.dev/r/orbit-flow.json` |
| checkout-push | registry:component | Payment animation: a phone checkout with the amount landing and a camera push. A phone paying for something, pushed through the camera. The device stands still… | `npx shadcn@latest add https://snapcn.dev/r/checkout-push.json` |
| metric-morph | registry:component | Bar chart animation: a button morphs into a stat and a histogram chart fills in. The control becomes the number it produces. An export button settles from the … | `npx shadcn@latest add https://snapcn.dev/r/metric-morph.json` |
| prompt-dive | registry:component | AI prompt animation: typing into an assistant and diving into the send button. A prompt typed into an assistant, and then a dive into the send button. The plac… | `npx shadcn@latest add https://snapcn.dev/r/prompt-dive.json` |
| vault-count | registry:component | Balance counter animation: a phone wallet balance counting up with payment cards. A balance ticking up while the payments that fed it drift past. The device ne… | `npx shadcn@latest add https://snapcn.dev/r/vault-count.json` |
| wall-cut | registry:component | LED wall text animation: a sentence read out on a pixel display. A sentence read out on an LED wall, cut from the pixels to the room. The camera opens so close… | `npx shadcn@latest add https://snapcn.dev/r/wall-cut.json` |
| library-flight | registry:component | Product library fly-through: a wall of component screens and a closing subscription line. A title, a fly-through of the whole library, and the line it adds up … | `npx shadcn@latest add https://snapcn.dev/r/library-flight.json` |
| wire-feed | registry:component | News feed animation: a live changelog feed typing its newest item as the camera pulls back. A live feed writing its newest item while the camera pulls back. Cl… | `npx shadcn@latest add https://snapcn.dev/r/wire-feed.json` |
| pack-up | registry:component | Typewriter text animation into a 3D box: a headline types, then its words are packed into a cardboard carton. A line types itself, catches the light, and its l… | `npx shadcn@latest add https://snapcn.dev/r/pack-up.json` |

## For AI agents

```text
You are adding components from @snapcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/snapcn.md) for the component list.
2. Fetch the machine-readable index: https://snapcn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: snapcn).
```