Hey, it's Cindy 🌱 That cyberpunk effect where someone's face turns into glowing green terminal text? It's a tiny web page you can have Claude build for you in one sitting.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
the idea
What you're actually building
A single HTML file that opens your webcam, reads each video frame, and swaps the pixels for text characters in real time, so your face renders as live ASCII art in the browser. Under the hood it uses three standard browser pieces: getUserMedia to access the camera, a hidden canvas to read pixel brightness, and a character ramp that maps dark-to-light pixels to characters like @ # * . (denser characters for darker areas). This is a well-established technique, not a hack. See a working open-source reference: escobar5/asciicam on GitHub.
The real lesson isn't the toy. It's that a plain-English request now ships you a working, self-contained app you fully own.
the one gotcha
The one thing to know before you start
Browsers only let a page use your camera in a "secure context". Per MDN, that means one of: an https:// site, localhost, or a local file:/// page. So double-clicking the HTML file (which opens it as file:///) usually works fine.
🪟 If the camera doesn't turn on: some browser versions are picky about file:///. The reliable fix is to run it from a tiny local server instead. Put the HTML file in a folder, open a terminal in that folder, and run one line, then open the address it gives you (usually http://localhost:8000):
🔧 serve it locally
python3 -m http.server 8000
No Python? Ask Claude: "give me a one-line command to serve this folder locally" and it will hand you the exact command for whatever you have installed.
copy this
Step 1: the exact prompt to paste
Open Claude and paste this. In a chat, Claude builds it as an Artifact you can preview live and download as an .html file. In Claude Code, it writes the file straight into your folder.
📋 the ASCII webcam build
Build me a single, self-contained HTML file (all CSS and JavaScript inline, no external libraries) that turns my webcam into live ASCII art in the browser. Requirements:
1. Use getUserMedia to access the webcam and draw frames to a hidden canvas.
2. Convert each frame to ASCII text in real time by mapping pixel brightness to a character ramp, and render it in a monospace element.
3. Add sliders for: font size, contrast, and noise/gain.
4. Add a dropdown of colour modes (at least: green cyberpunk, amber terminal, black on white, and full colour).
5. Add a dropdown of character sets: simple, complex, binary (0/1), and blocks.
6. Add a "screenshot" button that saves the current ASCII frame as a PNG.
7. Everything must run locally in the browser, no server calls, no data leaving the machine.
8. Give me one file I can double-click to open. If the camera needs a local server, tell me the one-line command to run.
run it
Step 2: run it
🖱️ In a Claude chat: click the download arrow on the Artifact to save the .html file, then double-click it. Your browser will ask for camera permission, click allow.
💻 In Claude Code: it writes the file into your project. Open it the same way, or run the local-server line above if the camera stays black.
📷 First run: you'll see your face resolve into a moving wall of characters. Play with the sliders live, contrast is the one that makes it look sharp and cyberpunk rather than muddy.
the polish
Step 3: make it look properly cyberpunk
You don't edit code, you just tell Claude what to change and it rewrites the file. Copy-paste any of these follow-ups:
🟢 "Make the green mode a brighter neon green on near-black, with a subtle glow on the text like a CRT terminal."
🔤 "Add a character set that's only made of these symbols: ▓ ▒ ░ so it looks more like blocky pixels."
🎚️ "Add a slider for how fast it refreshes so I can slow it down for a trippy trailing effect."
📸 "Make the screenshot save at 2x resolution so it's crisp enough to use as a header image."
🪞 "Mirror the video horizontally so it moves the way I expect, like a real mirror."
use the output
Step 4: turn a frame into a real graphic
The screenshot button saves your ASCII frame as a PNG (technically the canvas gets exported with toDataURL, then downloaded). From there you can use it as a profile picture, a reel thumbnail, a Notion cover, or a header. To go further, ask Claude: "add a text box so I can type a caption that overlays on the screenshot before I export it."
go further
3 bonus prompts to run next
Same idea, pushed a bit further. Each one is a genuinely useful next build.
1 · use any photo
Add a button that lets me upload any image or photo instead of using my webcam, and convert that to ASCII art with the same controls.
2 · export a clip
Add a "record" button that captures 5 seconds of the ASCII animation and exports it as a downloadable video or GIF I can post.
3 · coloured ASCII
Add a mode that keeps the original webcam colours but replaces the shapes with characters, so it's coloured ASCII instead of single-colour.
pick your level
How to get the most out of it
🌱 If you're new don't try to read the code. Treat Claude like the developer and describe what you SEE that you want changed ("the text is too small", "make the background pure black"). Plain descriptions work better than technical words.
⚡ If you're more advanced ask Claude to keep the whole thing dependency-free and under one file on purpose, then have it explain the brightness-to-character mapping so you can swap in your own ramps or add WebGL for a faster refresh. It's a clean base to fork into other real-time canvas effects.
the honest bit
An honest heads-up
🔦 Lighting matters more than settings. ASCII conversion is just brightness in disguise, so a well-lit face on a plain background reads far cleaner than a dim, busy one. If it looks like mush, fix your lighting before you fiddle with sliders.
🔒 It's private by design. Because everything runs in your browser, your camera feed never uploads anywhere. That's a feature, but it also means the file only works on a device with a camera and a modern browser.
the waitlist is now open
AI System Club is launching soon
Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.
btw this list gets first dibs the moment doors open :)