Beam Split

A light beam cuts a bold headline in two and a serif italic phrase appears in the gap.

Installation
$ pnpm dlx shadcn@latest add @remocn/beam-split

Usage

tsx
// 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

PropTypeDefault
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

    Default1