Full Bleed Type

Huge condensed caps words slam in one at a time, the last lit by a sunrise gradient

Installation
$ pnpm dlx shadcn@latest add @remocn/full-bleed-type

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FullBleedType } from "@/components/remocn/full-bleed-type";
 
const FullBleedTypeScene = () => (
  <FullBleedType words={["NO", "DAYS", "OFF", "SHIP"]} beat={11} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FullBleedType"
    component={FullBleedTypeScene}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word slams in huge in condensed caps, one per beat frames, and the last word is lit by a sunrise gradient. Pass words and beat; it ships light and dark.

Props5

PropTypeDefault
words
string[]["NO", "DAYS", "OFF", "SHIP"]

Words in reading order, one slam each. Set in caps; the last one is lit by the sunrise gradient.

beat
number11

Frames between two slams.

theme
"dark" | "light""dark"

Colour scheme; ships light and dark.

speed
number1

Playback multiplier; above 1 plays faster.

accent
string—

Kept for the shared draft API; the hero word takes the "rise" gradient instead.

  • wordsstring[]

    Words in reading order, one slam each. Set in caps; the last one is lit by the sunrise gradient.

    Default["NO", "DAYS", "OFF", "SHIP"]

  • beatnumber

    Frames between two slams.

    Default11

  • theme"dark" | "light"

    Colour scheme; ships light and dark.

    Default"dark"

  • speednumber

    Playback multiplier; above 1 plays faster.

    Default1

  • accentstring

    Kept for the shared draft API; the hero word takes the "rise" gradient instead.