Spine Turn

Titles rise in large, then turn 90 degrees to become book spines along the bottom rule.

Installation

$ pnpm dlx shadcn@latest add @remocn/spine-turn

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpineTurn } from "@/components/remocn/spine-turn";
 
const SpineTurnScene = () => <SpineTurn titles={["Kickoff", "Deep dive", "Wrap-up"]} hold={26} />;
 
export const RemotionRoot = () => (
  <Composition
    id="SpineTurn"
    component={SpineTurnScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Each title rises in large over a hairline rule, holds, then rotates 90 degrees and shrinks into a spine at the bottom while the next title enters. The last title stays large. Pass titles and hold; accent and background override the colors, and it ships light and dark through theme.

Props6

Prop	Type	Default
titles	string[]["Kickoff", "Deep dive", "Wrap-up"] Titles in order; each turns into a spine except the last.
hold	number26 Frames each title holds before it turns.
accent	string— Hero title color. Defaults to the theme accent.
background	string— Stage color. Use "transparent" to composite over other layers.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark ground; ships both.

titlesstring[]
Titles in order; each turns into a spine except the last.
Default["Kickoff", "Deep dive", "Wrap-up"]
holdnumber
Frames each title holds before it turns.
Default26
accentstring
Hero title color. Defaults to the theme accent.
backgroundstring
Stage color. Use "transparent" to composite over other layers.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"