As part of an Automattic experiment to leverage AI tooling, we were encouraged to build something fast and novel. I ran with the idea and made a small project I’d been carrying around in my head since I built Flash websites decades ago. The whole piece is 25 lines long, takes about a minute to execute, and you can click through it right here.

The experiment: could I direct Claude Code to build only what I could’ve made myself, but faster and perhaps better?

Why

I’ve had personal concerns about AI, and whether it could be additive to the human experience. It’s clearly an impressive tool, but also one that’s commonly used to create confidently hollow work. By that, I mean work that is fluent, certain, and plausible at a glance—but scratch the veneer and a hollowness is revealed: claims dressed as fact, uncanny visuals that don’t quite resolve, like a lens that won’t focus.

I wanted to challenge the tool to further my own understanding of it, so I asked it to build with me. Not a product, not a feature, not a thing with a roadmap. Something I could only justify by making it in a few days, something that came with clear terms attached.

The constraints

I’ve been pondering what makes any product succeed in an ocean of alternatives. What makes it stand out? What makes it resonate and connect? From building WordPress with a community of contributors for the past 15 years, three principles stand out to me: 

1. It has to be open source: being able to review the code, and being able to take it with me if a direction changes, creates trust. This is especially true in an AI-collaboration, where the output is otherwise unverifiable. Open code can be read, reviewed, and verified; you don’t have to take anyone’s word for what it does.
2. It has to connect. This is that intangible “know it when I see it” feeling that is vague but nevertheless crucial.
3. It has to be hackable. True ownership is when you can make it your own. Whether you can reuse it as a module in an entirely different context, or just customize it, there is value in leaving knobs and dials—and good defaults—that someone else can adjust.

Values vary from person to person, but in leaning into these core tenets, I find any effort will at least have character and intent.

So with that in mind, I wanted to create a system to tell a story. Told in its first iteration with just three colors (but room for more), with a decorative and precise parallax layer and depth-blur, with synthesised musical notes and background ambiance, and with a custom WebGL blue-noise filter to add texture. 

Noise

Tired of scrolling, I swapped my smartphone for a Mudita Kompakt with an e-ink screen and days of battery life. I enjoy reading books on it. And I’ve come to appreciate what e-ink does to the visual appearance of things. It’s a particular pattern of 1-bit noise, like ditherlicious, that comes across as organic. It breathes and feels alive.

For this application, I went with an intentionally lo-fi version of blue noise dithering. I wanted an organic, live, anti-tech appearance. Something that breathed in the same way as e-ink does on a screen. I wanted a particularly anachronistic visual appearance. One that connected with myself and my desire for *less*.

As it involves millions of pixels, the noise is difficult to get right. Every frame, five depth layers each pass through the same pipeline: drawn small to an offscreen Canvas2D, uploaded as a texture, blurred with a multi-pass Gaussian, then thresholded against a 64×64 blue noise texture generated at load. On a high resolution display, that’s tens of millions of pixels touched per frame, ideally sixty times a second.

Parallax

The cursor moves the world. Five layers of floating specks at different depths shift at varying rates as you move the mouse, and the text nodes themselves sit at their own depth. It’s a simple and cheap spatial effect, but it adds complexity to the surface, recasting its contents to create a particular experience or mood. 

In this case, it helps the noise come alive.

Progressive enhancement

Although quite performant in some browser engines, the combination of techs and the use of the full viewport worked less fluently in other engines. It has piqued my interest in following how the tech evolves on WebGL and Canvas2d tech, both of which impressed me with their capability as I worked on this project. But it was clear that, in this case, a system for adapting the performance was needed. 

Instead of starting with full detail and then degrading, the project inverts it, starting at minimum and climbing. Six tiers, checked every two seconds against median frame time: at tier zero, only the two largest speck layers render at half density; at tier five, all five layers run at full density. If the browser sustains over 50fps, it climbs. Below 30fps, it drops. Newly enabled layers fade in over about 800ms so you don’t see them pop.

Music

A sine wave oscillator plays a six-note phrase as you click: A5, G5, G5, F♯5, E5, F♯5, then the same with a D5 at the end. Each click triggers the next note. Revealing 24 lines of text, you’d have played the full melody twice, with rain ambiance underneath.

It’s deliberately minimalist; a small piece that one might hear without even realizing that it was a composition. And it’s hackable: if you want music, the notes are all there to be swapped with your own, paced to the number of nodes you choose to add.

What I learned

Building this project was a deliberate stress test of AI as a tool to be directed. I wanted to see if it was possible to strictly delineate text, music, and art direction, from an implementation that was always meant to be open source, and based on modern and evolving web standards. 

Whether that succeeded or not will be left up to the reader, the adopter, and the hacker who chooses to leverage what was built, whether for landing pages, WordPress themes, custom blocks, or something else entirely. The code is available on GitHub, GPLv2.

The main thing I learned is that how we choose to engage with AI is what defines whether it becomes additive or subtractive. The tool is neither: it simply does as you ask. That puts the burden on us to choose when, why, and how we engage with it. For this project I asked for something small, something that was open source, hackable, and connected with me through an aesthetic I wanted to see. It suggested to me that genuinely good prompts exist, waiting to be written.