# Introduction

Copy-paste video components for React. Built on Editframe, works with the shadcn CLI.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

**framecn** provides beautifully crafted, production-ready video components for React. Built on [Editframe](https://editframe.com/) and designed to work seamlessly with the [shadcn CLI](https://ui.shadcn.com).

## Philosophy

framecn follows the shadcn model — but for video. Components are yours to copy, own, and customize. No runtime lock-in, no black-box abstractions. Just composable Editframe scenes that drop into your stack.

Video in product work is often an afterthought — stitched together from stock clips or half-finished motion presets. framecn takes a different approach. Every component is a self-contained, time-based composition: animated in code, renderable to MP4, and built to match the precision of your UI design system.

The goal is simple: make video feel like the rest of your stack — composable, themeable, and easy to customize.

## Why framecn?

Most video tooling forces you to choose between full creative control and developer ergonomics. framecn is built for teams that want both:

- **Own Your Code:** Copy components into your project and customize everything — timing, easing, colors, copy.
- **Start Fast:** Run one command and render your first video scene with production-ready defaults.
- **Scale Safely:** Compose primitives into full sequences, or drop to raw Editframe APIs when you need more control.

## What's Included

framecn ships components across six categories:

- **Primitives** — Time-based atoms: cursors, confetti, spring animations, bounding boxes, and indicators.
- **Compositions** — Full scenes ready to render: deploy flows, dashboard populates, AI generation beats, hero reveals.
- **Transitions** — Scene-to-scene motion: wipes, zooms, kinetic masks, chromatic aberrations, and spatial pushes.
- **Typography** — Animated text: typewriters, marquees, glitch decodes, shimmer sweeps, and staggered reveals.
- **UI Blocks** — Animated product UI: charts, code diffs, drag-and-drop flows, terminal simulators, bento grids.
- **Environment & Lighting** — Atmospheric backgrounds: mesh gradients, dynamic grids, spotlight cards.

## Features

<div className="not-prose grid gap-4 sm:grid-cols-2 mt-4">
  <FeatureCard
    icon={ZapIcon}
    title="Zero config"
    description="Works out of the box with sensible defaults. No boilerplate needed."
  />
  <FeatureCard
    icon={ClipboardCopyIcon}
    title="Copy & Paste"
    description="Own your code. No runtime dependencies, just install into your project."
  />
  <FeatureCard
    icon={LayoutGridIcon}
    title="Composable"
    description="Build full video sequences by stacking primitives, compositions, and transitions."
  />
  <FeatureCard
    icon={Code2Icon}
    title="TypeScript"
    description="Full type safety with comprehensive TypeScript support."
  />
  <FeatureCard
    icon={BlocksIcon}
    title="shadcn Compatible"
    description="Uses the same registry format — add components with npx shadcn add."
  />
  <FeatureCard
    icon={SparklesIcon}
    title="MCP Ready"
    description="Register the shadcn MCP server and ask your IDE to assemble video scenes directly."
  />
</div>

  ZapIcon,
  ClipboardCopyIcon,
  LayoutGridIcon,
  Code2Icon,
  BlocksIcon,
  SparklesIcon,
} from "lucide-react";