Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Neon Sign

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

Text layer, V4 Titles3D950 lines of codev1.0.0

In Light, glass & shine, Craft & heritage, Text & data

Next: Split-Flap DisplaySurprise me

Neon Sign preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

Letters, numbers, punctuation and ♥ ★ ⚡ → (type <3 for a heart).

Smaller, under line 1. Leave empty for one line.

0.4
0

Number of a letter, counting from the first, that flickers like a failing tube. 0 for none.

1
1
1

How much of the frame the sign fills.

1

Changes the flicker timing and the bricks.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 651 KB)
Info

What it is

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.

Reuse it in your own idea

  • 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().

Which part is reusable

src/neon-sign.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • 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.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/neon-sign.js
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() }
  • neonGlyphs(text) => { width, letters: [{ char, x, width, strokes: [{ closed, points }] }] }
  • WALLS: { brick, painted, concrete, black }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, render targets and shaders for the glow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

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.

Output
1080×1080, 30 fps, 6 s · procedural (computed from the frame number) · not a loop — 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.
Tested
Rendered 180 frames on 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)). Same frame twice from fresh pages: identical.
Performance
The lit tubes are redrawn only when their brightness changes; the glow is a few blur passes at quarter to sixteenth resolution. Smooth at 1080p on laptop GPUs. Best under about 20 characters per line (no line wrapping): longer lines get smaller. Software WebGL (no GPU) renders slowly.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- neon-sign/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:70b3f0e2e4553acd…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
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.
BinMore like this

More like this

Play these full screen

Disco Ball

Background3DSeamless loop12 seconds

Hologram

3D object3DSeamless loop12 seconds

Hourglass

3D object3DSeamless loop16 seconds

Lava Lamp

3D object3DSeamless loop15 seconds