Type Repeater

$ pnpm dlx shadcn@latest add @remocn/type-repeater

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { TypeRepeater } from "@/components/remocn/type-repeater";
 
const Beat = () => (
  <AbsoluteFill style={{ backgroundColor: "#ff4d1a" }}>
    <TypeRepeater text="Repeat" mode="tunnel" color="#111111" accent="#fafafa" />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="TypeRepeater"
    component={Beat}
    durationInFrames={100}
    fps={30}
    width={1280}
    height={720}
  />
);

Copy 0 is the word itself and never moves. Every further copy gets one more step of the mode's transform, scaled by the spread:

• tunnel grows each copy by 1.2× around the center, a zoom tunnel behind the word.
• spiral grows each copy by 1.1× and turns it 12°.
• fan turns copies 11° to alternating sides around a pivot below the word.

The word comes in over ten frames. The spread opens over frames 10 to 34 with a small overshoot, breathes by 6% until frame 70, and folds back to zero by frame 90. Copies step from color toward accent and fade with their index. With outline on, the copies are outlines built from their filled glyphs by an SVG filter, which keeps the variable font's overlapping contours out of sight.

The component paints no background and centers the word in its parent. Sizes scale with height / 720.