Index List

A numbered feature index draws in row by row, then a gradient band travels down to one highlighted row.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { IndexList } from "@/components/remocn/index-list";
 
const IndexListScene = () => (
  <IndexList
    items={["Scenes", "Captions", "Transitions", "Templates"]}
    title="What is inside 2.0"
    highlight={2}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="IndexList"
    component={IndexListScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Hairline rules draw across and a numbered list rises row by row under a logo and title; a gradient band then wipes in and travels down to the highlight row, where it parks with an arrow while the other rows dim. Pass items, title, the zero-based highlight index, and your own logo node (the default is the Remocn wordmark). It ships light and dark.

Props7

Prop	Type	Default
items	string[]DEFAULT_ITEMS Row labels, numbered automatically; the row height shrinks as you add more.
highlight	number3 Zero-based index of the row the gradient band lands on.
title	string"What’s inside 3.0" Header text shown beside the logo.
logo	React.ReactNode— Header logo node; defaults to the Remocn wordmark, so pass your own.
accent	string"#3B5BFD" Color of the travelling highlight band.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier for the whole timeline.

itemsstring[]
Row labels, numbered automatically; the row height shrinks as you add more.
DefaultDEFAULT_ITEMS
highlightnumber
Zero-based index of the row the gradient band lands on.
Default3
titlestring
Header text shown beside the logo.
Default"What’s inside 3.0"
logoReact.ReactNode
Header logo node; defaults to the Remocn wordmark, so pass your own.
accentstring
Color of the travelling highlight band.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1