# Dot Type
URL: https://remocn.dev/docs/typography/dot-type

Words are drawn from a field of round dots in a gradient, with the last word set in the accent.

- Install: `npx shadcn@latest add @remocn/dot-type`
- Vibe: tech
- Natural length: 158f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dot-type
```

## Usage

```tsx
// 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `DEFAULT_WORDS` | Words shown in order, each formed from the dots |
| `accentLast` | `boolean` | `true` | Color the final word with the accent |
| `count` | `number` | `1500` | Number of dots in the field; minimum 300 |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A rapid sequence of single words such as Think, Make, Ship, each formed from dots.
- A tech-flavored title card where type should assemble from a particle field.

## Don't use when
- The words must stay readable at small sizes - use `typewriter`.
- You want a glitchy decode instead of dots - use `matrix-decode`.
- You want one word swapping through options - use `slot-machine-roll`.