Which Means

A feature tag leads into a chain of consequences, each introduced by a hinge phrase.

Installation

$ pnpm dlx shadcn@latest add @remocn/which-means

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WhichMeans } from "@/components/remocn/which-means";
 
const WhichMeansScene = () => (
  <WhichMeans name="Live preview" label="New" steps={["Every edit shows up as you type,", "the first render is the one you ship."]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WhichMeans"
    component={WhichMeansScene}
    durationInFrames={190}
    fps={30}
    width={1280}
    height={720}
  />
);

A labeled feature name appears, then the hinge phrase and each step in steps unfold as a chain of consequences. Pass name, label, steps and hinge to describe your own feature. It ships in light and dark through the theme prop.

Props8

Prop	Type	Default
name	string"Live preview" Feature name shown as the headline.
label	string"New" Small tag shown next to the name.
steps	string[]DEFAULT_STEPS Consequence lines revealed in order.
hinge	string"which means" Connector phrase shown between steps.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

namestring
Feature name shown as the headline.
Default"Live preview"
labelstring
Small tag shown next to the name.
Default"New"
stepsstring[]
Consequence lines revealed in order.
DefaultDEFAULT_STEPS
hingestring
Connector phrase shown between steps.
Default"which means"
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"