# framecn > A collection of beautifully designed, and customizable video components. Built on Editframe. Works with shadcn/ui. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing. ## Docs - Get Started - [Introduction](https://www.framecn.dev/docs.md): Copy-paste video components for React. Built on Editframe, works with the shadcn CLI. - [Installation](https://www.framecn.dev/docs/installation.md): Install video components from the registry. - [MCP](https://www.framecn.dev/docs/mcp.md): Learn how to use the shadcn MCP (Model Context Protocol) server with framecn. - [Registry](https://www.framecn.dev/docs/registry.md): Learn how to use the framecn registry with the shadcn CLI. - Changelog - [Changelog](https://www.framecn.dev/docs/changelog.md): Latest updates and announcements. - [May 4, 2026 - Initial Release](https://www.framecn.dev/docs/changelog/2026-05-04-initial-release.md): First release of framecn with 61 video components and customizer. - [June 15, 2026 - Caption Components](https://www.framecn.dev/docs/changelog/2026-06-15-caption-components.md): 11 new caption components for animated video text effects. - [June 26, 2026 - Primitives, Transitions & Typography](https://www.framecn.dev/docs/changelog/2026-06-26-primitives-transitions-typography.md): 19 new components across primitives, transitions, and typography categories. - [July 2, 2026 - Shader Components](https://www.framecn.dev/docs/changelog/2026-07-02-shader-components.md): 18 new WebGL shader components powered by paper-design/shaders, with a dedicated docs section. - Components - [Components](https://www.framecn.dev/docs/components.md): Here you can find all the video components available in the library. - Captions - [Clip Wipe](https://www.framecn.dev/docs/components/captions/clip-wipe.md): Words reveal left-to-right via clip-path; keywords turn gold on speak; the group exits with a wipe. - [Editorial Emphasis](https://www.framecn.dev/docs/components/captions/editorial-emphasis.md): Editorial two-font layout — normal Inter text with oversized italic Playfair Display for key words. - [Emoji Pop](https://www.framecn.dev/docs/components/captions/emoji-pop.md): Word groups with a contextual emoji above, spring scale-in/out animation. - [Glitch RGB](https://www.framecn.dev/docs/components/captions/glitch-rgb.md): RGB channel separation red+cyan text-shadow glitch effect on each word entry. - [Gradient Fill](https://www.framecn.dev/docs/components/captions/gradient-fill.md): Siri-style gradient sweeps across text via background-clip on each word speaking window. - [Highlight](https://www.framecn.dev/docs/components/captions/highlight.md): Word-by-word captions with an accent-colored highlight background that sweeps in behind each spoken word. - [Captions](https://www.framecn.dev/docs/components/captions.md): Word-level caption components for video — karaoke highlights, kinetic type, and animated overlays. - [Kinetic Slam](https://www.framecn.dev/docs/components/captions/kinetic-slam.md): One word at a time, uppercase centered, slams in from above and scales down to rest. - [Matrix Decode](https://www.framecn.dev/docs/components/captions/matrix-decode.md): Matrix-style green monospace text that decodes from blurry/bright to sharp using a stepped animation. - [Neon Accent](https://www.framecn.dev/docs/components/captions/neon-accent.md): Normal words with accent keywords at 1.5x size and a neon glow text-shadow. - [Neon Glow](https://www.framecn.dev/docs/components/captions/neon-glow.md): All words start at 14% opacity neon; they burst to full glow when spoken. - [Parallax Layers](https://www.framecn.dev/docs/components/captions/parallax-layers.md): Two depth layers — large translucent italic text behind, clean text in front. - [Particle Burst](https://www.framecn.dev/docs/components/captions/particle-burst.md): Words dim at 40% opacity; a colored burst ring expands outward when each word is spoken. - [Pill Karaoke](https://www.framecn.dev/docs/components/captions/pill-karaoke.md): Karaoke-style captions in a rounded pill container — active word snaps to full contrast, others stay dimmed. - [Texture](https://www.framecn.dev/docs/components/captions/texture.md): Lava-texture fill via layered radial-gradients and background-clip: text, kinetic-slam style. - [Weight Shift](https://www.framecn.dev/docs/components/captions/weight-shift.md): Font weight animates from 100 to 900 when each word is spoken, back to thin after. - Compositions - [Compositions](https://www.framecn.dev/docs/components/compositions.md): Full scenes built by composing primitives and UI blocks. - [Hero Device Assemble](https://www.framecn.dev/docs/components/compositions/hero-device-assemble.md): Floating device layers spring into a laptop or phone, then the screen wakes with a shimmer. - [Ecosystem Constellation](https://www.framecn.dev/docs/components/compositions/ecosystem-constellation.md): Central logo orbited by integration satellites with pulsing data lines. - [Infinite Bento Pan](https://www.framecn.dev/docs/components/compositions/infinite-bento-pan.md): Camera diagonally drifts across an oversized bento grid behind a soft vignette. - [Product Launch Trailer](https://www.framecn.dev/docs/components/compositions/product-launch-trailer.md): Cinematic product reveal trailer animation. - [Browser Flow](https://www.framecn.dev/docs/components/compositions/browser-flow.md): Full Safari/Chrome simulation: URL typing, loading bar, scroll, and click. - [AI Generation Canvas](https://www.framecn.dev/docs/components/compositions/ai-generation-canvas.md): Prompt input morphs into a header, then a skeleton dashboard flips into populated cards. - [AI Generate Overlay](https://www.framecn.dev/docs/components/compositions/ai-generate-overlay.md): Overlay UI for AI content generation with prompt input and result display. - [Live Code Compilation](https://www.framecn.dev/docs/components/compositions/live-code-compilation.md): Split-screen where typed code on the left snaps a live UI preview on the right. - [Terminal To Browser Deploy](https://www.framecn.dev/docs/components/compositions/terminal-to-browser-deploy.md): CLI deploy completes, terminal blurs back, and a browser window springs from the deploy URL. - [Image Expand To Fullscreen](https://www.framecn.dev/docs/components/compositions/image-expand-to-fullscreen.md): Image expands from thumbnail to fullscreen with smooth transition. - [Dashboard Populate](https://www.framecn.dev/docs/components/compositions/dashboard-populate.md): Empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill. - [Pipeline Journey](https://www.framecn.dev/docs/components/compositions/pipeline-journey.md): Kanban ticket flies between columns, triggering events on landing. - [Pricing Tier Focus](https://www.framecn.dev/docs/components/compositions/pricing-tier-focus.md): Three pricing cards where the focused tier rises and brightens while siblings dim and blur. - [Landing Code Showcase](https://www.framecn.dev/docs/components/compositions/landing-code-showcase.md): Code snippet showcase for landing pages. - Environment - [Environment & Lighting](https://www.framecn.dev/docs/components/environment.md): Backgrounds, lighting, and atmosphere for your scenes. - [Mesh Gradient Background](https://www.framecn.dev/docs/components/environment/mesh-gradient-bg.md): Living gradient where soft color blobs drift on noise-driven coordinates. - [Dynamic Grid](https://www.framecn.dev/docs/components/environment/dynamic-grid.md): Subtle moving grid or dot pattern background. - [Spotlight Card](https://www.framecn.dev/docs/components/environment/spotlight-card.md): Cursor-tracked radial light that rims a card and lifts it from the dark. - Getting Started - [Getting Started](https://www.framecn.dev/docs/components/getting-started.md): Learn how to set up and use Framecn in your Next.js project. - Core Primitives - [Core Primitives](https://www.framecn.dev/docs/components/primitives.md): Foundational micro-interactions and reusable building blocks. - [Spring Pop In](https://www.framecn.dev/docs/components/primitives/spring-pop-in.md): Elastic scale pop with configurable overshoot. - [Pulsing Indicator](https://www.framecn.dev/docs/components/primitives/pulsing-indicator.md): Continuous sine-driven pulse for loading or activity states. - [Success Confetti](https://www.framecn.dev/docs/components/primitives/success-confetti.md): Deterministic particle burst from a chosen origin point. - [Cursor Flow](https://www.framecn.dev/docs/components/primitives/cursor-flow.md): Realistic mouse that arcs along Bezier paths and clicks targets. - [Simulated Cursor](https://www.framecn.dev/docs/components/primitives/simulated-cursor.md): A simulated cursor with click animations and movement. - [Bounding Box Selector](https://www.framecn.dev/docs/components/primitives/bounding-box-selector.md): Figma-style selection rectangle that snaps around a target. - [Toast Notification](https://www.framecn.dev/docs/components/primitives/toast-notification.md): System toast that springs in, holds, and slides away. - [Backdrop](https://www.framecn.dev/docs/components/primitives/backdrop.md): A layout wrapper with configurable background fill, padding, and border radius. - [Confetti](https://www.framecn.dev/docs/components/primitives/confetti.md): Deterministic particle burst with configurable power, gravity, and seed. - [Logo Enter](https://www.framecn.dev/docs/components/primitives/logo-enter.md): A row or column of overlapping logo circles that spring in one by one. - Transitions - [Transitions](https://www.framecn.dev/docs/components/transitions.md): Scene transitions, camera moves, and stylized wipes. - [Zoom Through Transition](https://www.framecn.dev/docs/components/transitions/zoom-through-transition.md): Aggressive scale-in through an element to the next scene. - [Device Mockup Zoom](https://www.framecn.dev/docs/components/transitions/device-mockup-zoom.md): Pull back from a UI to reveal it inside a phone or laptop frame. - [Morphing Modal](https://www.framecn.dev/docs/components/transitions/morphing-modal.md): Card lifts off a grid and expands into a full-screen modal. - [Directional Wipe](https://www.framecn.dev/docs/components/transitions/directional-wipe.md): Slide one scene in while pushing the other out. - [Spatial Push](https://www.framecn.dev/docs/components/transitions/spatial-push.md): A new scene physically presses the old one back into the frame. - [Frosted Glass Wipe](https://www.framecn.dev/docs/components/transitions/frosted-glass-wipe.md): Elegant scene transition through a sliding pane of frosted glass. - [Kinetic Type Mask](https://www.framecn.dev/docs/components/transitions/kinetic-type-mask.md): Use giant typography as a window into the next scene. - [Swipe Transition Wipe](https://www.framecn.dev/docs/components/transitions/swipe-transition-wipe.md): Quick swipe transition between scenes. - [Grid Pixelate Wipe](https://www.framecn.dev/docs/components/transitions/grid-pixelate-wipe.md): Dissolve from one scene to the next through a deterministic grid of mask cells. - [Chromatic Aberration Wipe](https://www.framecn.dev/docs/components/transitions/chromatic-aberration-wipe.md): An ultra-fast slide transition with an RGB glitch on the peak frames. - [Fade Through](https://www.framecn.dev/docs/components/transitions/fade-through.md): One text fades out while a new one fades in with a slight blur and motion offset. - [Per Word Crossfade](https://www.framecn.dev/docs/components/transitions/per-word-crossfade.md): Words exit one by one, then new words enter word by word with a slight stagger. - [Shared Axis Y](https://www.framecn.dev/docs/components/transitions/shared-axis-y.md): A snappy word-by-word opacity flip using stepped easing for a punchy snap effect. - [Shared Axis Z](https://www.framecn.dev/docs/components/transitions/shared-axis-z.md): Text scales up and fades out while new text scales in from small, simulating depth on the Z axis. - Typography - [Typography](https://www.framecn.dev/docs/components/typography.md): Text effects, reveals, and kinetic type for your videos. - [Blur Reveal](https://www.framecn.dev/docs/components/typography/blur-reveal.md): Text fades in from a heavy blur into sharp focus. - [Staggered Fade Up](https://www.framecn.dev/docs/components/typography/staggered-fade-up.md): Words rise from below with a soft cascading delay. - [Masked Slide Reveal](https://www.framecn.dev/docs/components/typography/masked-slide-reveal.md): Lines grow out from behind an invisible horizontal mask. - [Tracking In](https://www.framecn.dev/docs/components/typography/tracking-in.md): Letter-spacing collapses from wide to normal with a spring snap. - [Inline Highlight](https://www.framecn.dev/docs/components/typography/inline-highlight.md): Animates one word inside a sentence from a base color to a brand color. - [Marker Highlight](https://www.framecn.dev/docs/components/typography/marker-highlight.md): Marker bar sweeps in behind a phrase, optionally inverting the text color. - [Shimmer Sweep](https://www.framecn.dev/docs/components/typography/shimmer-sweep.md): Bright gradient sweeps across dim text, lighting it up. - [Typewriter](https://www.framecn.dev/docs/components/typography/typewriter.md): Character-by-character text reveal with a deterministic blinking cursor. - [Text Fade Replace](https://www.framecn.dev/docs/components/typography/text-fade-replace.md): Cross-fades between two strings on the same line. Includes a Strikethrough variant. - [Slot Machine Roll](https://www.framecn.dev/docs/components/typography/slot-machine-roll.md): Numbers and characters roll into place like a casino reel. - [Infinite Marquee](https://www.framecn.dev/docs/components/typography/infinite-marquee.md): Endlessly scrolling horizontal text band. - [Perspective Marquee](https://www.framecn.dev/docs/components/typography/perspective-marquee.md): Marquee tilted into 3D space with depth fade. - [Matrix Decode](https://www.framecn.dev/docs/components/typography/matrix-decode.md): Random characters scramble and resolve into the target string. - [RGB Glitch Text](https://www.framecn.dev/docs/components/typography/rgb-glitch-text.md): Three-channel RGB split with a brief horizontal jitter. - [Strikethrough Replace](https://www.framecn.dev/docs/components/typography/strikethrough-replace.md): Text gets crossed out and replaced with new text in a single motion. - [Blur Out Up](https://www.framecn.dev/docs/components/typography/blur-out-up.md): Words blur and drift upward on exit, with a smooth fade-in entrance. - [Bottom Up Letters](https://www.framecn.dev/docs/components/typography/bottom-up-letters.md): Each letter rises from below with a staggered fade-in cascade. - [Top Down Letters](https://www.framecn.dev/docs/components/typography/top-down-letters.md): Each letter falls from above with a staggered fade-in cascade. - [Per Character Rise](https://www.framecn.dev/docs/components/typography/per-character-rise.md): Characters rise from below with a smooth spring-like easing, staggered one frame apart. - [Soft Blur In](https://www.framecn.dev/docs/components/typography/soft-blur-in.md): Characters fade in through a soft blur and upward drift, staggered one frame apart. - [Micro Scale Fade](https://www.framecn.dev/docs/components/typography/micro-scale-fade.md): The entire text scales in from a subtle size with a smooth fade, perfect for clean entrances. - [Scale Down Fade](https://www.framecn.dev/docs/components/typography/scale-down-fade.md): Text enters scaling down into place with a fade, then shrinks and fades out. - [Focus Blur Resolve](https://www.framecn.dev/docs/components/typography/focus-blur-resolve.md): Text resolves into focus from a blurred, shifted state, then blurs back out on exit. - [Spring Scale In](https://www.framecn.dev/docs/components/typography/spring-scale-in.md): Words pop in one by one with an overshoot spring scale effect. - [Line by Line Slide](https://www.framecn.dev/docs/components/typography/line-by-line-slide.md): Multi-line text slides in from the left line by line, then slides out to the right. - [Mask Reveal Up](https://www.framecn.dev/docs/components/typography/mask-reveal-up.md): Lines rise up from below through a blur, then exit upward with a blur on each line. - [Short Slide Right](https://www.framecn.dev/docs/components/typography/short-slide-right.md): The text group slides in from the left while individual words fade in with a stagger. - UI Blocks - [UI Blocks](https://www.framecn.dev/docs/components/ui-blocks.md): Pre-assembled interface elements — code editors, layouts, charts, and workflow visualizations. - [Glass Code Block](https://www.framecn.dev/docs/components/ui-blocks/glass-code-block.md): Premium frosted-glass code window with rim light and traffic-light controls. - [Terminal Simulator](https://www.framecn.dev/docs/components/ui-blocks/terminal-simulator.md): CLI build simulation with chunked log output and step-function scrolling. - [Code Accordion](https://www.framecn.dev/docs/components/ui-blocks/code-accordion.md): Long code blocks collapse mid-section, hiding noise behind a count badge. - [Code Diff Wipe](https://www.framecn.dev/docs/components/ui-blocks/code-diff-wipe.md): Before/after comparison with a clip-path slider revealing the new code. - [Staggered Bento Grid](https://www.framecn.dev/docs/components/ui-blocks/staggered-bento-grid.md): Bento grid where cards cascade in with per-cell sequences. - [Chat To Preview Layout](https://www.framecn.dev/docs/components/ui-blocks/chat-to-preview-layout.md): Chat input transforms into a preview layout. - [Animated Line Chart](https://www.framecn.dev/docs/components/ui-blocks/animated-line-chart.md): SVG line chart drawn left-to-right via stroke-dashoffset. - [Animated Bar Chart](https://www.framecn.dev/docs/components/ui-blocks/animated-bar-chart.md): Bars spring up from the baseline with deterministic stagger. - [Data Flow Pipes](https://www.framecn.dev/docs/components/ui-blocks/data-flow-pipes.md): Glowing data packets fly along SVG pipes with trailing tails. - [Progress Steps](https://www.framecn.dev/docs/components/ui-blocks/progress-steps.md): Multi-step pipeline visualization with line fill and pulsing dots. - [Drag And Drop Flow](https://www.framecn.dev/docs/components/ui-blocks/drag-and-drop-flow.md): Cursor drags a file into a drop zone that lights up and starts a progress bar. - Shaders - [Shaders](https://www.framecn.dev/docs/shaders.md): WebGL shader backdrops from paper-design/shaders, adapted for Editframe timeline rendering. - Components - [Color Panels](https://www.framecn.dev/docs/shaders/components/color-panels.md): Overlapping translucent color panels sliding past each other. - [Dithering](https://www.framecn.dev/docs/shaders/components/dithering.md): Ordered-dither shading over an animated gradient field. - [Dot Orbit](https://www.framecn.dev/docs/shaders/components/dot-orbit.md): Dots orbiting on concentric paths across the frame. - [God Rays](https://www.framecn.dev/docs/shaders/components/god-rays.md): Volumetric light rays radiating from an off-screen source. - [Grain Gradient](https://www.framecn.dev/docs/shaders/components/grain-gradient.md): Grainy multi-stop gradient that drifts slowly with film-grain texture over the blend. - [Liquid Metal](https://www.framecn.dev/docs/shaders/components/liquid-metal.md): Molten metallic surface with flowing specular highlights. - [Mesh Gradient](https://www.framecn.dev/docs/shaders/components/mesh-gradient.md): WebGL mesh gradient backdrop driven per-frame for deterministic Editframe renders. - [Metaballs](https://www.framecn.dev/docs/shaders/components/metaballs.md): Organic blobs merging and splitting like lava. - [Neuro Noise](https://www.framecn.dev/docs/shaders/components/neuro-noise.md): Organic neural-web noise field that slowly morphs. - [Perlin Noise](https://www.framecn.dev/docs/shaders/components/perlin-noise.md): Classic Perlin noise clouds drifting across the frame. - [Pulsing Border](https://www.framecn.dev/docs/shaders/components/pulsing-border.md): Glowing border frame that pulses around the edges. - [Simplex Noise](https://www.framecn.dev/docs/shaders/components/simplex-noise.md): Simplex noise flow field, smoother than Perlin. - [Smoke Ring](https://www.framecn.dev/docs/shaders/components/smoke-ring.md): Soft smoke ring curling and dissipating in place. - [Spiral](https://www.framecn.dev/docs/shaders/components/spiral.md): Rotating spiral arms radiating from the center. - [Swirl](https://www.framecn.dev/docs/shaders/components/swirl.md): Concentric bands swirling around a center point. - [Voronoi](https://www.framecn.dev/docs/shaders/components/voronoi.md): Animated Voronoi cells shifting and re-tessellating. - [Warp](https://www.framecn.dev/docs/shaders/components/warp.md): Domain-warped color field that folds and stretches like liquid. - [Water](https://www.framecn.dev/docs/shaders/components/water.md): Caustic water-surface ripples with subtle refraction. ## Machine-readable Resources - [Full documentation](https://www.framecn.dev/llms-full.txt) - [Homepage markdown](https://www.framecn.dev/llms.md/content.md) - [OpenAPI description](https://www.framecn.dev/openapi.json) - [API catalog](https://www.framecn.dev/.well-known/api-catalog) - [Agent skill](https://www.framecn.dev/.well-known/agent-skills/site-skill.md) - [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)