remocn.dev

mx

smtp.google.com

ns

ns2.vercel-dns.com

ns1.vercel-dns.com

caa

pki.goog

letsencrypt.org

sectigo.com

txt

google-site-verification=LUDgScsBMg5znEx-zho_A0KDR95F3qBhH0M_3t1r3bg

anthropic-domain-verification-fx611q=8pNRRJiYplkhI5qROcFAHO9Wj

dmarc

User-Agent: *
Allow: /
Disallow: /api/

Sitemap: https://remocn.dev/sitemap.xml

# remocn

> shadcn registry of production-ready Remotion components — animations, transitions, backgrounds, and full scenes. Install with `npx shadcn add remocn/<component>`.

Docs are also available as raw Markdown: append `.md` to any docs URL, or read [/llms-full.txt](https://remocn.dev/llms-full.txt) for the full corpus in a single file.

Building a video? Start at [/llms-components.txt](https://remocn.dev/llms-components.txt) — every installable component in one table with its use / avoid signal, natural length, vibe and dependencies, linking to each component's full page.

Prefer an app to a terminal? [Remocn Studio](https://remocn.studio) is a free, open-source macOS app where the user's own coding agent (Claude Code, Codex, GitHub Copilot or Grok) builds Remotion videos from remocn components, with a live preview and export. Its own index is at [remocn.studio/llms.txt](https://remocn.studio/llms.txt).

## Components
- [Components](https://remocn.dev/docs/components.md): Every component in remocn, grouped by category

## Ai
- [Agent Run](https://remocn.dev/docs/ai/agent-run.md): A brand-neutral AI agent run that thinks, calls tools against a real-seconds timer and streams a markdown answer in bursts
- [ChatGPT](https://remocn.dev/docs/ai/chat-gpt.md): Animated ChatGPT composer that types a prompt and morphs the voice button into a send button
- [Claude Chat](https://remocn.dev/docs/ai/claude-chat.md): Animated Claude chat input that types a prompt and morphs the waveform button into a send button
- [Claude Code](https://remocn.dev/docs/ai/claude-code.md): Animated Claude Code CLI welcome screen that types a command into the terminal prompt
- [AI](https://remocn.dev/docs/ai.md): Animated AI tool interfaces — chat composers and CLI welcome screens that type a prompt, and an agent run that streams the answer
- [OpenCode](https://remocn.dev/docs/ai/opencode.md): Animated OpenCode TUI welcome screen that types a query into the input
- [v0](https://remocn.dev/docs/ai/v0.md): Animated Vercel v0 composer that types a prompt and morphs the mic button into a send button

## Compositions
- [Ecosystem Constellation](https://remocn.dev/docs/compositions/ecosystem-constellation.md): A central product logo orbited by integration satellites with pulsing data lines
- [Compositions](https://remocn.dev/docs/compositions.md): Full scenes built by composing primitives and UI blocks
- [Infinite Bento Pan](https://remocn.dev/docs/compositions/infinite-bento-pan.md): A hypnotic diagonal camera glide over an oversized grid of bento cards
- [Live Code Compilation](https://remocn.dev/docs/compositions/live-code-compilation.md): A split-screen where code is typed on the left and the right-side UI snaps to match in a single frame

## Craft
- [Anti-patterns](https://remocn.dev/docs/craft/anti-patterns.md): The dozen mistakes that recur when a video is generated, each with the fix beside it
- [Design defaults](https://remocn.dev/docs/craft/design-defaults.md): Restraint rules for the text, chrome and cards you add yourself, plus the palette and fonts the library already uses
- [Craft](https://remocn.dev/docs/craft.md): The house rules behind a remocn video — restraint in design, intent in motion, and the mistakes that give a generated video away
- [Motion principles](https://remocn.dev/docs/craft/motion-principles.md): The classic animation principles reduced to the eight that matter when you assemble scenes from prebuilt blocks

## Effects
- [Confetti](https://remocn.dev/docs/effects/confetti.md): Deterministic confetti burst for Remotion — seeded particles with gravity, spin, and flutter
- [Crumple Toss](https://remocn.dev/docs/effects/crumple-toss.md): Crushes an element into a ball of paper and throws it out of frame
- [Cursor Gravity](https://remocn.dev/docs/effects/cursor-gravity.md): A rounded triangular cursor tugs a button out of the screen edge with pulsed elastic resistance
- [Effects](https://remocn.dev/docs/effects.md): Reusable Remotion effect overlays for celebratory and atmospheric moments
- [Ink Arrow](https://remocn.dev/docs/effects/ink-arrow.md): A hand-drawn arrow that draws itself from one point to another in stop-motion poses
- [Keystroke](https://remocn.dev/docs/effects/keystroke.md): Physical keycaps that press, hold and spring back in real order, a shortcut overlay for keyboard-first product demos
- [Paper Wobble](https://remocn.dev/docs/effects/paper-wobble.md): Per-pose reshoot jitter that makes any content feel hand-placed on a desk
- [Radial Burst](https://remocn.dev/docs/effects/radial-burst.md): Sculptural ribbons twist into a tilted ring and sweep outward through layered contour echoes
- [Scribble Circle](https://remocn.dev/docs/effects/scribble-circle.md): A brush circle that sweeps itself around a region of the frame, opening thin and closing thick
- [Simulated Cursor](https://remocn.dev/docs/effects/simulated-cursor.md): A synthetic mouse cursor that travels between waypoints and fires a click ripple, for narrating a UI on screen
- [TV Power Off](https://remocn.dev/docs/effects/tv-power-off.md): End a scene the way a tube does — the picture collapses into a glowing line, pinches to a phosphor dot, and the frame is left dead black

## Getting Started
- [Agent Skill](https://remocn.dev/docs/getting-started/agent-skill.md): Install the remocn agent skill with skills.sh so your AI generates better Remotion videos
- [Installation](https://remocn.dev/docs/getting-started/installation.md): Add remocn to an existing Remotion project
- [Introduction](https://remocn.dev/docs/getting-started/introduction.md): What remocn is — a shadcn-style component registry for Remotion plus an agent skill. Copy-paste video components, MIT, code lives in your repo.
- [Plugin](https://remocn.dev/docs/getting-started/plugin.md): Install the remocn plugin for Claude Code or Codex. It turns a one-line brief into a Remotion video built from remocn components, checks the frames, and opens the result in Remocn Studio.

## Icons
- [Gallery](https://remocn.dev/docs/icons/gallery.md): Browse every remocn icon, hover to play its motion, and copy the install command

## Guides
- [Changelog video](https://remocn.dev/docs/guides/changelog-video.md): A ~25-second release update for the weeks that ship several small things — same open, same pace, every release
- [Directing your agent](https://remocn.dev/docs/guides/directing-your-agent.md): The first cut is a draft — how to get from there to the video you meant
- [Exporting your video](https://remocn.dev/docs/guides/exporting-your-video.md): The preview in your browser is not a file yet — one prompt turns it into an mp4 you can post
- [Feature announcement](https://remocn.dev/docs/guides/feature-announcement.md): A ~40-second release video that shows the feature working — the one we shipped remocn/ui with
- [How a video is built](https://remocn.dev/docs/guides/how-a-video-is-built.md): Think in beats — the one mental model behind every video you'll make
- [Guides](https://remocn.dev/docs/guides.md): Finished videos you can make yours — pick one, fill in your words, paste a prompt
- [Launch video](https://remocn.dev/docs/guides/launch-video.md): The ~35-second launch video we made for remocn itself — with your product in it
- [Music and sound](https://remocn.dev/docs/guides/music-and-sound.md): The recipes produce silent videos — a music bed is the cheapest upgrade that makes one feel finished
- [One video, three formats](https://remocn.dev/docs/guides/one-video-three-formats.md): Every recipe builds a horizontal video — Reels, Shorts and TikTok want vertical, and you re-cut instead of rebuilding
- [Product demo](https://remocn.dev/docs/guides/product-demo.md): A ~50-second video where your product is on camera doing its job — one flow, start to finish
- [Setup](https://remocn.dev/docs/guides/setup.md): One-time setup for making videos with an AI agent — about ten minutes
- [Showcase reel](https://remocn.dev/docs/guides/showcase-reel.md): A fast ~30-second reel where every item in a collection gets its own beat — the one we shipped the typography wave with
- [Teaser](https://remocn.dev/docs/guides/teaser.md): The ~15-second pre-launch video — something is coming, here is its name, here is the date
- [Words on screen](https://remocn.dev/docs/guides/words-on-screen.md): Video copy is not website copy — how to write lines people can read in two seconds
- [Your brand](https://remocn.dev/docs/guides/your-brand.md): Hand your brand to the agent once — every video after that comes out looking like yours

## Layout
- [Backdrop](https://remocn.dev/docs/layout/backdrop.md): Full-frame fill with an optional rounded, shadowed content frame — accepts a color, gradient, image, or any React element as a live animated background
- [Chat to Preview Layout](https://remocn.dev/docs/layout/chat-to-preview-layout.md): A two-column split where the chat column shrinks and the preview column expands, for showing an agent building something
- [Drift](https://remocn.dev/docs/layout/drift.md): Wrap any scene in a slow camera push-in so no frame is ever static
- [Layout](https://remocn.dev/docs/layout.md): Scene framing and fill components for Remotion compositions
- [Stage](https://remocn.dev/docs/layout/stage.md): Put a screenshot, recording, or long page on a perspective studio plane and direct the camera across it with timeline keyframes

## Motion Graphics
- [Bauhaus Build](https://remocn.dev/docs/motion-graphics/bauhaus-build.md): Flat shapes tumble corner over corner into a Bauhaus frieze, then rebuild around an open band that hands off to a title
- [Motion Graphics](https://remocn.dev/docs/motion-graphics.md): Flat geometric motion-graphics pieces for openers, section breaks, and pattern beds
- [Mondrian Split](https://remocn.dev/docs/motion-graphics/mondrian-split.md): Black lines cut the frame into a De Stijl grid, primaries fill the cells, the grid reflows like rubber, and one cell grows until it is the frame
- [Speed Lines](https://remocn.dev/docs/motion-graphics/speed-lines.md): Parallel streaks trail an element at its real speed and die as it lands with a squash and a small bounce, or radial lines snap onto one point for a manga impact frame
- [Squiggle](https://remocn.dev/docs/motion-graphics/squiggle.md): A flat line draws itself along a straight course while its wave swims forward and calms, then erases toward the end
- [Trim Burst](https://remocn.dev/docs/motion-graphics/trim-burst.md): Short strokes shoot out from a point and vanish in flight, each start chasing its end, to punctuate a click, a landing number or a beat
- [Truchet Flip](https://remocn.dev/docs/motion-graphics/truchet-flip.md): Quarter-circle tiles snap a quarter turn as a wave crosses the grid, reconnecting the lines until they settle into rings, a calm field, or a circle

## Social
- [GitHub Sponsors](https://remocn.dev/docs/social/github-sponsors.md): Animated GitHub Sponsors lockup — a self-drawing heart that docks to a header, every sponsor avatar blur-staggering into a grid, then a thank-you headline and a CTA
- [GitHub Stars](https://remocn.dev/docs/social/github-stars.md): Stargazer list fly-through with a synced odometer counter — renders standalone from sample data or accepts live stargazer props
- [Social](https://remocn.dev/docs/social.md): Remotion compositions for sharing milestones and social proof
- [Logo Enter](https://remocn.dev/docs/social/logo-enter.md): A stacked group of round brand chips that spring in one-by-one, then hold
- [X Follow Card](https://remocn.dev/docs/social/x-follow-card.md): Animated X profile follow card with spring bounce-in, staggered blur-in, and cursor-driven Follow transition
- [X Followers Overview](https://remocn.dev/docs/social/x-followers-overview.md): X follow notifications flip through in 3D, then the total follower count blurs in

## Templates
- [Brand Guidelines](https://remocn.dev/docs/templates/brand-guidelines.md): A complete editorial identity film with a color palette, kinetic typography, original object photography, and a geometric brand mark
- [Order Flow](https://remocn.dev/docs/templates/fomo-limit-orders.md): An independent trading-interface demo with fictional data, amber controls, and precise camera choreography
- [Product Showcase](https://remocn.dev/docs/templates/launch-anything.md): An editorial product film with forest-green accents, original photography, and seven editable demos
- [Release Teaser](https://remocn.dev/docs/templates/release-teaser.md): A cinematic release announcement with quiet kinetic typography, a dimensional open-ring mark, and moving edge light
- [Workflow Console](https://remocn.dev/docs/templates/workflow-console.md): An independent release-automation film with typed commands, environment diagrams, and pipeline metrics

## Ui
- [Concepts](https://remocn.dev/docs/ui/concepts.md): The mental model behind remocn-ui primitives — atoms, timeline hooks, theming, and core exports
- [Introduction](https://remocn.dev/docs/ui.md): shadcn-style primitives scripted on the Remotion timeline
- [Installation](https://remocn.dev/docs/ui/installation.md): Add remocn-ui primitives to an existing Remotion project via the shadcn CLI
- [AI Prompt Flow](https://remocn.dev/docs/ui/blocks/ai-prompt-flow.md): A full prompt-to-answer scene — the prompt types itself, the button runs to loading, a skeleton reveals, and the answer crossfades in
- [Chat Flow](https://remocn.dev/docs/ui/blocks/chat-flow.md): A messaging conversation that types outgoing messages, shows typing indicators, and pops in incoming replies with reactions
- [CheckoutFlow](https://remocn.dev/docs/ui/blocks/checkout-flow.md): A cursor-driven checkout card with a pricing toggle, card input, terms checkbox, and payment confirmation
- [iMessage Chat Flow](https://remocn.dev/docs/ui/blocks/imessage-chat-flow.md): iMessage-styled conversation with gray incoming and blue outgoing bubbles, typing indicator, Delivered label, and tapback reactions
- [Blocks](https://remocn.dev/docs/ui/blocks.md): Full video scenes assembled from remocn-ui primitives
- [Onboarding Stepper Flow](https://remocn.dev/docs/ui/blocks/onboarding-stepper-flow.md): A multi-step onboarding scene where a stepper advances through form panels and finishes on a success state
- [SettingsToggleFlow](https://remocn.dev/docs/ui/blocks/settings-toggle-flow.md): Two-column settings card with a blur-in entrance and a cursor-driven switch, select, slider, and save
- [SignupFlow](https://remocn.dev/docs/ui/blocks/signup-flow.md): A cursor-driven signup card — labeled fields fill top-to-bottom, then submit with success feedback
- [Telegram Chat Flow](https://remocn.dev/docs/ui/blocks/telegram-chat-flow.md): Telegram-styled conversation with tailed bubbles, delivery checks, typing status, and reaction chips
- [Accordion](https://remocn.dev/docs/ui/components/accordion.md): An accordion panel whose open/closed state is a pure function of the timeline
- [AlertDialog](https://remocn.dev/docs/ui/components/alert-dialog.md): A modal alert dialog whose opened/closed state is a pure function of the timeline
- [Blur In](https://remocn.dev/docs/ui/components/blur-in.md): A wrapper that reveals a single child with blur, opacity, and a directional offset
- [Button](https://remocn.dev/docs/ui/components/button.md): A button whose visual state is a pure function of the timeline
- [Caret](https://remocn.dev/docs/ui/components/caret.md): A blinking text caret — a pure motion atom or a fully controlled bar
- [Checkbox](https://remocn.dev/docs/ui/components/checkbox.md): A checkbox whose checked/unchecked state is a pure function of the timeline
- [Combobox](https://remocn.dev/docs/ui/components/combobox.md): A searchable select with a typed-query input, filtered panel, and row selection
- [Command Menu](https://remocn.dev/docs/ui/components/command-menu.md): A keyboard-driven command palette with backdrop, typing animation, and row selection
- [Context Menu](https://remocn.dev/docs/ui/components/context-menu.md): A right-click menu panel that opens at the cursor point with no built-in trigger
- [Cursor](https://remocn.dev/docs/ui/components/cursor.md): An animated cursor that follows a scripted path with click ripple and press effects
- [Dialog](https://remocn.dev/docs/ui/components/dialog.md): A modal dialog whose opened/closed state is a pure function of the timeline
- [Drawer](https://remocn.dev/docs/ui/components/drawer.md): A bottom panel whose opened/closed state is a pure function of the timeline
- [DropdownMenu](https://remocn.dev/docs/ui/components/dropdown-menu.md): A dropdown menu container with opened/closed states and action rows
- [Field](https://remocn.dev/docs/ui/components/field.md): A static layout family for composing labeled form controls with consistent vertical spacing
- [Input](https://remocn.dev/docs/ui/components/input.md): An input field whose visual state is a pure function of the timeline
- [Message Bubble](https://remocn.dev/docs/ui/components/message-bubble.md): A state-driven speech bubble with incoming and outgoing variants and an optional reaction badge
- [Popover](https://remocn.dev/docs/ui/components/popover.md): A floating card that appears beside an anchor with arbitrary content
- [Progress](https://remocn.dev/docs/ui/components/progress.md): A progress bar that fills along a scripted numeric value timeline
- [Radio](https://remocn.dev/docs/ui/components/radio.md): A radio whose checked/unchecked state is a pure function of the timeline
- [Resizable](https://remocn.dev/docs/ui/components/resizable.md): A two-panel split container whose divider ratio and handle state are driven by a scripted dual-channel timeline
- [Select Menu](https://remocn.dev/docs/ui/components/select-menu.md): A vertical option list whose highlight slides between selections on the timeline
- [Select](https://remocn.dev/docs/ui/components/select.md): A dropdown select container with opened/closed states and item panel
- [Sheet](https://remocn.dev/docs/ui/components/sheet.md): A side panel whose opened/closed state is a pure function of the timeline
- [Skeleton Block](https://remocn.dev/docs/ui/components/skeleton-block.md): A single shimmer placeholder rectangle whose highlight sweep is a pure function of the frame
- [Skeleton](https://remocn.dev/docs/ui/components/skeleton.md): A shimmer placeholder that crossfades to real content when loaded
- [Slider](https://remocn.dev/docs/ui/components/slider.md): A range slider with a draggable thumb driven by a scripted value and thumb-state timeline
- [Spinner](https://remocn.dev/docs/ui/components/spinner.md): A deterministic spinning arc — pure function of the Remotion frame
- [Stepper](https://remocn.dev/docs/ui/components/stepper.md): A multi-step progress indicator that advances along a scripted numeric position timeline
- [Switch](https://remocn.dev/docs/ui/components/switch.md): A switch whose checked/unchecked state is a pure function of the timeline
- [Tabs](https://remocn.dev/docs/ui/components/tabs.md): A tabs widget whose active-tab state is a pure function of the timeline
- [Toast](https://remocn.dev/docs/ui/components/toast.md): A notification that slides in from below, holds, then auto-dismisses
- [Toggle Group](https://remocn.dev/docs/ui/components/toggle-group.md): A segmented control whose active value slides a thumb indicator between segments
- [Tooltip](https://remocn.dev/docs/ui/components/tooltip.md): A small floating label that appears above an anchor on hover
- [Typing Indicator](https://remocn.dev/docs/ui/components/typing-indicator.md): A motion atom that renders N bouncing dots driven directly by useCurrentFrame

## Ui Blocks
- [Animated Bar Chart](https://remocn.dev/docs/ui-blocks/animated-bar-chart.md): Bars spring up from the baseline with a staggered cascade
- [Animated Line Chart](https://remocn.dev/docs/ui-blocks/animated-line-chart.md): A line chart whose path draws on from left to right
-