Flock Form

A flock of birds flies in, forms an arrow, then streams along a path and settles into the R mark

Installation

$ pnpm dlx shadcn@latest add @remocn/flock-form

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FlockForm } from "@/components/remocn/flock-form";
 
const FlockFormScene = () => <FlockForm count={340} accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="FlockForm"
    component={FlockFormScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A flock flies in from the edges and snaps into an arrow with accent-coloured lead birds, then the arrow launches along a curved path and the birds stream back to land in the Remocn R mark. Pass count to change how many birds there are. The mark is built into the file; edit REMOCN_R_PATH to use another logo. Ships dark and light via theme.

Props4

Prop	Type	Default
count	number340 Number of birds. Formations resample to match.
accent	string"#3B5BFD" Color of the lead birds on the arrow tip.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.

countnumber
Number of birds. Formations resample to match.
Default340
accentstring
Color of the lead birds on the arrow tip.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"