# Logo Construct
URL: https://remocn.dev/docs/logo-stings/logo-construct

A blueprint grid draws the logo's construction lines, then the logo inks in and the wordmark settles.

- Install: `npx shadcn@latest add @remocn/logo-construct`
- Vibe: paper
- Natural length: 232f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/logo-construct
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LogoConstruct } from "@/components/remocn/logo-construct";

const LogoConstructScene = () => (
  <LogoConstruct
    name="emocn"
    accent="#3B5BFD"
    theme="light"
  />
);

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

A blueprint grid appears and the construction of the R is drawn: circles, guides, dimensions and an outline, which then fills with a mesh as the camera pulls back and the wordmark inks in. Pass `name` for the letters after the R, or `logo` to replace the R. The theme prop switches blueprint paper (default) to drafting film on black.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logo` | `React.ReactNode` | — | Replaces the constructed R; your logo settles in its place. |
| `name` | `string` | `"emocn"` | Letters set after the R, on its baseline. |
| `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` | `"light" \| "dark"` | `"light"` | Light is blueprint paper (default); dark is drafting film on black. |

## Use when
- A design-system or brand-identity launch that wants to show how the mark is built.
- A long, craft-focused reveal on blueprint paper.
- A beat where your own logo node settles after its construction is drawn.

## Don't use when
- A short sting under five seconds is needed — use `snap-click`.
- The mark should refine from pixels — use `quadtree-mark`.
- A neat ink-on-paper feel without geometry is enough — use `ink-bloom`.