Half Built

A sentence of unfinished verbs shows each one as an outline that fills in as it ships.

Installation

$ pnpm dlx shadcn@latest add @remocn/half-built

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HalfBuilt } from "@/components/remocn/half-built";
 
const HalfBuiltScene = () => (
  <HalfBuilt parts={[{ text: "It cuts," }, { text: "captions,", when: "Spring" }, { text: "narrates", when: "Summer" }]} progress={1.6} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HalfBuilt"
    component={HalfBuiltScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each part of the sentence starts hollow and fills in as progress advances, with optional season tags such as Summer or Later marking what is planned. Pass parts and set progress to choose how far the roadmap has filled. It ships in light and dark through the theme prop.

Props6

Prop	Type	Default
parts	HalfBuiltPart[]DEFAULT_PARTS Sentence parts as `{ text, when? }`; `when` adds a season tag.
progress	number1.6 How many parts are filled in by the end; fractions fill partially.
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.

partsHalfBuiltPart[]
Sentence parts as `{ text, when? }`; `when` adds a season tag.
DefaultDEFAULT_PARTS
progressnumber
How many parts are filled in by the end; fractions fill partially.
Default1.6
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"