composio.dev/cli is the page for the Composio CLI. The brief was simple: explain a developer tool. The execution wasn't — the same page needed to work for two different readers, share the visual language of the rest of composio.dev (shaders, motion, sound), and stay quiet enough to read.
There's a tab switcher at the top of the page: Human and Agent. Why? Because AI agents (Cursor, Claude Code, Codex) increasingly visit doc pages on behalf of their users. They don't need motion or shaders — they need a flat install command and the API in plain markdown they can paste straight into context. Treating that audience like a second-class reader of a marketing page wastes both their time and mine.
Flip the toggle and the page collapses to one well-formatted manual — install line, command list, conventions. It's the same content a developer would piece together by clicking around the human view. Pre-distilled, no decoration.
On first visit the page is dormant — wordmark in light gray, no shader, no sound. The click is the consent: WebGL and audio shouldn't autoplay. After click, each character of the wordmark activates in #0007cd as a tick crosses dist = row * 6 + col, then settles to #999. 50 ticks at 25ms — about 1.25 seconds top to bottom.
All of this lives inside a draggable terminal window — three traffic lights, hairline border, centered title. Pick it up by the title bar and move it anywhere on the page.
After the boot settles, this widget appears top-right. Click the command or the clipboard icon — the icon swaps to a green check for two seconds, and a hover tooltip says what's about to happen.
The background is a dither pattern modulated by a sine wave — both running on the GPU via @paper-design/shaders. The dither is a Bayer 8 matrix, pixel size 2, threshold 0.59. The sine wave at angle 162° is the source of motion; the dither threshold turns it into a moving stipple.
A second pass adds chromatic-aberrated ripples that follow the cursor. Same stack as the homepage; tuned tighter here so it reads as ambient texture, not a UI element.
Eight WebAudio samples. Five randomized key thocks for keystrokes (so it doesn't sound mechanically uniform), a softer enter, oscillator-synthesized cues for ambient feedback, the boot tone, and a looping stream hiss for response output. AudioContext is created on first interaction — never autoplay.