Threat model

Thirty pieces about AI that writes code, and the security around it. Every pixel and every sound is made by code, with no image or video models, and each piece leads with a different web technology: from SVG and CSS 3D to WebGPU simulations, a language model running in your browser, and hand tracking through your camera.

Hands-on

Five ways to touch a page: your hands, a liquid, a fabric, a model you can talk to, and maths you can drag.

5 pieces
A glowing hand skeleton raising a hexagonal shield against hot orbs Camera optional Hands on MediaPipe hand tracking driving a 3D game Protect the core with your bare hands: pinch threats, flick them into containment, raise a palm to shield. A mouse works too. A hot liquid sloshing up the wall of a glass tank WebGPU Containment WebGPU MLS-MPM fluid, 162,000 particles Stir, pour, tilt and shake a liquid. Leaked data pours in hot and cools to ice once it settles. A torn fabric curtain with glowing packets streaming through the holes Soft perimeter Tearable XPBD cloth you can grab Grab the firewall curtain, rip it open, watch hot packets pour through, then patch the tear. A chat with an in-browser model, its tokens coloured by confidence Optional 290 MB model Keep the secret A language model running in your browser Talk an on-device model into leaking its password through four layers of defence, and watch its confidence token by token. An elliptic curve's points wrapped onto a torus How a curve keeps a secret An explorable essay with 14 live figures Elliptic-curve cryptography taught by touch: drag points, wrap the curve onto a torus, race a brute-force search.

Vector and CSS

SVG and the browser’s own layout engine: animation elements, filters, generated geometry and 3D transforms.

4 pieces
A liquid glass permission sheet refracting an agent's terminal Best in Chromium Approve once Liquid glass from SVG displacement maps An agent asks to pipe a remote script into a shell. The glass sheet flows into a sandbox that runs it there instead. A code editor with a SQL injection line glowing hot beside a warning shield Commit guard Pure SVG, animated with SMIL and filters An AI pair programmer writes a query, flags the SQL injection and patches it while a shield morphs from alert to lock. An isometric pipeline of stations with tokens moving along a track Secure pipeline Procedural isometric SVG Agent-written changes ride a conveyor through a policy gate; clean ones ship signed, flagged ones go to quarantine. Rings of panels around a tunnel, one ring per security layer Scroll Defense in depth Pure CSS 3D driven by scrolling Scroll down through six layers of an agent’s security while an attack slips past some of them and breaks on the sandbox.

Shaders and light

Programs that run once per pixel: light that bounces, geometry with no meshes, type as a rendering medium.

3 pieces
A floor plan of a codebase lit by soft light, one room glowing red Dark repo 2D global illumination with radiance cascades A repository at night, lit only by freshly typed code, until a reviewer’s torch finds the SQL injection. A raymarched padlock on a field of data blocks Cipher lock One GLSL shader, raymarched distance fields A padlock opens and locks while a thermal scan sorts the data blocks around it into trusted and quarantined. A data centre drawn in ASCII characters with a worm made of code Worm ASCII glyph atlas with Bayer dithering A worm spelled out in its own source code burrows from rack to rack; a lens shows the 3D render underneath.

3D, physics and splats

Scene graphs, node materials for WebGPU, rigid bodies in WebAssembly, and Gaussian splats made from code.

4 pieces
Lines of code made of glowing splats, one line white-hot Codebase nebula Procedural Gaussian splats with Spark A repository as a nebula of 264,000 splats; the camera dives from galaxy scale into one legible line of vulnerable code. 3D text shattering into hot glass shards around a cold core Unsafe eval Three.js WebGPU renderer with TSL eval(userInput) shatters into hot glass and cools as it reassembles into JSON.parse(userInput). A tower of labelled dependency blocks toppling Transitive Rapier physics compiled to WebAssembly A poisoned update to one tiny dependency topples the tower. Then the deterministic physics plays it backwards. A glowing service mesh inside a hexagonal shield Zero-trust mesh Three.js with custom shaders and bloom Cold traffic flows between an agent’s services while hostile packets break against a hex shield.

Simulations and games

Thousands to millions of agents moved by noise fields, sensing rules or falling-sand chemistry.

3 pieces
A vein-like network converging on a hot anomaly WebGPU Threat hunters WebGPU compute: 1.5 million physarum agents A living web of hunting agents re-plumbs itself toward each new anomaly and cools it. Click to drop a honeypot. Particles forming a shield, hot ones still streaming in Token swarm 24,000 hand-written WebGL2 particles Tokens run hot while in flight, then cool into braces, a network, a shield, a lock and a word. Pixel bins of data, malware and burning ransomware Playable Sandbox A playable falling-sand game Data piles, malware eats it, ransomware burns it into locked crystal, and patch water steams the fire out.

Labs and explainers

An interactive cutaway you can take apart, and a fact-checked documentary short.

2 pieces
A cutaway security key chip glowing hot where a phishing request fails Why a security key can’t be phished Interactive 3D cutaway lab Take a security key apart, follow a real sign-in through its chips, then watch a lookalike site’s request die in the secure element. A frame from an explainer about the xz backdoor Sound Five hundred milliseconds Remotion: React rendered to MP4 The xz-utils backdoor, from a patient takeover to the half-second delay one engineer refused to ignore.

Painting and print

No image models: a woodblock print rendered live, and an oil painting made stroke by stroke in Python.

2 pieces
A woodblock-style great wave made of packets Thirty-six views of the firewall Woodblock-print rendering in real time After Hokusai: a great wave of packets breaks on the firewall, and each print presses itself block by block. A painted still life with a book, candle, hourglass and a key with a red tag Python Memento expirare An oil painting made by Python and numpy A vanitas still life for the age of credentials, painted stroke by stroke without an image model.

Models, data and proofs

A real classifier in the tab, the real catalogue of exploited vulnerabilities, and a page that verifies its own source.

3 pieces
A beeswarm timeline of exploited vulnerabilities Sound Known exploited Live CISA KEV data, D3 and a Strudel score All 1,733 vulnerabilities CISA has seen exploited, 361 of them by ransomware, played as a live-coded track. A thermal radar of text chunks with injections clustered hot 54 MB of models Injection radar Transformers.js and ONNX Runtime in the page Untrusted text streams past a real prompt-injection classifier onto a map of meaning. Paste your own. Tiny source-code glyphs with a scattered ring of hash bits Integrity A quine and the Web Crypto API The page rebuilds its exact source, hashes it and shows its own fingerprint. Flip one bit and half the hash changes.

Motion, type and sound

Storyboarded films, kinetic typography and soundtracks synthesised in the page.

4 pieces
A demoscene frame with a hexagonal patch reading Patched Sound Zero day Demoscene intro: WebGL2 and Web Audio A one-minute intro where every pixel and every note comes from the page. A patch slams shut on the beat. A CRT showing a memo with a hidden instruction glowing through tracking noise Sound So you’ve been prompt-injected (1989) Composite-video emulation, FM synthesis, WebCodecs A deadpan training tape about a 2026 problem. Rewind it and the memo’s hidden instruction tears into view. A frame showing a hidden instruction in a pull request Hidden instruction A Canvas 2D film, every frame a function of time A prompt injection hidden in a pull request, caught by a guard model, in 24 seconds. A leaked access key glowing white-hot Rotate your keys GSAP: SplitText, ScrambleText, MorphSVG, Physics2D A leaked key is caught within a minute, smashed into a heap of characters, revoked and replaced.
No.PieceFamilyHow you engageNeeds

Screening room

Four pieces also exist as rendered films. Because every frame is a function of time, they were captured frame by frame in headless browsers or Python and stitched with ffmpeg.

How they’re made

The viral code-rendered work of autumn 2026 isn’t generated video. It’s code that paints frames, and it follows the same workflow every time. Every piece here does too. The research behind them is in the research notes, and all the code is on GitHub.

  1. Storyboard first

    Shots, timings, easing and palette are fixed before any drawing code. The films keep their storyboards as tables; the intro keeps its song as one.

  2. Frames are functions of time

    The same t always paints the same frame. Randomness is seeded and simulations replay from a seed, so any moment can be scrubbed to, tested or re-rendered.

  3. Check contact sheets

    A headless browser calls __seek(t) at chosen moments, on the real GPU, and saves images. Score them, list the three worst flaws, fix, render again.

  4. Capture and encode

    Independent frames render in parallel and ffmpeg stitches them, with audio rendered offline from the same synth code. The previews on this page were made the same way.

The tools, all in tools/:

# frames at any times, frame rates on the real GPU, the hover previews
node tools/shot.cjs pieces/02-zero-trust-mesh.html 1,4,8 --w=1440 --h=900
node tools/perf.cjs
node tools/previews.cjs
# the films and the painting
node tools/render-film.cjs --workers=4
node tools/render-intro.cjs
python3 tools/paint_vanitas.py
cd remotion && npm install && npm run render
# this page
python3 tools/build_index.py