Feature Trio
Three feature words, 'Fast. Composable. Open source.', rise from masks with progress ticks and notes
$ pnpm dlx shadcn@latest add @remocn/feature-trioUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
DEFAULT_ITEMS - accentstring
Color of the progress ticks and highlights.
Default
"#3B5BFD" - backgroundstring
Stage fill. "transparent" drops the stage and its glow.
- speednumber
Playback multiplier.
Default
1 - theme"dark" | "light"
Color scheme; ships dark and light.
Default
"dark"