Beautiful videos, made simple.

See it in motion

• TextPro

  Kinetic Text

  One script, cut into the frames it is spoken in: `|` breaks a scene and `*stars*` mark the words that carry it — set large, coloured, and riding a wave while the rest stands still.

  Copy
• Captions

  Pill Karaoke

  Lowercase captions in a rounded pill — spoken words darken cumulatively as the phrase is read.

  Copy
• CarouselsPro

  Album Carousel

  Album covers on a 3D cylinder, dead centre: the playing cover square to the camera, its neighbours turned edge-on at the sides, a queue of tiny covers in the gaps. Each skip eases back, spins with motion blur and settles — and it loops seamlessly.

  Copy
• 3D & GlobesPro

  Route Globe

  A dotted-land globe turning on its axis while lifted great-circle routes draw themselves across it — a glowing head leading each line, endpoints popping in and the destination pulsing on arrival. Every route is keyed to the turn, so one revolution is a seamless loop.

  Copy
• ChartsPro

  Bar Chart

  One number, a row of glass columns, one camera move: the bars stand on a pool of light and rise one by one as the camera dollies past — each flashing the accent as it lands, the big number counting bar to bar — then the tallest lights up for good, the camera pushes in on it, and cranes up to the whole row. Real 3D, empty to empty, so it loops.

  Copy
• CompositionsPro

  Node Reveal

  A wordmark splits apart as a design node scales up from nothing between the two words.

  Copy

How it works

1. 01

   Install with the shadcn CLI

   Add any component from the registry. The source lands in components/framecn, so you own every line.

   npx shadcn@latest add @framecn/caption-highlight

2. 02

   Customize props live

   Tune words, timing, and color live in the browser. Copy prompt hands your AI agent the install command and your exact props.

   import { CaptionHighlight } from "@/components/framecn/caption-highlight";
   
   export function Subtitles() {
     return <CaptionHighlight highlightColor="#f06292" wordsPerGroup={4} />;
   }

3. 03

   Render to MP4 with Editframe

   Components run on the Editframe timeline, so the preview and the rendered frames match exactly.

   npx @editframe/cli render -o intro.mp4