# 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.
- Components
  - [Components](https://www.framecn.dev/docs/components.md): Here you can find all the video components available in the library.
  - 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.
    - [Changelog Bite](https://www.framecn.dev/docs/components/compositions/changelog-bite.md): Short changelog entry animation for product updates.
  - 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.
  - 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.
  - 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.
  - 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.

## 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)