# Neon Sign
URL: https://remocn.dev/docs/logo-stings/neon-sign

A glass neon tube stutters alive segment by segment, buzzes off once, then holds lit with a glow on the wall

- Install: `npx shadcn@latest add @remocn/neon-sign`
- Vibe: playful
- Natural length: 40f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/neon-sign
```

## Usage

`NeonSign` renders an SVG path as glass neon tubing on a dark wall. The unlit
glass is visible from the first frame. Each subpath of the path is its own
tube: tubes switch on one after another, flicker for 7 frames, then hold. Once
everything is lit, the whole sign drops out for a few frames like a bad
transformer and comes back for good. A lit tube has four layers: a wide
blurred glow, a tight halo, the colored tube and a thin hot core. A soft glow
on the wall behind follows the average brightness of the sign.

```tsx
import { NeonSign } from "@/components/remocn/neon-sign";

export const LogoSting = () => <NeonSign color="#E5322D" glowColor="#E5322D" />;
```

With no props it writes a handwritten "hello" with an underline swash. To use
your own mark or word, pass monoline path data in `path`. Every `M` command
starts a new tube, so split the artwork where you want separate segments to
light:

```tsx
<NeonSign
  path="M 10 80 L 50 10 L 90 80 M 30 50 L 70 50"
  strokeWidth={5}
  color="#4DE1FF"
  glowColor="#4DE1FF"
/>
```

`strokeWidth` is in path units, so match it to your path's scale. Without a
`viewBox` the sign frames the path's bounding box with padding of six stroke
widths. The sign is scaled to `fit` of the frame width, and never taller than
70% of the frame. Flicker comes from Remotion's seeded `random()`, so the
same `seed` always renders the same frames.

Each tube renders two blurred copies, so very long paths with many subpaths
are heavier to render than the default.

## Timing

At 30 fps, `speed={1}` and the default six-tube path:

| Frames | Motion |
| --- | --- |
| 0 | Unlit glass tubes on the dark wall |
| 3–22 | Tubes switch on roughly every 3.4 frames, each with up to 2 frames of seeded delay |
| each onset + 7 | Each tube flickers for 7 frames, then holds lit |
| 29–32 | The whole sign drops out and stutters back on |
| 32–40 | The wall glow settles to full strength |

The buzz is fixed at frames 29–32. With more than six or seven tubes the last
ones are still switching on when it hits, so allow for about 3.4 frames per
extra tube. The docs preview runs 70 frames. `speed` scales the timeline.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `path` | `string` | `handwritten "hello"` | SVG path data for the tubes; each subpath (M command) lights on its own |
| `viewBox` | `string` | — | viewBox for the path; defaults to the path's bounding box padded by six stroke widths |
| `color` | `string` | `"#E5322D"` | Tube color when lit |
| `glowColor` | `string` | `"#E5322D"` | Halo around the tubes and the glow on the wall |
| `tubeColor` | `string` | `"#2A2A2A"` | Unlit glass tube |
| `coreColor` | `string` | `"#FFFFFF"` | Hot core inside a lit tube |
| `backgroundColor` | `string` | `"#111111"` | Full-frame wall |
| `strokeWidth` | `number` | `6` | Tube thickness in path units |
| `fit` | `number` | `0.62` | Share of the frame width the sign spans, capped at 70% of the height |
| `seed` | `number` | `7` | Seeds each tube's onset delay and flicker pattern |
| `speed` | `number` | `1` | Playback multiplier |

## Use when
- The brand, venue or event has a nightlife, retro or hand-lettered feel and the sting should look like a lit sign.
- Your mark or word exists as a monoline SVG path, so each stroke can light as its own tube.
- You want a short greeting or title card like the default "hello" with a buzzing, imperfect start.

## Don't use when
- Your logo is a filled image rather than a stroke path — wrap it with `spotlight` or `anamorphic-flare` instead.
- Letters should draw on as clean outlines and then fill, without the neon look — use `outline-trace`.
- The word should be written by hand on paper, not lit in glass — use `handwrite`.
- You want a full retro neon landscape behind your content rather than a sign — use `synthwave`.