Dot Type
Words are drawn from a field of round dots in a gradient, with the last word set in the accent.
$ pnpm dlx shadcn@latest add @remocn/dot-typeUsage
// src/Root.tsx
import { Composition } from "remotion";
import { DotType } from "@/components/remocn/dot-type";
const DotTypeScene = () => (
<DotType words={["Think.", "Make.", "Ship."]} count={1500} accent="#3B5BFD" />
);
export const RemotionRoot = () => (
<Composition
id="DotType"
component={DotTypeScene}
durationInFrames={190}
fps={30}
width={1280}
height={720}
/>
);A dot field collapses into the first word, then each next word reforms from the same dots in turn; the final word can take the accent color. Pass words and tune count for dot density; it ships light and dark through theme.
Props6
| Prop | Type | Default |
|---|---|---|
| words | string[]DEFAULT_WORDS Words shown in order, each formed from the dots | |
| accentLast | booleantrue Color the final word with the accent | |
| count | number1500 Number of dots in the field; minimum 300 | |
| accent | string"#3B5BFD" Accent color (any valid CSS color) | |
| speed | number1 Playback speed multiplier | |
| theme | "dark" | "light""dark" Ships light and dark palettes | |
- wordsstring[]
Words shown in order, each formed from the dots
Default
DEFAULT_WORDS - accentLastboolean
Color the final word with the accent
Default
true - countnumber
Number of dots in the field; minimum 300
Default
1500 - accentstring
Accent color (any valid CSS color)
Default
"#3B5BFD" - speednumber
Playback speed multiplier
Default
1 - theme"dark" | "light"
Ships light and dark palettes
Default
"dark"