Tategaki Turn

Words drop in as vertical columns, then swing upright into one horizontal line.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TategakiTurn } from "@/components/remocn/tategaki-turn";
 
const TategakiTurnScene = () => <TategakiTurn text="Read it both ways." highlight={3} />;
 
export const RemotionRoot = () => (
  <Composition
    id="TategakiTurn"
    component={TategakiTurnScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word of text drops in as a vertical column, letter by letter. After a hold, the columns swing 90 degrees and travel into a single horizontal line while the type scales up. The highlight word, the last by default, takes the accent color; it ships light and dark through theme.

Props7

Prop	Type	Default
text	string"Read it both ways." The phrase; each word becomes a vertical column.
highlight	number— Index of the word set in the accent color. Defaults to the last.
hold	number16 Frames the vertical columns hold before they turn.
accent	string— Highlight color. Defaults to vermilion.
background	string— Stage color. Overrides the theme background.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark ground; ships both.

textstring
The phrase; each word becomes a vertical column.
Default"Read it both ways."
highlightnumber
Index of the word set in the accent color. Defaults to the last.
holdnumber
Frames the vertical columns hold before they turn.
Default16
accentstring
Highlight color. Defaults to vermilion.
backgroundstring
Stage color. Overrides the theme background.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"