Title Sweep — Remotion gradient end title

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

Run npx shadcn@latest add @snapcn/title-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 Title 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/title-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

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

import { TitleSweep } from "@/components/snap-cn/title-sweep";

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

Frequently asked questions

How do I add Title Sweep to a Remotion project?

Run npx shadcn@latest add @snapcn/title-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 Title Sweep?

Title Sweep is a Remotion gradient end title for React. An end title lit by a gradient that travels through the letters, cuts in the dark, and a second title takes over.

What do I need before using Title 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.