Beam Split
A light beam cuts a bold headline in two and a serif italic phrase appears in the gap.
$ pnpm dlx shadcn@latest add @remocn/beam-splitUsage
// src/Root.tsx
import { Composition } from "remotion";
import { BeamSplit } from "@/components/remocn/beam-split";
const BeamSplitScene = () => (
<BeamSplit title="Ship the story" inner="with motion you own" accent="#3B5BFD" />
);
export const RemotionRoot = () => (
<Composition
id="BeamSplit"
component={BeamSplitScene}
durationInFrames={150}
fps={30}
width={1280}
height={720}
/>
);A bold title rises, a thin beam draws across its middle and pushes the halves apart, and the italic phrase fades in between before the gap closes again. Pass title and inner to set the two texts; it ships light and dark through theme.
Props5
| Prop | Type | Default |
|---|---|---|
| title | string"Ship the story" Bold headline that is split by the beam | |
| inner | string"with motion you own" Serif italic phrase shown inside the opened gap | |
| accent | string"#3B5BFD" Accent color (any valid CSS color) | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
| speed | number1 Playback speed multiplier | |
- titlestring
Bold headline that is split by the beam
Default
"Ship the story" - innerstring
Serif italic phrase shown inside the opened gap
Default
"with motion you own" - accentstring
Accent color (any valid CSS color)
Default
"#3B5BFD" - theme"dark" | "light"
Ships light and dark palettes
Default
"dark" - speednumber
Playback speed multiplier
Default
1