Feature Chips Flow

Rows of feature pills stream by, then snap into a cluster around the logo

Installation

$ pnpm dlx shadcn@latest add @remocn/feature-chips-flow

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FeatureChipsFlow } from "@/components/remocn/feature-chips-flow";
 
const FeatureChipsFlowScene = () => (
  <FeatureChipsFlow features={["Captions", "Transitions", "Templates", "Export"]} name="Acme" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FeatureChipsFlow"
    component={FeatureChipsFlowScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Rows of feature chips stream across the frame, the first ones converge and snap into a cluster around the logo, and the rest dissolve. Pass features (strings or chips with icon and variant), name and your own logo; it ships light and dark.

Props6

Prop	Type	Default
features	(string \| FeatureChip)[]DEFAULT_FEATURES The first ~22 land in the cluster; the rest stream by and dissolve.
name	string"remocn" "remocn" (default) renders the real remocn.dev logo; anything else is set as type.
logo	React.ReactNode— Shown before a custom `name` (ignored for the built-in logo).
accent	string"#3B5BFD" Accent colour (any CSS colour).
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

features(string | FeatureChip)[]
The first ~22 land in the cluster; the rest stream by and dissolve.
DefaultDEFAULT_FEATURES
namestring
"remocn" (default) renders the real remocn.dev logo; anything else is set as type.
Default"remocn"
logoReact.ReactNode
Shown before a custom `name` (ignored for the built-in logo).
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"