Full Bleed Type
Huge condensed caps words slam in one at a time, the last lit by a sunrise gradient
$ pnpm dlx shadcn@latest add @remocn/full-bleed-typeUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
11 - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark" - speednumber
Playback multiplier; above 1 plays faster.
Default
1 - accentstring
Kept for the shared draft API; the hero word takes the "rise" gradient instead.