Neon Sign

$ pnpm dlx 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.

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:

<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:

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.