Walkout Name

A fighter-style name stack slams in line by line, then a light band, record and nickname arrive

Installation

$ pnpm dlx shadcn@latest add @remocn/walkout-name

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WalkoutName } from "@/components/remocn/walkout-name";
 
const WalkoutNameScene = () => (
  <WalkoutName
    name={["The", "Launch", "Kid"]}
    nickname="Zero downtime"
    record="40–2"
    finishes="31 KO"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WalkoutName"
    component={WalkoutNameScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The name whips in as an extreme close-up of line one, hard-cuts to line two, then slams down line three with an inverted impact frame and shake. The camera pulls out, a light band sweeps across the stack, the record and finishes stats punch in, and the serif nickname wipes in beside the last line. Pass name (three short lines read best), nickname, record and finishes to make it yours; it ships light and dark through theme.

Props9

Prop	Type	Default
name	string[]["The", "Launch", "Kid"] Stacked name lines, one per entry; three short lines read best.
nickname	string"Ships before lunch" Serif italic nickname in quotes, beside the last line.
record	string"12–0" Record text slammed in beside the name.
finishes	string"12 KO" Second stat under the record, filled with the spotlight gradient.
recordLabel	string"Pro record" Small label above the record.
billing	string"Main event · Tonight" Small billing line at the top left.
accent	string"#3B5BFD" Color of the billing tick and the record rule.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

namestring[]
Stacked name lines, one per entry; three short lines read best.
Default["The", "Launch", "Kid"]
nicknamestring
Serif italic nickname in quotes, beside the last line.
Default"Ships before lunch"
recordstring
Record text slammed in beside the name.
Default"12–0"
finishesstring
Second stat under the record, filled with the spotlight gradient.
Default"12 KO"
recordLabelstring
Small label above the record.
Default"Pro record"
billingstring
Small billing line at the top left.
Default"Main event · Tonight"
accentstring
Color of the billing tick and the record rule.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1