# Snap Click
URL: https://remocn.dev/docs/logo-stings/snap-click

The two halves of the logo slam together at a seam with a click, then a label types beneath.

- Install: `npx shadcn@latest add @remocn/snap-click`
- Vibe: clean
- Natural length: 45f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/snap-click
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SnapClick } from "@/components/remocn/snap-click";

const SnapClickScene = () => (
  <SnapClick
    text="emocn"
    label="Animations for Remotion"
    accent="#3B5BFD"
  />
);

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

The two halves of the lockup slam together at a seam with a flash and a small shake, then `label` types in beneath it with a caret. Pass `text`, `label` and, to move the split, `seam`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"emocn"` | Lowercase letters set after the R mark. |
| `seam` | `[number, number]` | — | Where the lockup splits: glyph index and fraction of its width. |
| `label` | `string` | `"Animations for Remotion"` | Small line typed under the lockup after the click. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A short, punchy logo sting with a tactile click.
- A brand beat with a typed one-line descriptor right after the slam.
- A product tagline moment that should feel mechanical and precise.

## Don't use when
- You want soft, slow light instead of a slam — use `first-light`.
- Several words should lock in turn before the logo — use `split-match`.
- The sting needs a louder trailer-style drop — use `bass-drop`.