Type a word and watch it get bent into glowing glass tubes on a brick wall.
The lettering is a connected single-stroke script defined in code as spline control points, one continuous stroke per letter, so each word becomes one tube, with black-painted runs out to its i dots and t bars and electrodes where it turns back into the wall. The glow is computed the way a camera sees it: the lit tubes are drawn into a small canvas, halved again and again with a slight blur, then added back up level by level into a wide, soft falloff that is multiplied by the procedural brick texture so bricks and mortar pick up colored light, and added once more as bloom. Each tube is a stack of strokes (halo, saturated body, near-white core, specular glint) over a pale phosphor coating that shows when it is dark. New signs are bent in front of you behind a glowing burner tip, then the gas strikes with a stutter, and now and then a tube flickers.
Try it. Type a word or two to make your own sign; it lights up when you pause, and Enter bends it again from scratch. Click a tube to knock it and make it stutter, click the wall for the next sign, and use the arrow keys to change colors.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a glowing neon sign generator with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Paint a dark wall. A flat dark color is fine at first; then draw a brick pattern in code: offset rows of slightly varied reddish rectangles with darker mortar between them.
- Define a handful of lowercase letters as single-stroke script: a list of points per letter that a smooth Catmull-Rom spline passes through, entering and leaving at the baseline so letters join into one line.
- Lay out a word from those letters, sample the spline into a polyline, and stroke it as a tube with round caps and joins.
- Make it glow with layered strokes: a wide faint halo in the tube's color, a narrower brighter one, the saturated tube body, and a thin near-white core, using globalCompositeOperation = "lighter" for the glowing layers.
- Animate a flicker: when the sign switches on, pulse its brightness on and off a few times before it settles.
Once that works, make it beautiful:
- Light the wall: draw the lit tubes into a small offscreen canvas, blur it by drawing it repeatedly at half size, scale it back up, multiply it with the brick texture, and add the result onto the wall so nearby bricks pick up colored light.
- Add realistic details: black-painted blockout sections between parts of the tube, electrodes at the tube ends, small standoffs holding the glass off the wall, and a thin specular line along each tube.
- Let me type my own word and watch it relight, and click to switch the sign off and on.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as animating the glassblower bending each tube, a rare random stutter, or a two-line sign with different gas colors.
