# Logo Sting

Draws a real SVG mark in stroke order, snaps to a filled mark with one sound at the moment the last path finishes, then holds fully still for at least a second.

```bash
npx shadcn add https://www.reelcn.dev/r/logo-sting.json
```

Usage:

```tsx
<Center>
  <LogoSting viewBox="0 0 48 48" paths={["M8 24 L24 8 L40 24 L24 40 Z"]} size={160} sfx="chime" />
</Center>
```

Use for:

- A brand's own logo mark drawing itself, not a generic "LOGO" placeholder
- The opening or closing beat of `brand-reel`

Avoid:

- A logo that needs to keep moving after it lands. Pair with `svg-draw` directly instead

Dependencies:

- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. Minimum static hold after the snap, in frames. Defaults to `fps` (a hard ≥1s floor, M3). |
| viewBox | `string` | — |  |
| paths | `string[]` | — |  |
| size? | `number` | `200` |  |
| color? | `string` | — |  |
| sfx? | `false \| "success" \| "error" \| "pop" \| "rise" \| "drop" \| "typing" \| "bell" \| "bubble" \| "camera-shutter" \| "chime" \| "click" \| "click-soft" \| "coin" \| "ding" \| "glitch" \| "impact" \| "keypress" \| "notification" \| "pop-high" \| "riser-short" \| "sparkle" \| "swipe" \| "swish" \| "swoosh" \| "tap" \| "thud" \| "tick" \| "transition-hit" \| "whoosh" \| "whoosh-soft"` | `"chime"` | Fires once, the moment the last path finishes drawing. `false` for silence. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |