# Feature Chips Flow
URL: https://remocn.dev/docs/typography/feature-chips-flow

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

- Install: `npx shadcn@latest add @remocn/feature-chips-flow`
- Vibe: playful
- Natural length: 108f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A feature overview where rows of pills stream past and then snap into a cluster around the product logo.
- A closing montage that shows breadth: many small capabilities converging on the brand.

## Don't use when
- You only have three features to show properly — use `feature-trio`.
- You want features as a list that scrolls — use `index-list`.