Kimi K3 vs Claude Fable 5: I Ran a Blind Build-Off Across 5 Apps

Build BluePrint3D — an interactive 3D floor-plan previewer. A furnished apartment/house
shown in 3D; hovering a room highlights it and shows a detail tooltip/panel.
DELIVER self-contained blueprint3d.html. Three.js r128 + GSAP + Google Fonts via CDN allowed.
RUN AT: reasoning_effort max.

═══════════════ THE 3D FLOOR PLAN ═══════════════
Model a complete single-level home in 3D from Three.js primitives (no external models):
  - A realistic multi-room layout (e.g. 2-bed apartment): Living Room, Kitchen, Master
    Bedroom, Second Bedroom, Bathroom, Hallway, Balcony. Define via a data structure
    (rooms with floor polygons, wall segments, doors, windows).
  - FLOORS: each room's floor as a slab with a material hinting its type (wood for living,
    tile for kitchen/bath, carpet for bedrooms) — different colors/textures per room
  - WALLS: extruded from wall segments, with door GAPS and window openings cut in
  - DOORS + WINDOWS: simple framed geometry in the openings
  - FURNITURE (low-poly, built from primitives): sofa + coffee table + TV unit (living);
    counters + island + fridge + stove (kitchen); bed + wardrobe + nightstands (bedrooms);
    sink + toilet + shower (bath). Enough to make each room read clearly.
  - Soft lighting: ambient + a key light; soft shadows; a pleasant, clean architectural look
    (think a polished real-estate 3D tour, semi-stylized, not photoreal)

═══════════════ CAMERA / VIEW ═══════════════
  - Default: a nice angled "dollhouse" isometric-ish view of the whole plan
  - Orbit + zoom + pan (drag/scroll/right-drag)
  - View presets: Top-down (true floor-plan view), Dollhouse (angled), and a per-room
    "walkthrough" framing when a room is selected
  - Toggle: walls full-height vs cutaway/short (so top-down reads like a plan)

═══════════════ THE MOUSEOVER DETAIL (the core requirement) ═══════════════
  - Raycast on mouse move: the room under the cursor HIGHLIGHTS (floor/walls tint or glow,
    others dim slightly) with a smooth transition
  - A TOOLTIP follows the cursor (or a fixed side panel updates) showing that room's detail:
    room name, area (m² / ft²), dimensions, floor type, number of windows, a short
    description, and maybe an icon set (bed/bath/etc.)
  - On CLICK a room: camera smoothly frames it, a fuller INFO PANEL slides in with all
    details + a small furniture list, and the room stays selected/highlighted
  - Hovering furniture (optional nice-to-have): show the item name in the tooltip
  - Smooth enter/leave transitions on all highlights + tooltips

═══════════════ THE RICH UI ═══════════════
  - Left dock: room list (click to select/fly-to), each with area + icon
  - Top bar: view preset buttons (Top / Dollhouse / Walkthrough), wall-height toggle,
    units toggle (m²/ft²), a measure/dimensions toggle
  - Right panel: selected-room details (area, dimensions, floor, windows, furniture list,
    description) with animated entrance
  - A total summary: total area, room count, bed/bath count (like a listing header)
  - Clean architectural aesthetic: blueprint-blue + white + a warm accent, crisp type,
    subtle grid background on the UI
  - A legend for floor-type colors

DATA STRUCTURE: define rooms as data (name, floor polygon points, height, floor_type,
  windows, area, description, furniture[]) and BUILD the 3D from that data — so hover/
  click can map a mesh back to its room record for the detail panel.

VERIFY: full home renders in 3D with distinct rooms + furniture; orbit/zoom/pan work;
  hovering a room highlights it + shows a detail tooltip; clicking frames it + opens the
  info panel; view presets + wall-height + units toggles work; room list navigates;
  areas/dimensions are shown; 60fps.

Output the complete file, no truncation. The room hover-highlight + live detail readout
is the central feature — make it crisp and satisfying.

Build Neon Circuit — a polished arcade racing game with a AAA-quality animated UI layer.
DELIVER a single self-contained neon_circuit.html. All HTML/CSS/JS embedded. Opens by
double-clicking. Google Fonts allowed; no other external resources.

RUN AT: reasoning_effort max.

═══════════════ THE GAME ═══════════════
Top-down / pseudo-3D endless neon racer on a dark synthwave grid.
Canvas 960×600, 60fps, requestAnimationFrame.

GAMEPLAY:
  - Player car on a multi-lane highway (3-5 lanes), neon wireframe aesthetic
  - Steer left/right (A/D or arrows) between lanes; accelerate/brake (W/S)
  - Dodge traffic cars + obstacles; collect energy orbs + boost pads
  - Speed increases over time; score = distance + orbs
  - A pseudo-3D perspective road (scanline scaling of lane markers toward a horizon)
  - Nitro boost meter (fills from orbs, spend for a speed surge with motion blur)
  - 3 lives / shield system; crash = lose shield, screen shake, particle burst
  - Difficulty ramps: more traffic, faster scroll, hazard types unlock

VISUAL / JUICE (this is where K3 must excel):
  - Synthwave palette: deep purple/blue bg, hot-pink + cyan neon, sun-grid horizon
  - Animated scrolling grid floor with perspective
  - Glowing neon car sprites (drawn procedurally with layered glow)
  - Particle systems: exhaust, orb pickup sparkle, crash debris, boost trails
  - Screen shake, chromatic-aberration flash on crash, speed-line streaks at high velocity
  - Parallax star/city background layers

═══════════════ THE RICH UI LAYER (the K3 frontend test) ═══════════════
This is the differentiator — a genuinely premium, fully animated game UI:

  MAIN MENU:
    - Animated title with neon flicker + glow
    - Menu items with hover states (slide, glow, sound-ready hooks)
    - Animated background (the game world idling behind a blur/vignette)
    - Panels: Play, Garage, Leaderboard, Settings, How to Play
  GARAGE (car select):
    - 4-6 selectable cars, each with stats bars (speed/handling/boost) that animate
    - 3D-ish car preview that rotates (CSS 3D transform or canvas)
    - Unlock states, selection animation
  IN-GAME HUD:
    - Animated speedometer (arc gauge), nitro meter, score counter (odometer roll),
      lives/shield icons, mini lap/distance tracker, combo multiplier popups
    - Damage/boost vignette effects layered over the canvas
  PAUSE / GAME OVER:
    - Frosted-glass overlay panels, animated stat reveal (count-up),
      "new high score" celebration with confetti/particles
    - Smooth transitions between all screens (no hard cuts)
  SETTINGS:
    - Volume sliders, difficulty, control scheme, graphics quality toggle,
      color-theme picker (swap the neon palette live)
  LEADERBOARD:
    - Top 10 (localStorage), animated row entrance, current-run highlight

  ALL UI must have: smooth CSS transitions, hover/focus states, entrance animations,
  and a cohesive design system (shared color vars, consistent spacing, one type scale).
  It should feel like a shipped indie game's menu, not a prototype.

STATE MACHINE: MENU, GARAGE, LEADERBOARD, SETTINGS, HOWTO, PLAYING, PAUSED, GAMEOVER
  with animated transitions between all states.

PERSISTENCE: localStorage for high scores, selected car, settings, unlocks.

CODE ORGANIZATION (single file, but structured):
  Clear class separation: Game, Player, Traffic, Orb, ParticleSystem, Road (perspective),
  UI (screen manager), HUD, Audio (Web Audio synth SFX — engine hum, pickup, crash, boost),
  Storage. Comment the sections.

AUDIO: synthesize all SFX via Web Audio API (no audio files) — engine drone that pitches
  with speed, pickup chime, crash noise, boost whoosh, menu clicks.

VERIFY: menu→garage→play flow works; steering + collision + orbs + nitro all work;
  crash reduces shield + shakes; game over shows animated stats + saves high score;
  all UI screens reachable and animated. 60fps target.

Output the complete single HTML file, no truncation. The UI layer must be as polished
as the gameplay — that's the point of this build.

Build Orrery — a live, interactive 3D solar system with a rich information UI.
DELIVER self-contained orrery.html. Three.js r128 + GSAP + Google Fonts via CDN allowed.
RUN AT: reasoning_effort max.

═══════════════ THE 3D SOLAR SYSTEM ═══════════════
A real-time WebGL solar system the user can explore.

SCENE:
  - The Sun at center: emissive sphere with a glow/corona (shader or layered sprites),
    subtle surface noise animation, a point light illuminating the planets
  - All 8 planets (Mercury→Neptune) as spheres with procedurally-generated or
    canvas-painted textures (banded gas giants, rocky terrestrials, blue Earth with
    cloud layer, ringed Saturn with a real ring geometry, tilted Uranus)
  - Each planet orbits the Sun on its real relative orbital period (scaled to be watchable)
    and rotates on its axis (with correct-ish axial tilts)
  - Moons for Earth (Luna) and Jupiter (the 4 Galileans) at minimum
  - Saturn's rings (ring geometry with a gradient/alpha texture) and a faint asteroid belt
    (instanced particles between Mars and Jupiter)
  - A starfield skybox (thousands of points or a star texture sphere)
  - Orbit path lines (faint ellipses) toggleable

SCALE MODES (a real feature):
  - "Realistic" (true-ish relative sizes/distances — planets tiny, far apart) vs
    "Compact/Educational" (exaggerated sizes + compressed distances for a nice view).
  - Toggle animates smoothly between the two.

CAMERA / INTERACTION:
  - Orbit + zoom (drag/scroll). Smooth momentum.
  - Click a planet → camera smoothly flies to it (GSAP), focuses/frames it, and the
    info panel populates with that planet's data
  - "Follow" mode: lock the camera to a planet as it orbits
  - Free-fly toggle for exploration
  - Time controls: play/pause, speed slider (1×…100000×), "reverse", "now" reset

═══════════════ THE RICH UI ═══════════════
  A polished, sci-data overlay (think NASA-eyes / stellarium aesthetic):
  - Top bar: title, current simulation date/time (advances with the sim), time-speed control
  - Left dock: planet selector list (click to fly-to), layer toggles (orbits, labels,
    asteroid belt, moons, realistic/compact scale)
  - Planet INFO PANEL (on select): name, type, diameter, mass, gravity, day length,
    year length, distance from Sun, moons count, temperature, a fun fact, and a small
    stat-bar comparison vs Earth. Animated entrance. (Hard-code accurate planetary data.)
  - Bottom: a timeline / orbital-position mini-map (top-down radar of the system showing
    where each planet currently is; click to select)
  - Labels floating on planets (billboarded, toggleable, fade by distance)
  - A "tour" button: an auto cinematic that flies through the planets in order with the
    info panel narrating each

VISUAL QUALITY:
  - Bloom on the Sun + bright highlights; soft ambient + the Sun's point light
  - Nice materials (roughness/metalness), atmospheric rim glow on Earth/gas giants
  - Smooth 60fps; cap pixel ratio; dispose properly; reduced-motion fallback

DATA: hard-code accurate data for all 8 planets (diameter, mass, gravity, orbital period,
  rotation period, distance, moons, temp, axial tilt) so the info panels are real.

STRUCTURE: scene/lighting setup, celestial-body factory (buildPlanet with texture gen),
  orbital mechanics update, camera controller (orbit + fly-to + follow), UI/info panel,
  radar minimap, time controller, animation loop.

VERIFY: planets orbit + rotate at correct relative rates; click-to-fly-to works; info
  panel shows accurate data; time controls speed/pause/reverse; realistic↔compact toggle
  animates; orbit lines + labels + asteroid belt toggle; Saturn has rings; starfield;
  Sun glows; 60fps.

Output the complete file, no truncation. This should look like a real interactive
astronomy tool with a beautiful UI — a portfolio-grade showcase.

Build SeaLanes — an interactive visual world map showing all major global shipping routes.
DELIVER self-contained sealanes.html. Use D3.js (v7) + TopoJSON world atlas via CDN, plus
Google Fonts. (D3 for the geographic projection + world land shapes.)
RUN AT: reasoning_effort max.

═══════════════ THE MAP ═══════════════
  - A world map using a D3 geographic projection (default: a nice equirectangular OR
    an orthographic GLOBE you can drag to rotate — offer BOTH via a toggle: "Flat" vs "Globe")
  - Load world land polygons from a TopoJSON world atlas (e.g. world-atlas countries)
  - Ocean, land, and country borders styled cleanly (a premium cartographic look —
    think a dark "trade map" aesthetic: deep navy ocean, muted landmasses, glowing routes)
  - Graticule (lat/long grid) faint in the background
  - Zoom + pan (d3.zoom); on the globe, drag to rotate + scroll to zoom

═══════════════ THE SHIPPING ROUTES (the data core) ═══════════════
  Hard-code a comprehensive dataset of the world's MAJOR maritime shipping routes as
  arrays of [lng,lat] waypoints, including at minimum:
    - Trans-Pacific (East Asia ↔ US West Coast)
    - Asia ↔ Europe via the Suez Canal (the big one: China→Singapore→Suez→Rotterdam)
    - Asia ↔ Europe via Cape of Good Hope (the Suez alternative)
    - Trans-Atlantic (US East Coast ↔ Europe)
    - Europe ↔ South America
    - The Panama Canal routes (Atlantic↔Pacific)
    - Middle East oil routes (Persian Gulf → Asia; Gulf → Europe)
    - Intra-Asia, Australia ↔ Asia, Africa coastal routes
    - The Northern Sea Route (Arctic) as an emerging lane
  Draw each route as a smooth GREAT-CIRCLE-style curved line following the projection
  (use d3.geoInterpolate or path along the sphere so lines curve naturally on the globe).
  Route styling: glowing gradient lines; animated "flow" dashes moving along each route to
  show direction of travel; thickness by relative traffic volume.

  CHOKEPOINTS: mark and label the critical maritime chokepoints with special markers +
  pulsing highlights: Suez Canal, Panama Canal, Strait of Malacca, Strait of Hormuz,
  Bab-el-Mandeb, Bosphorus, Gibraltar, Cape of Good Hope. Hovering a chokepoint shows a
  detail card (why it matters, approx % of global trade).

  PORTS: plot the top ~20 container ports (Shanghai, Singapore, Rotterdam, LA/Long Beach,
  Ningbo, Shenzhen, Busan, Dubai, Antwerp, Hamburg, etc.) as markers sized by throughput.

═══════════════ INTERACTION & RICH UI ═══════════════
  - Hover a route → it highlights (others dim), a tooltip/card shows: route name, endpoints,
    approx distance, transit time, key cargo, chokepoints it passes
  - Hover a port → name, country, annual TEU throughput, rank
  - Hover a chokepoint → its detail card
  - Click to pin a route/port and keep its details in a side panel
  - LEFT UI dock: 
      * toggle groups: show/hide routes by category (container, oil/tanker, bulk),
        ports, chokepoints, graticule, country borders
      * a route list (click to highlight/zoom to a route)
      * Flat ↔ Globe projection toggle
      * animation speed for the flow dashes
  - LEGEND: line color/thickness meaning, marker types, traffic-volume scale
  - Search box: find a port or route by name → highlights + zooms
  - A subtle stats header: total routes shown, total ports, "global trade" flavor stats

VISUAL QUALITY:
  - Dark, premium "geopolitics/trade-intelligence" aesthetic (deep navy ocean, glowing
    cyan/amber routes, clean sans type). Smooth animations. Everything should look like a
    high-end data-journalism interactive (NYT/Financial-Times-grade).
  - Animated flow along routes (marching dashes / moving particles) is essential — it makes
    the map feel alive.

DATA: hard-code the routes (waypoint arrays), ports (lat/lng + TEU + rank), and chokepoints
  (lat/lng + description + trade %) as JS objects. Make the dataset genuinely comprehensive.

STRUCTURE: projection + map render, route renderer (great-circle paths + animated flow),
  ports layer, chokepoints layer, interaction/tooltips, UI dock + toggles + search, legend.

VERIFY: world map renders (flat + globe toggle, globe rotates); all major routes drawn as
  curved animated lines; ports + chokepoints plotted + labeled; hover shows correct detail
  cards; toggles show/hide layers; search works; legend accurate; smooth + premium looking.

Output the complete file, no truncation. This is a Data & Analytics showcase — the dataset
must be comprehensive and the map must look like a professional trade-intelligence tool.

Build Vinyl — a realistic 3D turntable + hi-fi music player SIMULATOR the user can
interact with in 3D. Not a flat music UI — a real 3D scene of a record player you operate.

DELIVER: self-contained vinyl.html. Three.js r128 via CDN + GSAP + Google Fonts allowed.
RUN AT: reasoning_effort max.

═══════════════ THE 3D SCENE ═══════════════
A photorealistic-leaning 3D turntable on a wooden surface in a warm-lit room, rendered
with Three.js WebGL. The user orbits, zooms, and interacts with real parts.

MODEL (build from Three.js primitives + custom geometry — no external model files):
  - Turntable base (rounded box, matte/wood material)
  - Platter (cylinder) with a spinning record (textured disc: grooves via canvas texture
    or radial line shader, a center label with the current track art)
  - Tonearm (articulated: pivot base + arm + headshell + stylus) that physically lifts
    and swings onto the record when you press play, and lifts off on stop/eject
  - Control knobs (rotary): volume, pitch/speed (33/45 RPM), tone
  - Power button, start/stop, a cueing lever
  - Optional: two speaker cabinets beside it with cones that subtly pulse to the music

MATERIALS & LIGHTING (this is the visual test):
  - PBR-style MeshStandardMaterial: wood grain, matte plastic, brushed metal tonearm,
    glossy vinyl with a subtle reflective sheen
  - Warm key light + soft fill + a rim light; soft shadows (shadow maps)
  - Environment reflection (a simple gradient env map / PMREM) for the metal + vinyl
  - Subtle bloom on the power LED and highlights

═══════════════ INTERACTION & SIMULATION ═══════════════
  - OrbitControls-style camera (implement manually if needed): drag to rotate, scroll to zoom
  - Click the power button → LED on, subtle hum
  - Click play / move the cueing lever → tonearm animates onto the record (GSAP),
    record starts spinning (RPM depends on 33/45 selection), audio plays
  - Drag the tonearm manually → scrub position on the track (real interaction)
  - Turn the pitch knob → record spin speed + audio playback rate change together
    (real turntable pitch-bend feel)
  - Turn the volume knob → volume; tone knob → a lowpass filter cutoff
  - Stop → tonearm lifts and returns, platter spins down with inertia
  - Swap records: a small stack/crate of 3-4 albums beside the turntable; click one to
    load it (record art + track changes, swap animation)

AUDIO:
  - Use Web Audio API. Include 2-3 short royalty-free-style looping tracks generated
    procedurally (synth pads/beats via oscillators) OR let the user drag-drop an audio
    file onto the scene to play their own. (Default: procedural tracks so it works offline.)
  - Playback rate ties to platter RPM + pitch knob (authentic turntable behavior)
  - Volume + tone (lowpass) knobs affect the audio graph in real time
  - A subtle vinyl-crackle layer for authenticity (synthesized noise)
  - Speaker cones + a small spectrum visualizer react to the audio (AnalyserNode)

═══════════════ THE RICH 2D UI OVERLAY ═══════════════
  A tasteful HUD layered over the 3D scene:
  - Now-playing card (track title, album art, elapsed/total, progress)
  - Transport controls (also operable via the 3D parts)
  - A real-time audio spectrum / waveform visualizer
  - RPM indicator (33/45), pitch % readout
  - Record crate / playlist selector
  - A "view" toggle: front / top / cinematic auto-orbit
  - Warm, hi-fi aesthetic: cream/charcoal/brass palette, clean type

PERFORMANCE: cap pixel ratio at 2, dispose properly, keep 60fps. Reduced-motion fallback.

STRUCTURE: organize into scene setup, model builders (buildPlatter, buildTonearm,
  buildKnobs...), interaction handlers, audio engine, UI overlay, animation loop.

VERIFY: camera orbits; power/play/stop work; tonearm animates onto/off the record;
  record spins at correct RPM; pitch knob bends speed+audio together; volume/tone work;
  swapping records changes art+track; visualizer reacts; looks genuinely like a hi-fi.

Output the complete file, no truncation. This must read as a REAL 3D turntable simulation,
not a flat player with a spinning circle.