Flow Arrow

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

Installation

$ pnpm dlx 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.

Props5

Prop	Type	Default
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	number1 Playback multiplier.

metricstring
The big number or multiplier that lands.
Default"3×"
labelstring
Short phrase under the metric.
Default"faster growth"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1