# Flow Arrow
URL: https://remocn.dev/docs/numbers/flow-arrow

A dotted gradient arrow zigzags upward beside a 3x growth stat

- Install: `npx shadcn@latest add @remocn/flow-arrow`
- Vibe: data
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flow-arrow
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlowArrow } from "@/components/remocn/flow-arrow";

const FlowArrowScene = () => <FlowArrow metric="3×" label="faster growth" />;

export const RemotionRoot = () => (
  <Composition
    id="FlowArrow"
    component={FlowArrowScene}
    durationInFrames={155}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Dotted particles stream into a zigzag arrow that climbs diagonally, then a gradient sweep lands the metric and its label. Pass `metric` (for example 3x) and `label`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `metric` | `string` | `"3×"` | The big number or multiplier that lands. |
| `label` | `string` | `"faster growth"` | Short phrase under the metric. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A growth stat such as 3x where an upward dotted arrow should carry the energy.
- A short momentum beat with one metric and one label, no axes.
- A teaser moment where particles stream into a rising arrow before the number lands.

## Don't use when
- You need real data on axes — use `growth-line`.
- You want a bold multiplier on its own — use `compact-stat`.
- You need a glowing trend that draws to a point — use `sparkline-thread`.