Italic Speed

A slanted caps word rides in on speed strips, with a serif italic subtitle under an underline.

Installation

$ pnpm dlx shadcn@latest add @remocn/italic-speed

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ItalicSpeed } from "@/components/remocn/italic-speed";
 
const ItalicSpeedScene = () => (
  <ItalicSpeed title="FASTER" subtitle="Ship at race pace." accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ItalicSpeed"
    component={ItalicSpeedScene}
    durationInFrames={84}
    fps={30}
    width={1280}
    height={720}
  />
);

The word leans in from the side on speed strips, locks upright with an underline, and a serif italic subtitle fades in below. Pass title (set in capitals) and subtitle; it ships light and dark through theme.

Props5

Prop	Type	Default
title	string"FASTER" Word shown in slanted capitals
subtitle	string"Ship at race pace." Serif italic line under the underline
accent	string"#3B5BFD" Accent color (any valid CSS color)
theme	"dark" \| "light""dark" Ships light and dark palettes
speed	number1 Playback speed multiplier

titlestring
Word shown in slanted capitals
Default"FASTER"
subtitlestring
Serif italic line under the underline
Default"Ship at race pace."
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark palettes
Default"dark"
speednumber
Playback speed multiplier
Default1