---
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", "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: 175
component_count: 51
generated_at: "2026-09-05T09:50:59.044Z"
---

# @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 (51)

| name | type | description | install |
| --- | --- | --- | --- |
| answer-highlight | registry:component | A question in a pill, an answer that writes itself a word at a time, and then the beat the whole shot is for: a caret lands mid-sentence and a selection band d… | `npx shadcn@latest add https://snapcn.dev/r/answer-highlight.json` |
| agent-steps | registry:component | An agent narrating its own work: the prompt lands in a pill, and under it a log writes itself one line at a time — each step running with a faint spinning glob… | `npx shadcn@latest add https://snapcn.dev/r/agent-steps.json` |
| announce-title | registry:component | A four-shot launch title: the eyebrow rushes past the camera on a receding type plane and lands on a colour field, the name assembles word by word on paper, an… | `npx shadcn@latest add https://snapcn.dev/r/announce-title.json` |
| answer-stream | registry:component | The beat after send: a macro shot on the button that cuts — hard, on its fastest frame — to the answer building itself on the page, while the camera pulls back… | `npx shadcn@latest add https://snapcn.dev/r/answer-stream.json` |
| text-reveal | registry:component | One staggered enter/exit text animator: fade, slide, blur, scale, mask and tracking effects over character, word, line or block units, with 14 classic looks as… | `npx shadcn@latest add https://snapcn.dev/r/text-reveal.json` |
| text-highlight | registry:component | Animated emphasis on one span inside a static sentence — marker sweep, color shift, underline, strikethrough-replace, or shimmer. | `npx shadcn@latest add https://snapcn.dev/r/text-highlight.json` |
| text-rewrite | registry:component | A line that writes itself a word at a time, comes forward and gets selected — then its opening is swept away by a clip that cuts letters in half as it passes, … | `npx shadcn@latest add https://snapcn.dev/r/text-rewrite.json` |
| text-select | registry:component | A line that writes itself a word at a time — each one arriving in the accent and cooling to the foreground a beat later, so exactly one word is ever coloured —… | `npx shadcn@latest add https://snapcn.dev/r/text-select.json` |
| text-swap | registry:component | Replaces one line of text with another using exit-then-enter scheduling, with five transition presets: fade-through, crossfade, shared-axis-y, shared-axis-z, a… | `npx shadcn@latest add https://snapcn.dev/r/text-swap.json` |
| text-swell | registry:component | A title reveal where the lead word floats toward the viewer and hangs there while the sentence assembles around it — each trailing word pushes in and its lette… | `npx shadcn@latest add https://snapcn.dev/r/text-swell.json` |
| text-build | registry:component | Words enter one at a time while already-placed words physically reflow to stay centered — a growing line on the x axis or a growing stack on the y axis. | `npx shadcn@latest add https://snapcn.dev/r/text-build.json` |
| word-flip | registry:component | A headline types itself out, then one word cycles on a 3D flip — it sinks into an anticipation dip, throws up and away about its baseline under motion blur, an… | `npx shadcn@latest add https://snapcn.dev/r/word-flip.json` |
| word-captions | registry:component | Burned-in captions in the styles big channels actually use — heavy Montserrat, a real outside outline so they read on any footage, and the spoken word springin… | `npx shadcn@latest add https://snapcn.dev/r/word-captions.json` |
| karaoke-captions | registry:component | A caption line that fills word by word as it is spoken — heavy outlined type that reads on any footage. Three presets: karaoke, highlight (the word rides an ac… | `npx shadcn@latest add https://snapcn.dev/r/karaoke-captions.json` |
| logo-drift | registry:component | A field of tiles drifting past a headline while the camera pulls steadily back, so the wall of things-it-works-with keeps arriving from every edge. The pull-ba… | `npx shadcn@latest add https://snapcn.dev/r/logo-drift.json` |
| logo-assemble | registry:component | A single ring of image cards revolves around a centred title, then spins inward and drains to the middle — giving birth to a simple logo that slides left as th… | `npx shadcn@latest add https://snapcn.dev/r/logo-assemble.json` |
| logo-flicker | registry:component | Images flip across a central card very fast, the flicker decelerates and fades, and the logo and brand name resolve underneath — a strobe of imagery settling o… | `npx shadcn@latest add https://snapcn.dev/r/logo-flicker.json` |
| block-wordmark | registry:component | A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block… | `npx shadcn@latest add https://snapcn.dev/r/block-wordmark.json` |
| phone-frame | registry:component | iPhone-style device frame with a dynamic island and a screen slot — flat or lightly 3D-tilted, with rise, rotate-in, or float entrances and a subtle float loop. | `npx shadcn@latest add https://snapcn.dev/r/phone-frame.json` |
| laptop-frame | registry:component | MacBook-style laptop that opens, runs a dynamic-island notch notification, then dives the camera into the screen until an image or video fills the frame. | `npx shadcn@latest add https://snapcn.dev/r/laptop-frame.json` |
| terminal-simulator | registry:component | Terminal window with chunked command playback, freeze-frame pauses, step scrolling, and an optional cursor-pinned zoom camera. | `npx shadcn@latest add https://snapcn.dev/r/terminal-simulator.json` |
| screen-recording | registry:component | The treatment that turns a raw screen capture into a shot: crop the browser and OS chrome off each edge as a fraction, fit what is left to the frame, and run a… | `npx shadcn@latest add https://snapcn.dev/r/screen-recording.json` |
| cursor-track | registry:component | A synthetic cursor that walks a path of normalized waypoints over any children and pulses a click ring on arrival. A hand-drawn macOS-style arrow with an outli… | `npx shadcn@latest add https://snapcn.dev/r/cursor-track.json` |
| pulsing-border | registry:component | Glowing 'AI is working' frame — a soft pulsing border overlay that breathes around the scene edges while a response streams. | `npx shadcn@latest add https://snapcn.dev/r/pulsing-border.json` |
| follower-rush | registry:component | 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. | `npx shadcn@latest add https://snapcn.dev/r/follower-rush.json` |
| prompt-send | registry:component | A composer that unrolls from a hairline, writes a brief into itself while the camera cuts in and rides the caret, then cuts back out to the send button as a po… | `npx shadcn@latest add https://snapcn.dev/r/prompt-send.json` |
| prompt-zoom | registry:component | An assistant landing screen that offers its suggestions, then cuts — hard, in a single frame — into the caret, where the prompt types itself. The push-in is a … | `npx shadcn@latest add https://snapcn.dev/r/prompt-zoom.json` |
| punch-lines | registry:component | A run of full-frame title cards that cut hard between beats. A statement card is flicked in from the left line by line and settles on a critically damped curve… | `npx shadcn@latest add https://snapcn.dev/r/punch-lines.json` |
| orbit-gallery | registry:component | An image-universe hero: a continuous stream of photos flows along an Archimedean spiral (a vortex) from the frame edges into the center — evenly spaced by arc … | `npx shadcn@latest add https://snapcn.dev/r/orbit-gallery.json` |
| hero-launch | registry:component | 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 | A kinetic headline with a swapping inline image, then a scattered gallery of photos flies in, the camera pushes through it as the background lifts from near-bl… | `npx shadcn@latest add https://snapcn.dev/r/moodboard-reveal.json` |
| search-typing | registry:component | 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. Every propo… | `npx shadcn@latest add https://snapcn.dev/r/search-typing.json` |
| status-cycle | registry:component | A centred line whose status pill cycles: the label rolls up behind a hard clip while the pill's width springs past its target and back, and the line re-centres… | `npx shadcn@latest add https://snapcn.dev/r/status-cycle.json` |
| type-morph | registry:component | A headline that types itself under a glowing caret, sheds its lead, morphs letter by letter, and ends under a colour flood. | `npx shadcn@latest add https://snapcn.dev/r/type-morph.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` |
| manifesto | registry:component | Three statements, three different arrivals, hard cuts between them. The first is wiped on left to right behind a magenta edge that cools to white, then pushes … | `npx shadcn@latest add https://snapcn.dev/r/manifesto.json` |
| read-through | registry:component | A sentence set enormous and read a word at a time. Three lines pan left together in eased steps — each step carries the next word to a fixed reading position, … | `npx shadcn@latest add https://snapcn.dev/r/read-through.json` |
| word-settle | registry:component | A sentence that arrives a word at a time, hot, and cools as it lands. Two clocks running at different speeds: words appear left to right every couple of frames… | `npx shadcn@latest add https://snapcn.dev/r/word-settle.json` |
| chat-thread | registry:component | A chat thread sending itself — the moment a demo video actually gets shared. Bubbles arrive one at a time and fade up in place; the stack is bottom-anchored so… | `npx shadcn@latest add https://snapcn.dev/r/chat-thread.json` |
| lcd-type | registry:component | A type specimen on a screen you can see the pixels of. A title accelerates up and out of frame, then lines type themselves a word at a time — each laid out cen… | `npx shadcn@latest add https://snapcn.dev/r/lcd-type.json` |
| sentence-set | registry:component | A sentence setting itself, a word at a time. Each word arrives grey and a few pixels right of where it belongs, then darkens to black as it closes the gap — on… | `npx shadcn@latest add https://snapcn.dev/r/sentence-set.json` |
| showcase-drift | registry:component | A wall of work sliding to a stop behind a headline. The whole scatter arrives from the right and settles, losing a fixed share of the remaining distance every … | `npx shadcn@latest add https://snapcn.dev/r/showcase-drift.json` |
| agent-chat | registry:component | An agent conversation, from the empty field to the answer. Five beats on one clock: the prompt types itself into a compose field while the camera pushes in, th… | `npx shadcn@latest add https://snapcn.dev/r/agent-chat.json` |
| version-drop | registry:component | A name typing itself across two shots, and the number it was all for. Three shots on one clock: the name starts large and left-aligned, jump cuts to a smaller … | `npx shadcn@latest add https://snapcn.dev/r/version-drop.json` |
| agent-open | registry:component | A line assembles a word at a time, resolves to your product's name, and becomes a prompt somebody types. Each new word's letters arrive at their own heights an… | `npx shadcn@latest add https://snapcn.dev/r/agent-open.json` |
| phrase-swarm | registry:component | One phrase comes apart and another gathers out of the pieces. The opening line holds, its letters fly outward, and at the peak the scene cuts — identity, posit… | `npx shadcn@latest add https://snapcn.dev/r/phrase-swarm.json` |
| word-rush | registry:component | 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. Words hang at random depths, tint… | `npx shadcn@latest add https://snapcn.dev/r/word-rush.json` |
| app-reveal | registry:component | A wordmark that folds into an app, and a camera that flies around it. The mark holds the frame alone, shrinks into the header of a card that builds around it, … | `npx shadcn@latest add https://snapcn.dev/r/app-reveal.json` |
| stretch-word | registry:component | A word that will not stop, and the line that follows it. "And more" says itself normally, then the letter you name starts repeating — moore, mooore, moooore — … | `npx shadcn@latest add https://snapcn.dev/r/stretch-word.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).
```