---
name: "@framecn"
slug: "framecn"
description: "A shadcn-compatible registry of 64 programmatic video compositions for React, built on the Editframe rendering engine. Compositions include Hero Device Assemble, AI Generation Canvas, Browser Flow, Terminal to Browser Deploy, Product Launch Trailer, Pricing Tier Focus, Changelog Bite, and more — all covering SaaS and developer storytelling scenarios. Free and open-source, TypeScript/Next.js, installable via npx shadcn add. Use for: embedding high-quality animated video sequences or motion narratives inside React/Next.js apps without a video editing tool."
category: "Animated components"
tags: ["aesthetic", "ai", "animation", "backgrounds", "blocks", "cards", "charts", "dashboard", "developer-tools", "editor", "forms", "glassmorphism", "icons", "loaders", "media", "mobile", "overlays", "retro", "saas", "text-effects"]
framework: "react"
license: "MIT"
author: "shadcn-labs"
website: "https://framecn.vercel.app"
github: "https://github.com/shadcn-labs/framecn"
registry: "https://framecn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 101
component_count: 101
generated_at: "2026-07-28T08:59:05.895Z"
---

# @framecn

A shadcn-compatible registry of 64 programmatic video compositions for React, built on the Editframe rendering engine. Compositions include Hero Device Assemble, AI Generation Canvas, Browser Flow, Terminal to Browser Deploy, Product Launch Trailer, Pricing Tier Focus, Changelog Bite, and more — all covering SaaS and developer storytelling scenarios. Free and open-source, TypeScript/Next.js, installable via npx shadcn add. Use for: embedding high-quality animated video sequences or motion narratives inside React/Next.js apps without a video editing tool.

## Links

- Website: https://framecn.vercel.app
- GitHub: https://github.com/shadcn-labs/framecn
- Registry JSON: https://framecn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/framecn
- This file: https://sh4dcn.vercel.app/md/framecn.md

## Install

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

## Components (101)

| name | type | description | install |
| --- | --- | --- | --- |
| blur-reveal | registry:component | Text fades in from a heavy blur into sharp focus. | `npx shadcn@latest add https://framecn.vercel.app/r/blur-reveal.json` |
| typewriter | registry:component | Character-by-character text reveal with a deterministic blinking cursor. | `npx shadcn@latest add https://framecn.vercel.app/r/typewriter.json` |
| inline-highlight | registry:component | Animates one word inside a sentence from a base color to a brand color. | `npx shadcn@latest add https://framecn.vercel.app/r/inline-highlight.json` |
| text-fade-replace | registry:component | Cross-fades between two strings on the same line without layout shift. | `npx shadcn@latest add https://framecn.vercel.app/r/text-fade-replace.json` |
| strikethrough-replace | registry:component | Draws a strike line across old text then reveals new text in its place. | `npx shadcn@latest add https://framecn.vercel.app/r/strikethrough-replace.json` |
| staggered-fade-up | registry:component | Words fade in and slide up one after another with a configurable delay. | `npx shadcn@latest add https://framecn.vercel.app/r/staggered-fade-up.json` |
| masked-slide-reveal | registry:component | Words slide up out of an invisible horizontal mask, one after another. | `npx shadcn@latest add https://framecn.vercel.app/r/masked-slide-reveal.json` |
| tracking-in | registry:component | Letter-spacing collapses and blur clears with a springy motion. | `npx shadcn@latest add https://framecn.vercel.app/r/tracking-in.json` |
| shimmer-sweep | registry:component | Light shine sweeps across muted text via background-clip:text. | `npx shadcn@latest add https://framecn.vercel.app/r/shimmer-sweep.json` |
| marker-highlight | registry:component | Colored marker block draws behind a phrase as the text color shifts. | `npx shadcn@latest add https://framecn.vercel.app/r/marker-highlight.json` |
| slot-machine-roll | registry:component | Vertical reel scrolls characters from one value to another. | `npx shadcn@latest add https://framecn.vercel.app/r/slot-machine-roll.json` |
| matrix-decode | registry:component | Random scramble resolves left-to-right into the target text. | `npx shadcn@latest add https://framecn.vercel.app/r/matrix-decode.json` |
| rgb-glitch-text | registry:component | Three RGB-offset text copies jitter for a brief glitch window. | `npx shadcn@latest add https://framecn.vercel.app/r/rgb-glitch-text.json` |
| infinite-marquee | registry:component | Seamlessly looping horizontal text strip with optional stroke style. | `npx shadcn@latest add https://framecn.vercel.app/r/infinite-marquee.json` |
| mesh-gradient-bg | registry:component | Living gradient with amorphous color blobs slowly drifting across the frame. | `npx shadcn@latest add https://framecn.vercel.app/r/mesh-gradient-bg.json` |
| dynamic-grid | registry:component | Subtle moving grid background with configurable cell size and direction. | `npx shadcn@latest add https://framecn.vercel.app/r/dynamic-grid.json` |
| spring-pop-in | registry:component | Elastic spring-driven scale-in wrapper for any child element. | `npx shadcn@latest add https://framecn.vercel.app/r/spring-pop-in.json` |
| simulated-cursor | registry:component | Animated mouse cursor moving between waypoints with click ripple feedback. | `npx shadcn@latest add https://framecn.vercel.app/r/simulated-cursor.json` |
| pulsing-indicator | registry:component | Continuous pulsing dot with ping ring for loading or live states. | `npx shadcn@latest add https://framecn.vercel.app/r/pulsing-indicator.json` |
| directional-wipe | registry:component | Slide one scene in while pushing the other out. | `npx shadcn@latest add https://framecn.vercel.app/r/directional-wipe.json` |
| device-mockup-zoom | registry:component | Pull back from a UI to reveal it inside a device frame. | `npx shadcn@latest add https://framecn.vercel.app/r/device-mockup-zoom.json` |
| zoom-through-transition | registry:component | Aggressively scale into the center of an element. | `npx shadcn@latest add https://framecn.vercel.app/r/zoom-through-transition.json` |
| staggered-bento-grid | registry:component | Cards pop into a bento grid one after another with a spring. | `npx shadcn@latest add https://framecn.vercel.app/r/staggered-bento-grid.json` |
| chat-to-preview-layout | registry:component | Two-column layout where chat shrinks and preview expands. | `npx shadcn@latest add https://framecn.vercel.app/r/chat-to-preview-layout.json` |
| bounding-box-selector | registry:component | Figma-style selection rectangle appears around any element. | `npx shadcn@latest add https://framecn.vercel.app/r/bounding-box-selector.json` |
| animated-line-chart | registry:component | Line chart whose SVG path draws on from left to right with a leading dot. | `npx shadcn@latest add https://framecn.vercel.app/r/animated-line-chart.json` |
| animated-bar-chart | registry:component | Bars spring up from the baseline in a staggered cascade. | `npx shadcn@latest add https://framecn.vercel.app/r/animated-bar-chart.json` |
| terminal-simulator | registry:component | Terminal window that types out commands and rolls old lines off the top. | `npx shadcn@latest add https://framecn.vercel.app/r/terminal-simulator.json` |
| code-diff-wipe | registry:component | Before/after code reveal via clip-path wipe with a handle marker. | `npx shadcn@latest add https://framecn.vercel.app/r/code-diff-wipe.json` |
| toast-notification | registry:component | System-style toast pops in, holds, then slides out. | `npx shadcn@latest add https://framecn.vercel.app/r/toast-notification.json` |
| drag-and-drop-flow | registry:component | Simulated file drag into a dropzone followed by upload progress. | `npx shadcn@latest add https://framecn.vercel.app/r/drag-and-drop-flow.json` |
| progress-steps | registry:component | Multi-step pipeline with sequentially activating nodes and filling lines. | `npx shadcn@latest add https://framecn.vercel.app/r/progress-steps.json` |
| morphing-modal | registry:component | A bento card lifts off the grid and blooms into a full-screen modal driven by a single heavy spring. | `npx shadcn@latest add https://framecn.vercel.app/r/morphing-modal.json` |
| data-flow-pipes | registry:component | Glowing data packets travel along SVG bezier pipes between system nodes, leaving fading trails. | `npx shadcn@latest add https://framecn.vercel.app/r/data-flow-pipes.json` |
| cursor-flow | registry:component | A realistic mouse that arcs along cubic Bezier paths, pauses, and clicks targets that dip in response. | `npx shadcn@latest add https://framecn.vercel.app/r/cursor-flow.json` |
| code-accordion | registry:component | A code window that springs a range of lines closed and replaces them with a "N lines collapsed" placeholder. | `npx shadcn@latest add https://framecn.vercel.app/r/code-accordion.json` |
| glass-code-block | registry:component | A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal. | `npx shadcn@latest add https://framecn.vercel.app/r/glass-code-block.json` |
| spotlight-card | registry:component | A card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder. | `npx shadcn@latest add https://framecn.vercel.app/r/spotlight-card.json` |
| perspective-marquee | registry:component | A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon. | `npx shadcn@latest add https://framecn.vercel.app/r/perspective-marquee.json` |
| success-confetti | registry:component | Deterministic seeded confetti burst with optional headline. | `npx shadcn@latest add https://framecn.vercel.app/r/success-confetti.json` |
| frosted-glass-wipe | registry:component | Elegant scene transition through a sliding pane of frosted glass. | `npx shadcn@latest add https://framecn.vercel.app/r/frosted-glass-wipe.json` |
| kinetic-type-mask | registry:component | Use giant typography as a window into the next scene. | `npx shadcn@latest add https://framecn.vercel.app/r/kinetic-type-mask.json` |
| spatial-push | registry:component | A new scene physically presses the old one back into the frame. | `npx shadcn@latest add https://framecn.vercel.app/r/spatial-push.json` |
| grid-pixelate-wipe | registry:component | Dissolve from one scene to the next through a deterministic grid of mask cells. | `npx shadcn@latest add https://framecn.vercel.app/r/grid-pixelate-wipe.json` |
| chromatic-aberration-wipe | registry:component | An ultra-fast slide transition with an RGB glitch on the peak frames. | `npx shadcn@latest add https://framecn.vercel.app/r/chromatic-aberration-wipe.json` |
| hero-device-assemble | registry:component | Floating device layers spring together into a laptop or phone mockup, then the screen wakes with a shimmer. | `npx shadcn@latest add https://framecn.vercel.app/r/hero-device-assemble.json` |
| ecosystem-constellation | registry:component | A central logo orbited by integration satellites with pulsing data lines. | `npx shadcn@latest add https://framecn.vercel.app/r/ecosystem-constellation.json` |
| ai-generation-canvas | registry:component | A prompt input transforms into a header, then a skeleton dashboard flips into populated cards. | `npx shadcn@latest add https://framecn.vercel.app/r/ai-generation-canvas.json` |
| live-code-compilation | registry:component | Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style. | `npx shadcn@latest add https://framecn.vercel.app/r/live-code-compilation.json` |
| landing-code-showcase | registry:component | Magical split-screen: code types itself on the left while the preview reactively re-renders on the right with sparks and tactile bounce. | `npx shadcn@latest add https://framecn.vercel.app/r/landing-code-showcase.json` |
| pipeline-journey | registry:component | A Kanban ticket arcs across columns triggering landings and a final confetti burst. | `npx shadcn@latest add https://framecn.vercel.app/r/pipeline-journey.json` |
| dashboard-populate | registry:component | An empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill. | `npx shadcn@latest add https://framecn.vercel.app/r/dashboard-populate.json` |
| terminal-to-browser-deploy | registry:component | A CLI deploy completes, the terminal blurs back, and a browser window springs from the deploy URL. | `npx shadcn@latest add https://framecn.vercel.app/r/terminal-to-browser-deploy.json` |
| browser-flow | registry:component | Full Safari/Chrome simulation: typed URL, progress bar, page render, scroll, and a virtual cursor click. | `npx shadcn@latest add https://framecn.vercel.app/r/browser-flow.json` |
| pricing-tier-focus | registry:component | Three pricing cards where the focused tier rises and brightens while siblings dim and blur. | `npx shadcn@latest add https://framecn.vercel.app/r/pricing-tier-focus.json` |
| infinite-bento-pan | registry:component | A camera diagonally drifts across an oversized bento grid behind a soft vignette. | `npx shadcn@latest add https://framecn.vercel.app/r/infinite-bento-pan.json` |
| ai-generate-overlay | registry:component | Source image blurs under a shimmering dot grid and a pulsing 'Generating…' pill before a new image fades in. | `npx shadcn@latest add https://framecn.vercel.app/r/ai-generate-overlay.json` |
| image-expand-to-fullscreen | registry:component | An image lifts out of a feed post and morphs into a fullscreen editor with toolbars sliding in. | `npx shadcn@latest add https://framecn.vercel.app/r/image-expand-to-fullscreen.json` |
| swipe-transition-wipe | registry:component | Two scenes laid out side-by-side flick across the screen with a parallax background and a darkening outgoing layer. | `npx shadcn@latest add https://framecn.vercel.app/r/swipe-transition-wipe.json` |
| product-launch-trailer | registry:component | Cinematic Product Hunt teaser: pulsing logo, zoom-through transition, 3D bento fly-over, and a confetti version drop. | `npx shadcn@latest add https://framecn.vercel.app/r/product-launch-trailer.json` |
| caption-highlight | registry:component | Word-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-highlight.json` |
| caption-pill-karaoke | registry:component | Karaoke-style captions where each word sits inside a pill-shaped background. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-pill-karaoke.json` |
| caption-kinetic-slam | registry:component | Dynamic word-by-word captions: each word pops in with a springy scale/opacity entrance, then drops out in an overlapping ripple. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-kinetic-slam.json` |
| caption-clip-wipe | registry:component | Words reveal left-to-right via clip-path; keywords turn gold on speak; the group exits with a wipe. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-clip-wipe.json` |
| caption-editorial-emphasis | registry:component | Headline-style captions that emphasise specific words using accent colors and weight shifts. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-editorial-emphasis.json` |
| caption-emoji-pop | registry:component | Captions with emoji that pop in alongside words. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-emoji-pop.json` |
| caption-glitch-rgb | registry:component | Captions with a glitchy RGB-split effect on each word. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-glitch-rgb.json` |
| caption-gradient-fill | registry:component | Captions where words fill with a horizontal gradient from left to right. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-gradient-fill.json` |
| caption-matrix-decode | registry:component | Matrix-style green text decodes from blur to sharp on each word. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-matrix-decode.json` |
| caption-neon-accent | registry:component | Captions where words glow with a bright neon accent border and subtle glow. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-neon-accent.json` |
| caption-neon-glow | registry:component | Captions with a neon glow effect on each word. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-neon-glow.json` |
| caption-parallax-layers | registry:component | Multi-layer captions where background and foreground words move at different depths, creating a parallax depth effect. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-parallax-layers.json` |
| caption-particle-burst | registry:component | Captions where each word explodes into particles as it exits. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-particle-burst.json` |
| caption-texture | registry:component | Captions filled with a rich gradient texture that animates across words. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-texture.json` |
| caption-weight-shift | registry:component | Font weight animates from 100 to 900 when each word is spoken, back to thin after. | `npx shadcn@latest add https://framecn.vercel.app/r/caption-weight-shift.json` |
| confetti | registry:component | Deterministic CSS-animated particle burst celebration effect. | `npx shadcn@latest add https://framecn.vercel.app/r/confetti.json` |
| logo-enter | registry:component | Row of overlapping logo circles that spring in one by one. | `npx shadcn@latest add https://framecn.vercel.app/r/logo-enter.json` |
| backdrop | registry:component | Layout wrapper providing a background fill with optional padding, radius, and shadow. | `npx shadcn@latest add https://framecn.vercel.app/r/backdrop.json` |
| top-down-letters | registry:component | Letters animate in from top to bottom. | `npx shadcn@latest add https://framecn.vercel.app/r/top-down-letters.json` |
| blur-out-up | registry:component | Words blur and drift upward while fading out, staggered per word. | `npx shadcn@latest add https://framecn.vercel.app/r/blur-out-up.json` |
| focus-blur-resolve | registry:component | Text resolves into focus from a blurred, shifted state, then blurs back out on exit. | `npx shadcn@latest add https://framecn.vercel.app/r/focus-blur-resolve.json` |
| per-character-rise | registry:component | Characters rise from below with a smooth spring-like easing, staggered one frame apart. | `npx shadcn@latest add https://framecn.vercel.app/r/per-character-rise.json` |
| scale-down-fade | registry:component | Text enters scaling down into place with a fade, then shrinks and fades out. | `npx shadcn@latest add https://framecn.vercel.app/r/scale-down-fade.json` |
| shader-color-panels | registry:component | Overlapping translucent color panels sliding past each other. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-color-panels.json` |
| shader-dithering | registry:component | Ordered-dither shading over an animated gradient field. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-dithering.json` |
| shader-dot-orbit | registry:component | Dots orbiting on concentric paths across the frame. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-dot-orbit.json` |
| shader-god-rays | registry:component | Volumetric light rays radiating from an off-screen source. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-god-rays.json` |
| shader-grain-gradient | registry:component | Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-grain-gradient.json` |
| shader-liquid-metal | registry:component | Molten metallic surface with flowing specular highlights. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-liquid-metal.json` |
| shader-mesh-gradient | registry:component | WebGL mesh gradient backdrop driven per-frame for deterministic Editframe renders. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-mesh-gradient.json` |
| shader-metaballs | registry:component | Organic blobs merging and splitting like lava. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-metaballs.json` |
| shader-neuro-noise | registry:component | Organic neural-web noise field that slowly morphs. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-neuro-noise.json` |
| shader-perlin-noise | registry:component | Classic Perlin noise clouds drifting across the frame. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-perlin-noise.json` |
| shader-pulsing-border | registry:component | Glowing border frame that pulses around the edges. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-pulsing-border.json` |
| shader-simplex-noise | registry:component | Simplex noise flow field, smoother than Perlin. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-simplex-noise.json` |
| shader-smoke-ring | registry:component | Soft smoke ring curling and dissipating in place. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-smoke-ring.json` |
| shader-spiral | registry:component | Rotating spiral arms radiating from the center. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-spiral.json` |
| shader-swirl | registry:component | Concentric bands swirling around a center point. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-swirl.json` |
| shader-voronoi | registry:component | Animated Voronoi cells shifting and re-tessellating. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-voronoi.json` |
| shader-warp | registry:component | Domain-warped color field that folds and stretches like liquid. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-warp.json` |
| shader-water | registry:component | Caustic water-surface ripples with subtle refraction. | `npx shadcn@latest add https://framecn.vercel.app/r/shader-water.json` |

## For AI agents

```text
You are adding components from @framecn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/framecn.md) for the component list.
2. Fetch the machine-readable index: https://framecn.vercel.app/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: framecn).
```