For the complete documentation index, see 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.
/
145
Sponsor

Installation

Install video components and UI primitives from the registry.

Prerequisites

A project with Editframe set up.

Video components

Run the following command to add any video component:

$ pnpm dlx shadcn@latest add @framecn/cursor-flow

Import and use the component:

import { CursorFlow } from "@/components/framecn/cursor-flow";
 
export function DemoVideo() {
  return <CursorFlow />;
}

UI primitives

UI components and blocks install the same way. The shared framecn-ui core installs automatically as a registryDependencies entry — you do not need to install it separately.

$ pnpm dlx shadcn@latest add @framecn/button

Blocks pull in nested primitives automatically:

$ pnpm dlx shadcn@latest add @framecn/chat-flow

What gets written

PathContents
components/framecn/<name>.tsxThe component or block
components/framecn/use-<name>-transition.tsTransition hook for smooth motion (UI components)
lib/framecn-ui/Shared core — timeline helpers, theme, color utilities, motion helpers

All files are copied into your project. You own the code — edit any file freely to suit your video.

UI usage

Import and wrap in a Timegroup:

import { Timegroup } from "@editframe/react";
import { Button } from "@/components/framecn/button";
 
export function Scene() {
  return (
    <Timegroup duration="3s" mode="fixed">
      <Button
        from="idle"
        state="success"
        duration="24frames"
        label="Continue"
      />
    </Timegroup>
  );
}

See Concepts for the UI mental model.