Spec Sweep — Remotion one-line spec animation

Q: How do I add Spec Sweep to a Remotion project?

Run npx shadcn@latest add @snapcn/spec-sweep. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

Q: What do I need before using Spec Sweep?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.

Installation

$ pnpm dlx shadcn@latest add @snapcn/spec-sweep

Needs an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.

Component code

The exact file shadcn add copies into your project.

Usage

Spec Sweep paints its own card and runs 75 frames at 30fps. Timing is measured frame by frame off a reference; every word, colour and font is a prop.

import { SpecSweep } from "@/components/snap-cn/spec-sweep";

export const Beat = () => <SpecSweep />;

Frequently asked questions

How do I add Spec Sweep to a Remotion project?

Run npx shadcn@latest add @snapcn/spec-sweep. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.

What is Spec Sweep?

Spec Sweep is a Remotion one-line spec animation for React. A one-line spec slides in word by word while a highlight runs along it and an icon charges up.

What do I need before using Spec Sweep?

An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.