Four Claude Models Built the Same Switch. Here’s What Changed

Make "Deep Dive Switch", No. 063 in a series of web material studies: a depth switch that goes from light to dark, from the sea's surface to the floor of the abyss. Build it as one self-contained page with no libraries: raw WebGL2, Web Audio and a 2D pixel buffer.

PAGE
- Editorial layout: a small kicker "Material Studies / No. 063 · WebGL + Web Audio", an italic serif title "Deep Dive Switch.", and a one-line caption.
- The switch sits centred and large. Below it go three readouts (Depth, Zone, Music), a hint line and a "Sound on/off" button.
- The whole page's colours (background, text, lines) follow the depth: pale aqua at the surface, near-black blue in the abyss.
- It must work at phone width.

THE SWITCH
- A pill-shaped switch in a moulded bezel: white glossy plastic at the surface, deep navy in the abyss.
  - A soft drop shadow falls on the page and fades to nothing before the canvas edge.
  - A slight inner shadow runs along the top of the track.
- Inside it is a 176×50 pixel-art cross-section of the sea.
  - Redraw it every frame on the CPU and show it with nearest sampling, never smoothed.
  - Use whole device pixels per scene pixel where there is room.
- The knob is a glass bathysphere: a vertical capsule of clear glass, a little taller than the track, drawn in a single full-canvas WebGL2 fragment shader.
  - It magnifies what is under it (about 1.28×) and bends it.
  - At its rim it splits R, G and B. A darker refraction band sits inside a bright edge, with a Fresnel tint and a faint aqua cast.
  - Two highlights: a long soft streak at the upper left and a small dot at the lower right.
  - Light gathers toward its foot, and it casts a soft shadow on the scene.
- Motion:
  - It follows the finger on a spring, lagging a little.
  - It stretches sideways with speed and squashes vertically to keep its volume.
  - It wobbles on a damped spring driven by its acceleration.
- Controls:
  - Drag the knob, or drag anywhere on the track.
  - Tap to send it to the other end; it travels there on its spring.
  - A tap is a press and release that moves less than a few pixels. Any press that moves further is a drag.
  - Arrow keys, Home/End and Space/Enter also work.
  - The switch has role="slider" with ARIA values.

THE SEA (left = shallow, right = deep; an original palette)
- Sprites are filled shapes stamped with an automatic 1-px outline and a light top / dark bottom.
- The sea floor, left to right:
  - a sandy beach with a sandcastle;
  - a reef plateau with rocks;
  - a drop-off into rocky deep water;
  - the abyssal floor rising again at the far right.
- Up top on the left is sky with a sun, two flapping gulls and a little red sailboat bobbing on animated waves with a foam line.
  - The surface is level over the shallows, then rises out of the picture toward the deep, so the view seems to sink.
- The shallows:
  - turquoise water with swaying slanted god rays and moving caustics on the sand;
  - branching corals in pink, orange and violet, brain corals, swaying sea grass;
  - an anemone with a little orange-and-white fish darting about it;
  - a sea turtle gliding back and forth, paddling;
  - a school of yellow fish circling over the reef that scatters away from the knob.
- The twilight zone:
  - the water darkens to deep blue;
  - three translucent jellyfish, pink and violet, pulse and trail wavy tentacles; they glow softly and pulse faster when the knob comes near;
  - every half minute a faint whale silhouette swims past in the background.
- The midnight zone:
  - a long swaying chain of glowing cyan-and-green beads (a siphonophore);
  - small dark lanternfish with blinking light spots;
  - marine snow drifting down.
- The abyssal floor:
  - a hydrothermal vent breathing bubbles;
  - an anglerfish with a rod and a glowing lure;
  - a treasure chest.

LIGHT AND THE DIVE
- Daylight falls off with depth and dims a little toward the floor. It is quantised and Bayer-dithered so the gradient steps like pixel art.
- Below the shallows the bathysphere's searchlight comes on: a stepped, dithered pool of light around the knob, with a blue haze scattered in the water.
- Inside the lens everything is shown lit.
- Behind the knob trail rising bubbles and, in the dark, sparks of blue bioluminescence.
- Glowing crescent echoes trail behind it: pale aqua in the shallows, cyan in the deep.
- The lure lights its own little pool.
- As the knob nears, the anglerfish turns and opens its toothy mouth wide, and its lure blazes.
- At the very bottom the chest lid swings open on glowing gold, and gold glints fly up from it.

SOUND — all synthesised live with Web Audio, original music
- 84 BPM, a four-bar loop in D minor (Dm7 · B♭maj7 · Gm7 · A7sus4), on one lookahead-scheduled clock with a little swing.
- Layers fade in and out with depth:
  0. The surface: waves (filtered noise swelling slowly) and gull cries. The moment you go under, a splash, and the waves drop to a dull underwater roar.
  1. The reef: a kalimba ostinato (sine with bright, quickly fading overtones, in a long reverb), with bubbles popping on the off-beats.
  2. A soft dub beat: a round kick, rim clicks into a dotted echo, a swung shaker, a deep bass.
  3. The twilight: slow detuned pads, a whale singing now and then (a gliding, vibrato tone through a formant filter), then sonar pings ringing in the echo.
  4. The abyss: a breathing sub drone, a slow lub-dub heartbeat, and glassy arpeggios of high pentatonic notes ringing in the echo.
- The music sits behind a gentle low-pass that closes a little with depth, about 5 dB under the switch's own sounds.
- Switch sounds:
  - a bubble bloop when grabbed, a plop when released;
  - a water swish and bubble pops that grow with drag speed;
  - a splash crossing the surface either way;
  - a glass chime past each jellyfish;
  - the angler's deep gulp;
  - a fanfare when the chest opens: a rising kalimba arpeggio, a low boom and a shimmer.
- Audio starts on the first touch; a Sound on/off button.

READOUTS
- Depth, 0 → 6,000 m, mapped to the zones.
- Zone: Surface / Sunlit / Twilight / Midnight / Abyss.
- Music: the name of the layer that leads at this depth: Waves / Reef kalimba / Dub beat / Twilight pads / Abyss drone.

DEMO
- A "Play the dive" button sits next to the sound button. It runs a scripted 20-second dive: from the surface to the floor in 10 seconds, a 2-second hold at the open chest, and back to the surface in 8 seconds. Any touch or key stops it.
- All random choices come from one seeded generator, so every run of the demo looks the same.

QUALITY BAR
- Deliver one file named index.html. It makes no network requests: no web fonts, images or audio files.
- Smooth at 60 frames a second on a laptop.
- No errors or warnings in the console.
- Before you deliver, open the page, run the demo once, and fix what is broken.

Build an interactive piece called "Neon Heat" as one self-contained HTML file (inline CSS and JS, no libraries, no image or audio files). All UI text in English. Deliver the file as index.html.

CONCEPT
One oversized horizontal slider is the whole page. Its value is a police "heat" level from 0 to 5. The track is a pill-shaped window onto a side-scrolling neon boulevard in an invented 1980s-style beach city; the thumb is a thick glass lens. The lens always sits over the getaway car, so dragging right both raises the heat and makes room behind the car for more pursuers. The mood is neon noir: hot pink, cyan, purple, sodium amber. Everything must be original: no logos, names, characters, fonts or HUD elements from any existing game.

RENDERING
- Draw the scene procedurally on an offscreen Canvas 2D (virtual size 1600x440) every frame, upload it as a texture, and render the instrument in one WebGL fragment shader: dark glossy pill bezel, a thin neon rim line running pink to cyan, a soft neon underglow instead of a drop shadow, inner shadow on the window, light bloom, faint scanlines and grain.
- The lens is a superellipse taller than the track. Inside it: magnified centre, compressed rim, slight chromatic aberration, a crisp highlight line (pink top-left, cyan bottom-right), a soft specular smear, and a shadow under it. It squashes slightly when moved fast and swells when pressed.
- If WebGL is unavailable, show the 2D scene in a rounded pill with a simple CSS thumb.

THE WORLD (one smoothed "heat" value drives everything)
- Sky goes from sunset (indigo, magenta, pink, orange) at 0 to deep night at 5; a striped synthwave sun sinks below the bay and stars come out.
- Layers with parallax: far skyline across the water, art-deco hotels in three silhouettes with lit windows, neon roofline trim and glowing signs with invented names (Flamingo, CLUB NOVA, Coral Bay, MOTEL, Tiki Bar, ARCADE, Lola's, OPEN 24H, Pink Palm), palm trees, lamp posts alternating pink and cyan, wet asphalt with soft colour reflections, lane dashes that stretch with speed.
- Scroll speed by heat: 0, 23, 52, 84, 113, 142 mph.

THE STORY
0 Parked: a pink convertible with a driver and a passenger, a duffel bag on the back deck, music notes drifting up from the radio, two flamingos on the sidewalk.
1 Noticed: one black-and-white patrol car pulls in behind with red and blue lights; the flamingos fly off.
2 Pursued: two cars; banknotes start fluttering out of the bag.
3 Shots fired: three cars and a helicopter whose searchlight stays on the convertible; tracers, muzzle flashes, sparks, bullet holes; the passenger shoots back.
4 All units: a tactical van and a second helicopter; hit cars drop back trailing smoke; the convertible's hood smokes.
5 Citywide: an armoured truck with a turret; every few seconds a pursuing car explodes (fireball, shockwave ring, debris, burning wreck left behind) and a replacement arrives.
Lowering the heat reverses it: units fall away, and when everything is calm the flamingos walk back.
The bezel glow and a faint wash over the scene pulse red and blue with the sirens (under 3 flashes per second); explosions shake the view. Respect prefers-reduced-motion.

SOUND (WebAudio, all synthesized, starts on first interaction)
A synthwave loop in A minor (Am, F, C, G): pad and arpeggio from the start, sounding like a car radio at heat 0 and opening up as heat rises; drums from about 1.5, hats from 2.5, a lead line from 3.4; tempo rises from 96 to about 130 BPM. Add surf at low heat, an engine tone tied to speed, up to three sirens that switch from wail to yelp at high heat, helicopter chop, gunshots, explosion booms, a siren whoop when the first car appears and a tyre screech on hard launches. Run everything through a compressor. A "Sound: on/off" button remembers its state.

PAGE
- One dark look: background #0B0716, text #F3EBFF, muted #9C91B8, pink #FF3EA5, cyan #36E7FF, amber #FFD166.
- Fonts from Google Fonts: Mr Dafoe (neon script title and script signs), Monoton (big numeral and tube signs), Barlow Condensed (labels), Barlow (body).
- Top: small label "Coral Drive · Heat 0–5", the glowing script title, and two buttons: "Play the chase" and "Sound: on".
- Middle: the instrument, full width. Under it, six tick buttons 0–5 aligned with the lens travel.
- Below: a large neon numeral with five heat bars, the level name, a one-line dry caption per level, and on the right the speed in mph and "N units in pursuit".
- Level names: Parked, Noticed, Pursued, Shots fired, All units, Citywide. Captions in a deadpan tone, for example level 1: "One patrol car, one long look. It is probably the tail light." and level 5: "Everything with a siren is here. Something explodes roughly on schedule."

INTERACTION
Drag the lens, click anywhere on the strip to jump, click a tick, or use arrow keys, Home and End. The strip has role="slider" with proper aria values. "Play the chase" runs a 28-second scripted demo from 0 up to 5 and back. Works with mouse and touch, down to phone width, with no horizontal scrolling.

QUALITY BAR
Smooth at 60 fps, deterministic simulation from a seeded random generator, no console errors, and every level must read clearly in a single still frame.