# Neon Sign — `neon-sign@1.0.0`

Your words as a glowing neon sign on a brick wall at night, flickering on like the real thing.

Type one or two lines and they are bent in glass tube like a real neon sign: hot, slightly overexposed tubes, a soft glow in the air and coloured light spilling onto the bricks around them. It switches on with a stutter, letter by letter, or writes itself on, or buzzes on a seamless loop. Choose the two tube colours, a border, the wall (red brick, painted brick, concrete, or black for blending), how much it flickers, and one dying letter if you like.

- Kind: text; status: published; digest sha256:70b3f0e2e4553acdaa14a16a5179b2bf6dd12f576a00a85202b8d2ad239904f3
- Role: Title or sign (Three.js, full frame): neon lettering with its own wall and light.
- Implementation: three; entry `src/neon-sign.js`
- Files: https://aipixelwizard.com/registry/neon-sign/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/neon-sign.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/neon-sign/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/neon-sign/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — Renderer, render targets and shaders for the glow.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createNeonSign({ renderer, width, height, lines?, frame?, frameColor?, wall?, animation?, flicker?, faulty?, tube?, glow?, size?, duration?, seed? }) => { render(time, renderTarget?), units, tubeWidth, capHeight, onAt, brightness(index, time), dispose() }` — The whole frame: wall, glass tubes and light. render(time) draws it to the canvas, or to a WebGLRenderTarget to use as a texture.
- `neonGlyphs(text) => { width, letters: [{ char, x, width, strokes: [{ closed, points }] }] }` — The single-stroke alphabet on its own: one line of text as tube centre-lines in cap heights, to draw another way (for example as THREE.TubeGeometry).
- `WALLS: { brick, painted, concrete, black }` — The built-in walls and their room light.

## Parameters
- `line1` (text, default "OPEN") — Line 1: Letters, numbers, punctuation and ♥ ★ ⚡ → (type <3 for a heart).
- `line2` (text, default "ALL NIGHT") — Line 2: Smaller, under line 1. Leave empty for one line.
- `color1` (color, default "#ff2a6d") — Line 1 colour
- `color2` (color, default "#2bb3ff") — Line 2 and border colour
- `frame` (select one of none | box | oval, default "box") — Border
- `wall` (select one of brick | painted | concrete | black, default "brick") — Wall
- `animation` (select one of ignite | write | buzz | steady, default "ignite") — Animation
- `flicker` (number 0–1, default 0.4) — Flicker
- `faulty` (integer 0–40, default 0) — Dying letter: Number of a letter, counting from the first, that flickers like a failing tube. 0 for none.
- `tube` (number 0.6–1.6, default 1) — Tube thickness
- `glow` (number 0.3–2, default 1) — Glow
- `size` (number 0.4–1, default 1) — Size: How much of the frame the sign fills.
- `seed` (integer 1–9999, default 1) — Variation: Changes the flicker timing and the bricks.

## Composition
- Inputs: A WebGLRenderer, the frame size, your lines and colours. Time in seconds for each frame.
- Outputs: The whole frame (wall, tubes and glow) drawn to the canvas or to a WebGLRenderTarget.
- Coordinates: The sign is centred and sized to fit the frame; any aspect ratio works.
- Lighting: Self-lit: the tubes light the wall themselves; scene lights do not affect it.
- Timing: render(time) is a pure function of time; frames render in any order. onAt tells you when the sign is fully lit.
- Works with: kinetic-title, particle-tunnel, dither-animation
- Text is treated as private: it is not stored in shared packs unless you choose to include it.
- The alphabet is built in (no fonts to load), so renders are identical on every computer. Letters it does not have are skipped.
- Use the black wall and Screen (or Add) blending to put the sign over your own footage.

## Output and loop
- 1080×1080, 30 fps, 6 s, procedural
- Seamless loop: no — Switches on and then holds, buzzing. Choose the Buzzing loop animation for a seamless loop: every flicker sits inside the loop and the hum completes whole cycles.
- Verified 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes

## Use it
New project: Create a WebGLRenderer, then createNeonSign({ renderer, width, height, lines }) once and call sign.render(frame / fps) every frame.

Existing project: Copy src/neon-sign.js. Render it to a WebGLRenderTarget and use the texture in your scene, or render it to its own canvas and layer that over yours.

Reuse ideas:
- Bar or shop opener: your venue's name on brick with Switch on, then cut to footage.
- Over your own footage: black wall, render to a video, and blend it with Screen in your editor.
- Neon in a 3D room: render to a WebGLRenderTarget and use its texture on a plane, or build TubeGeometry from neonGlyphs().

## Limitations
- Capital letters only (lower case is shown in capitals), in one built-in tube style: A–Z with accents, 0–9, common punctuation and ♥ ★ ⚡ → ←.
- Seen straight on: the tubes and wall are drawn, not modelled in 3D.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.
- three.js 0.185.1: MIT (https://github.com/mrdoob/three.js)

Provenance: Adapted from the owner's threejs-sketches/light-atmosphere/webgpu-neon-tubes (MIT), rebuilt for AI Pixel Wizard in October 2026: a single-stroke neon alphabet for your own words, HDR glow with light spilling onto a lit brick wall, deterministic switch-on and flicker, and the frame/time contract.