Chevron Run
A wall of chevrons locks into one giant gradient chevron, then a figure and serif caption drop in.
$ pnpm dlx shadcn@latest add @remocn/chevron-runUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ChevronRun } from "@/components/remocn/chevron-run";
const ChevronRunScene = () => <ChevronRun value="+312%" caption="growth since launch" />;
export const RemotionRoot = () => (
<Composition
id="ChevronRun"
component={ChevronRunScene}
durationInFrames={140}
fps={30}
width={1280}
height={720}
/>
);A full-frame wall of up-chevrons races upward in staggered columns, then column by column brakes and locks into one giant chevron that fuses solid in a gradient. The figure drops into the cut-out under it and a serif caption follows. Pass value and caption. It ships light and dark through theme.
Props5
| Prop | Type | Default |
|---|---|---|
| value | string"+312%" The figure that lands under the giant chevron. | |
| caption | string"growth since launch" Serif italic line under the figure. | |
| accent | string"#3B5BFD" Accent color of the chevron gradient. | |
| speed | number1 Playback multiplier. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
- valuestring
The figure that lands under the giant chevron.
Default
"+312%" - captionstring
Serif italic line under the figure.
Default
"growth since launch" - accentstring
Accent color of the chevron gradient.
Default
"#3B5BFD" - speednumber
Playback multiplier.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"