Feature Trio

Three feature words, 'Fast. Composable. Open source.', rise from masks with progress ticks and notes

Installation
$ pnpm dlx shadcn@latest add @remocn/feature-trio

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FeatureTrio } from "@/components/remocn/feature-trio";
 
const FeatureTrioScene = () => <FeatureTrio items={[{ title: "Fast.", description: "Drop in a scene and render it in minutes." }, { title: "Composable.", description: "Every piece is a React component you can remix." }]} />;
 
export const RemotionRoot = () => (
  <Composition
    id="FeatureTrio"
    component={FeatureTrioScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Each feature title rises from a mask with a note beneath it while progress ticks advance, and at the end all titles resolve into a compact row with their descriptions. Pass items (two to four title and description pairs); it spaces the beats to fit the composition length.

Props5

PropTypeDefault
items
FeatureTrioItem[]DEFAULT_ITEMS

2–4 short benefits.

accent
string"#3B5BFD"

Color of the progress ticks and highlights.

background
string—

Stage fill. "transparent" drops the stage and its glow.

speed
number1

Playback multiplier.

theme
"dark" | "light""dark"

Color scheme; ships dark and light.

  • itemsFeatureTrioItem[]

    2–4 short benefits.

    DefaultDEFAULT_ITEMS

  • accentstring

    Color of the progress ticks and highlights.

    Default"#3B5BFD"

  • backgroundstring

    Stage fill. "transparent" drops the stage and its glow.

  • speednumber

    Playback multiplier.

    Default1

  • theme"dark" | "light"

    Color scheme; ships dark and light.

    Default"dark"