Bracket Index

Indexed bracket labels step through words, then the brackets close around the product name.

Installation

$ pnpm dlx shadcn@latest add @remocn/bracket-index

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BracketIndex } from "@/components/remocn/bracket-index";
 
const BracketIndexScene = () => (
  <BracketIndex
    prefix="Motion for"
    words={["launches", "changelogs", "demos"]}
    product="remocn"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BracketIndex"
    component={BracketIndexScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A prefix phrase sits on screen while brackets open around the first word and roll through each next word, then close around the product name as the prefix steps aside. Pass prefix, words and product; each extra word adds 38 frames. Ships light and dark.

Props6

Prop	Type	Default
prefix	string"Motion for" Text set before the brackets; it steps aside for the product.
words	string[]["launches", "changelogs", "demos"] Words indexed inside the brackets, in order.
product	string"remocn" Final word the brackets close on.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

prefixstring
Text set before the brackets; it steps aside for the product.
Default"Motion for"
wordsstring[]
Words indexed inside the brackets, in order.
Default["launches", "changelogs", "demos"]
productstring
Final word the brackets close on.
Default"remocn"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1