Spec Sheet

A spec table with hairline rows reveals values in turn, then one row expands to feature its value.

Installation

$ pnpm dlx shadcn@latest add @remocn/spec-sheet

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpecSheet } from "@/components/remocn/spec-sheet";
 
const SpecSheetScene = () => (
  <SpecSheet title="Tech specs" highlight={3} rows={[{ label: "Resolution", value: "4K" }, { label: "Frame rate", value: "60 fps" }, { label: "Install", value: "1 command" }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpecSheet"
    component={SpecSheetScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

Hairline rules draw across and the labels and values reveal row by row, the values typing in. Then the highlighted row expands and its value grows in the accent gradient. Pass rows, highlight (row index), title and name (shown in the bottom lockup); it ships light and dark through theme.

Props8

Prop	Type	Default
rows	SpecRow[]DEFAULT_ROWS Table rows, each with a label and a value shown as text.
highlight	number3 Zero-based index of the row that expands.
title	string"Tech specs" Heading shown above the table.
name	string"3.0" Name shown next to the logo in the bottom lockup.
logo	React.ReactNode— React node shown in the lockup instead of the default Remocn logo.
accent	string"#3B5BFD" Accent color for highlights and small marks.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
speed	number1 Playback speed multiplier for the whole timeline.

rowsSpecRow[]
Table rows, each with a label and a value shown as text.
DefaultDEFAULT_ROWS
highlightnumber
Zero-based index of the row that expands.
Default3
titlestring
Heading shown above the table.
Default"Tech specs"
namestring
Name shown next to the logo in the bottom lockup.
Default"3.0"
logoReact.ReactNode
React node shown in the lockup instead of the default Remocn logo.
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1