# Bug Dock
URL: https://remocn.dev/docs/typography/bug-dock

"Playing on every screen you ship." with a small broadcast logo bug docking at the bottom

- Install: `npx shadcn@latest add @remocn/bug-dock`
- Vibe: social
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bug-dock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BugDock } from "@/components/remocn/bug-dock";

const BugDockScene = () => <BugDock name="remocn" headline="Playing on every screen you ship." highlight="every screen" />;

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

A large logo-and-name lockup fades in, its letters tuck away until only the mark remains, and the mark docks to the bottom corner like a broadcast bug while the headline appears with one phrase highlighted. Pass `name` ("remocn" uses the real logo), `headline` and `highlight`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"remocn"` | Brand name; "remocn" renders the real logo, anything else a wordmark. |
| `headline` | `string` | `"Playing on every screen you ship."` | Headline text shown after the brand docks. |
| `highlight` | `string` | `"every screen"` | Phrase in the headline set in the accent color. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A broadcast-style title where the brand shrinks into a corner bug and the message takes over.
- A launch beat that introduces the brand first and the headline second.
- A closing or channel-ident moment for a social or streaming video.

## Don't use when
- You want the headline alone with no logo lockup — use `soft-blur-in`.
- The brand should stay centered with a status word — use `beta-thanks`.
- You need a logo reveal on its own — use `flip-sting`.