Dot Field Morph

A drifting field of dots swirls into icon shapes, then gathers into the logo

Installation

$ pnpm dlx shadcn@latest add @remocn/dot-field-morph

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { DotFieldMorph } from "@/components/remocn/dot-field-morph";
 
const DotFieldMorphScene = () => (
  <DotFieldMorph labels={["Animations", "Transitions", "Captions", ""]} count={2000} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="DotFieldMorph"
    component={DotFieldMorphScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);

A scattered field of dots drifts, then swirls into the first shape, holds with a caption, and morphs through the next shapes until the last one, the wordmark, holds. Pass shapes (SVG path data or parts, stroked or filled) and matching labels; with the default set it shows three icons then the Remocn wordmark. Ships dark and light via theme.

Props6

Prop	Type	Default
shapes	DotShape[]DEFAULT_SHAPES Shapes in order after the scattered field; the last one holds.
labels	string[]DEFAULT_LABELS Optional caption under each shape, same order. Empty string for none.
count	number2000 Number of dots; 1,500 to 2,500 reads as a field.
accent	string"#3B5BFD" Color of accent-flagged parts of a shape.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.

shapesDotShape[]
Shapes in order after the scattered field; the last one holds.
DefaultDEFAULT_SHAPES
labelsstring[]
Optional caption under each shape, same order. Empty string for none.
DefaultDEFAULT_LABELS
countnumber
Number of dots; 1,500 to 2,500 reads as a field.
Default2000
accentstring
Color of accent-flagged parts of a shape.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"