Introduction

Install a component

You need a Remotion 4 project with a components.json (run npx shadcn@latest init once). Then add any component by its registry URL. The CLI writes the source into your project and installs its dependencies.

npx shadcn@latest add https://motionz.dev/r/title-card.json

import { Composition } from "remotion";
import { TitleCard } from "@/components/title-card";

export const RemotionRoot = () => (
  <Composition
    id="Intro"
    component={TitleCard}
    width={1920}
    height={1080}
    fps={60}
    durationInFrames={180}
    defaultProps={{ lines: ["Make it move.", "One beat at a time."] }}
  />
);

Conventions

• Everything is driven by the frame, never by time or effects, so renders are deterministic.
• Timing props are in frames, relative to the enclosing Sequence. Demos run at 1920×1080, 60fps.
• Place presses and pops on a beat grid. At 90 BPM a beat is 40 frames at 60fps; use the Beat Grid helpers rather than raw numbers.
• Components inherit your typeface. Nothing ships with brand logos; pass your own mark or use a letter badge.
• Each component has an agent skill (skills/<name>/SKILL.md) that tells a coding agent when to reach for it and how to time it.