# Glyph Matrix
URL: https://remocn.dev/docs/logo-stings/glyph-matrix

A round LED dot matrix counts 3-2-1, then its dots hop into a pixel R and the name types in.

- Install: `npx shadcn@latest add @remocn/glyph-matrix`
- Vibe: tech
- Natural length: 141f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glyph-matrix
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlyphMatrix } from "@/components/remocn/glyph-matrix";

const GlyphMatrixScene = () => (
  <GlyphMatrix
    label="remocn"
    accent="#3B5BFD"
    theme="dark"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GlyphMatrix"
    component={GlyphMatrixScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A round LED dot matrix shows 3, 2, 1, then its dots arc and hop into a pixel R, which slides aside as `label` types in beside it. Pass `label`; Remocn types emocn so the lockup reads as the real logo. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"remocn"` | Word typed in beside the pixel R; Remocn types emocn. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A countdown to launch that ends in the logo.
- A retro LED or hardware-flavoured sting for a developer tool.
- A tech brand reveal where dots become the mark.

## Don't use when
- You want pixels that refine out of squares without a countdown — use `quadtree-mark`.
- You want dots that ripple across the frame — use `ripple-mark`.
- A plain quiet reveal is enough — use `first-light`.