RemotionUI

Feature List

A list being ticked off, row by row.

SceneScenes

feature-list30fps · 960×540
Install
$ npx remotion-ui@latest add feature-list

Each row arrives in turn: its rule draws across, the row settles in behind it, and its check strokes in — so the scene ends on a list that has visibly been worked through rather than one that faded in.

items takes plain strings or { label, detail } objects when a row needs a second line.

Self-contained scene. Uses layout and motion-tokens helpers only.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import
@/remotion/scenes/feature-list
  • Use when: full-frame scenes, overlays, cards, and reusable video sections.
  • Customize: items, title, eyebrow, accentColor, plus copied source for timing, layout, colors, and typography.
  • Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example
import { FeatureList } from "@/remotion/scenes/feature-list"; <FeatureList title="Why RemotionUI" items={["Own your components", "Live previews", "CLI workflow"]} />

API Reference

PropTypeDescription
items*(string | FeatureItem)[]Rows, as strings or { label, detail }. Up to five are shown.
titlestringSection heading.
eyebrowstringSmall label above the heading.
accentColorstringCheck and eyebrow colour.
theme"dark" | "light"Surface palette.
speednumberAnimation speed multiplier.

Related