22 · Oddvolt: a Eurorack maker whose whole page is a working synth
Oddvolt Modular is a made-up maker of synthesizer modules. The page is a rack of six real-looking modules that make sound. You drag a rubber-physics patch cable from an orange output jack to a cream input jack, and the music changes. What makes people stop is that the cable is the interface: it sags, swings, twitches with the signal running through it, and the audio actually follows how you plugged it.
Inspiration
The idea comes from a product page asking "why describe the thing when they can touch it?". Eurorack is the right subject because patching is already the whole point of the hardware: outputs go to inputs, and nothing works until you wire it.
Borrowed pieces, all named in the source:
- A Uiverse power switch (by mrhyddenn) for the Lighthouse module.
- Magic UI's Border Beam, ported to plain CSS from its registry source, for the cart drawer edge.
- GSAP 3.15: Draggable for plugs, ScrollTrigger to know which module you are on, SplitText for the headline, ScrambleText for the patch name.
Added on top, all hand-written: the verlet rope cables, the Web Audio synth that is wired by the patching, the phosphor scope with a spectrum, and the "follow cable" that hangs from Lighthouse's MON jack and plugs into each module as you scroll to it.
Visual direction
- Palette: anodized black
#121212, module faces cream#e9e4d8, signal orange#ff6a13. Cables are red#e5383b, yellow#ffc23d, blue#2f7bff, green#2bb673. - Type: Michroma for headings and module names, Chakra Petch for body, Share Tech Mono for every label and readout.
- Layout: a hero rack of six modules (Tinpot oscillator, Wobbler LFO, Stepchild sequencer, Huff envelope, Murk filter, Lighthouse VCA and output) on metal rails with screws. Outputs are printed in orange boxes so the rule "orange is out, cream is in" is visible. Below it, one product section per module with a live clone of its face, a draw-a-tune grid, four patch cards with wiring diagrams, a short "nothing here is a recording" section, and a cart.
- Motion: knobs sweep, cables fly in on a preset, LEDs follow the real signal, the scope redraws every frame. The top bar is solid on purpose, with no blur over the moving rack.
- Signature moments: (1) drag a cable out of an empty jack and drop it in another; (2) the whole rack re-patches itself when you load a preset; (3) the orange cable following you down the page, and you hear each module alone on Tinpot and Murk; (4) the scope on Lighthouse showing exactly what leaves the rack.
Theme, kit and licenses
Theme: Showpiece, Loud. The instrument is the product, so the effect has to be the page. No theme lines were changed. It is a poor fit for the calm themes because patching, scopes and moving cables are on screen at once.
Kit parts used: uv-piece.js (the Uiverse switch, fetched with uiverse-get.py) and fps-chip.js (shown with ?fps). Everything else (GSAP, Web Audio, Canvas, SVG) is from TOOLKIT.md or written in the file. No Paper shader, glass, map or Kitbitz art is used.
| Source | License |
|---|---|
| Uiverse power switch by mrhyddenn | MIT |
| Magic UI Border Beam (fetched 21 Oct 2026) | MIT, copyright 2023 Magic UI |
| GSAP 3.15.0 (core, Draggable, ScrollTrigger, SplitText, ScrambleText) | GSAP standard no-charge license |
| Michroma, Chakra Petch, Share Tech Mono | SIL Open Font License |
| Kit parts and everything else | ours |
References
- Uiverse, https://uiverse.io/mrhyddenn/silly-starfish-53: the rocker power switch.
- Magic UI, https://magicui.design: Border Beam, the masked border with a gradient square riding
offset-path: rect(). - GSAP, https://gsap.com: Draggable (plugs), ScrollTrigger (follow cable), SplitText (headline), ScrambleText (patch name).
Why these choices
A synth page only works if it works with no setup, so the first six cables are already in and one switch starts the sound. Audio is off until the visitor flips power, which browsers require anyway. The synth is real: input gains scale into detune, frequency and VCA gain, so patching a different cable changes the sound. The VCA stays open when nothing is in CV, which is why the "Night bus" patch drones. A compressor sits on the output so a loud patch cannot hurt anyone.
Trade-offs: the rope simulation only runs for cables that are awake (a frame counter), and scopes only draw when on screen. Reduced motion swaps the swinging rope for a still parabola and removes the intro, the jitter and the beam. Phones get tap-two-jacks patching, because dragging a small plug is hard on glass. A built-in status line announces each patch for screen readers, and knobs are sliders with arrow-key control.
Who this kind of site is for
It wins for instrument and gear makers, audio studios, toy and STEM brands, and any product people should touch before they buy. It would be the wrong call for a plain services business, where the visitor wants a phone number, or for anything that must load fast on old phones. The module-face and knob parts would carry over to a different gadget.
How to make it
Stack and key techniques
- One HTML file, about 1,250 lines of hand-written source plus two kit parts.
- Verlet rope cables (18 points, 16 constraint passes) drawn as three SVG paths, with plugs as GSAP Draggable.
- Web Audio graph: oscillator, LFO, constant sources for pitch, gate and envelope, a biquad filter, a gain as VCA, a compressor, analysers per output.
- An 8-step sequencer scheduled ahead of the audio clock.
- Canvas scopes: triggered waveform with auto gain and a spectrum, and scrolling strips for control signals.
- Four presets, patch state encoded into the URL hash.
The prompt
Build a single-file website (index.html, no build step) for "Oddvolt Modular", a fictional maker of Eurorack synth modules. The page itself must be a working six-module synthesizer.
Look: background #121212, cream module faces #e9e4d8, signal orange #ff6a13, cables red #e5383b, yellow #ffc23d, blue #2f7bff, green #2bb673. Fonts: Michroma for headings, Chakra Petch for body, Share Tech Mono for labels. Draw every module face with CSS and SVG (screws, rails, knobs with an orange arc, hex jacks). Outputs sit in orange boxes, inputs are cream.
Hero: a rack of Tinpot (oscillator), Wobbler (LFO), Stepchild (8-step sequencer), Huff (envelope), Murk (lowpass filter) and Lighthouse (VCA, scope, power switch, volume). Six cables are already patched.
Cables: verlet ropes with gravity that sag and swing. Drag out of an empty jack to make one, drag plugs between jacks, tap two jacks on a phone, tap a plug to pull it. One cable per jack, no input to input. Cables twitch with their signal.
Sound: Web Audio, built when the power switch is flipped. The audio graph must follow the patching for real. Sequencer scheduled ahead of the audio clock drives pitch and gate. Nothing patched into the VCA CV means it stays open. Add a compressor on the master.
Scopes: a triggered phosphor scope with spectrum on Lighthouse, and a small scope in each product section.
Page: one product section per module with a live clone of its face, specs and an add-to-cart button. A "draw a tune" step grid. Four patch cards with SVG wiring diagrams that re-patch the rack with animation. A follow cable: an orange cable hangs from Lighthouse's MON jack and plugs into each module's monitor jack as you scroll; on the oscillator and filter you hear that module alone. A cart drawer with a whole-rack discount and a note that nothing ships. Patch links in the URL hash.
Constraints: GSAP 3.15 from jsdelivr (Draggable, ScrollTrigger, SplitText, ScrambleText). Solid top bar, no blur over moving content. Keyboard-operable knobs. prefers-reduced-motion: still cables, no intro. Work at 1440 and 390 px with no horizontal scroll. Mark it as fictional.
Verify: serve it, test with a browser script (tap patching, dragging, presets, power, the cart, the link round trip), take screenshots at several scroll stops on desktop and mobile, read the console, fix, repeat.
Build notes
- CSS attribute selectors on inline style stop matching once GSAP animates that element, so the code uses a data attribute.
- Layout is read first thing in each frame, before any style writes, to avoid layout thrash.
- Headless testing ran at about 5 fps, so motion screenshots catch cables mid-flight; layout was judged on reduced-motion runs.
- Touch dragging of cables on a real phone is untested (tap-two-jacks is tested). Safari and Firefox are unchecked, and Border Beam needs
offset-path: rect(). - The follow cable can briefly cross strip text while it swings in. Nobody has listened to the audio.
Stepping down: what you would likely lose
This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, and the main evidence is Anthropic's tiering plus earlier-generation reviews.
| Feature | Sonnet 5.5 with this kit | Sonnet 5.5 from a blank page |
|---|---|---|
| Uiverse power switch with focus ring | Does fine: the kit part and fetch script carry it | Likely simplifies to a plain toggle, or attempts it with class clashes |
| Module faces (knobs, jacks, rails, screws) | Does fine on structure, probably a little flatter than this | Does fine, but likely more template-like |
| Verlet rope cables with drag, tap, replace rules | Attempts it with likely bugs: plug and rope ends drifting after resize, or a stuck drag state | Attempts it with likely bugs, and probably drops tap-to-patch and the drape for reduced motion |
| Web Audio synth that follows the patching | Attempts it with likely bugs: gain scaling off, clicks, or the VCA closing with no CV | Likely simplifies it to a fixed chain with cables as decoration |
| Sequencer scheduled ahead of the clock | Attempts it with likely bugs: timer-based drift, LEDs out of sync with audible steps | Likely uses setInterval timing with audible jitter |
| Phosphor scope with spectrum, mini scopes | Does fine on a basic trace; trigger and auto gain are simplified | Likely a plain scrolling line |
| Follow cable and per-module monitor routing | Attempts it with likely bugs: scroll jumps, wrong module active | Likely simplifies away |
| Border Beam, patch link, cart | Does fine: registry source and simple state | Does fine on cart; beam likely approximated |
Overall (judgment call): with this kit, roughly 60 to 75 percent of the visual and interactive impact would likely survive from one pass. From a blank page, roughly 35 to 50 percent. The kit only covers two small parts here, so it helps less than on sites built around shaders or glass; most of this page is original logic. A screenshot and test loop with a browser would close much of the gap, and splitting the build into rack, audio and page would help more than extra iterations on one file.