Procedural robotic giant squid teardown

Build a single self-contained HTML file: an interactive, fully procedural 3D robotic giant squid called "Architeuthis AX-10" (brand mark "Teuthis"), rendered with three.js r170 loaded via an importmap from jsDelivr. No external models, textures or images; every part is generated in code at load time. Target quality: a premium product-simulator / engineering teardown page with thousands of real moving parts.

LOOK
- Bright studio look: near-white background (canvas-drawn, soft lavender corner gradients, faint dot grid top-right), white glossy shells with clearcoat, near-black mechanical internals, violet accents (#8a4dff) and glowing violet emissives.
- No tone mapping; calibrate lights so white shells stay just below 1.0 and keep visible shading (no blown-out whites). Hemisphere + key directional light with soft PCF shadows (2048 map) + fill + rim + RoomEnvironment PMREM reflections. Invisible shadow-catcher floor plus a soft contact shadow blob.
- Post: EffectComposer with HalfFloat MSAA target, GTAO (hide background, floor, emissives and decorative lines during the AO prepass), UnrealBloom with a high threshold (~1.5) so only emissive parts glow, OutputPass.
- Procedural surface-detail shader injected into MeshPhysicalMaterial via onBeforeCompile: clustered drill holes, short slots, rivet rows parallel to every panel edge, and a dark seam groove along panel borders. Geometry builders write per-vertex metric surface coordinates and distance-to-panel-edge attributes so holes stay round and evenly sized; antialias with fwidth; holes kill clearcoat; per-instance seed so instanced links differ.

GEOMETRY TOOLKIT
- revPanel(): surface-of-revolution panel with real thickness (outer, inner, flat-shaded rims), profile from Catmull-Rom-smoothed points, angular range, offset. Plus extruded gears, spline tubes/cables, rounded boxes. Merge each part's geometry per material.

MODEL (body frame: +z toward the arms, +y dorsal)
- Mantle (~1.2 m ogive cone) on a neck joint so it can swing relative to the head: 28 separate shell panels with gaps, hinge knuckles, violet tiles, LEDs and vent slots; a hinged glass window along the top that opens 110° (hinge axis computed from the panel edge); under it 8 lit violet piston bays, each with 16–24 black components, pistons with steel rods, capacitors, coils, headers; dark inner hull; tail cap with glowing tip; collar ring with 60 bolts.
- Head (slightly enlarged sub-frame): 15 shell strips, each auto-populated without overlaps with printed glyphs (Y, arrows, T, X), inset hatches with four screws, vent grilles, sensor ports with LEDs, steel grab rails, seam hinges; two antennas at the back.
- Visor plate on 6 steel lift pins. Under it a deep head cavity lined with a glowing violet motherboard: finned heat-sink processor, 7-blade spinning cooling fan, 3-ring gimballed gyro (rings spin on different axes), capacitor bank, twin steel coolant lines, cable harnesses to the eyes, ribbon cable, 3-gear head drive with correct ratios, and a sensor deck with a sonar puck on standoffs that lifts away.
- Two eyes: white donut housings with bolts, black glossy lens, glowing violet rings and glyph, 4 threaded telescoping barrel rings, 10-blade iris (each blade pivots), sapphire glass dome with rim.
- Dark hub under the head with ring gear, motors and cables; a central siphon with 3 nested telescoping sleeves and a 10-blade turbine whose glow follows thrust.

ARMS
- 8 arms (20 links) + 2 longer tentacles (30 links, clubbed). Links are built in unit-radius space with length = 2 × radius so everything scales uniformly; radius tapers from ~6 cm.
- Per link, GPU-instanced pieces: white or violet shell (two variants), ball joint with steel pin, chain side plates, two violet roller wheels with dark hubs on the oral side, plus occasional side modules, dorsal tiles and violet bands. Update all instance matrices on the CPU every frame.
- Quaternion forward kinematics: root frame spreads around a crown axis blended between the body axis and world-down (so arms splay octopus-like on the floor); per-link curvature = base bend + log-spiral tip term (curvature ∝ 1/remaining length, rollers inside the curl) + travelling wave; per-arm random variation. Blend poses: standing, jetting bundle, single arm stretched. Auto-ground the body so the lowest link touches the floor.

RIG AND TIMELINE
- Every rigid part is a registered group with base transform, chapter offsets and an explode vector; explode cascades with per-part delays, ease5 and free spin. Spin phases use the integral of a trapezoid speed profile so everything is deterministic.
- A pure stateAt(t) function (no accumulation) drives a ~28 s loop: jetting in mantle-first, settle and stand, Optics (barrels extend, iris cycles, dome lifts), Head core (visor lifts, then deck lifts while the camera slowly orbits the open cavity), Arm (one arm straightens, shells lift off the roller chain, spiral tip), Mantle (glass window opens over lit bays), Siphon (sleeves telescope, turbine spins up), Teardown (all parts free with a 360° turntable), Reassembly, Launch (arms bundle, jet off).
- Per-chapter camera shots computed in body axes with eased blends; decorative thin orbit lines with node markers around the camera target.

UI (HTML/CSS/SVG overlay, Inter Tight + IBM Plex Mono)
- Logo top-left, "Live sim" pill top-right, centered model line + title "Colossal Squid, Lens to Siphon" + date, chapter pills, left nav with sub-lines, right telemetry cards (mantle pressure kPa with 6 s sparkline computed from stateAt, jet thrust bar, arm load bars for 10 arms from real curvature, battery), bottom status "Chapter · NN% apart" with progress track and timecode.
- 3D-anchored callouts: anchor dot on the real part, leader line, white label card; two columns with collision spacing.
- Clicking a pill/nav item seeks the timeline with a smooth camera blend; drag to orbit (free camera); double-click or R returns to auto camera; space pauses; click the track to seek. Responsive phone layout, prefers-reduced-motion support, adaptive quality governor (fewer GTAO samples, then DPR 1, then GTAO off).

CAPTURE AND AUDIO
- Expose https://window.sim.seek/(t) for deterministic frame capture (capture mode: no rAF loop, CSS transitions off). Render 1920×1080 at 60 fps with headless Playwright, sampling the timeline at 1.68× so the video is exactly 17 s; encode H.264 CRF 17 with AAC audio.
- Original synthesized score (numpy/scipy, no samples), one bar = one chapter so every change lands on a downbeat, plus synced sound design: jet roar, servos, lens clicks, visor hiss, fan spin-up, gear ticks, gyro tinks, chain clatter, glass ting, piston thumps, turbine spin-up, teardown impact with hundreds of part clinks, reverse swell into reassembly, launch roar. Normalize to about −21 LUFS.

Source: the creator's reply under the post. Kept in its original language, unedited.

Tools the creator mentioned

More 3d worlds

• 5:06

  Elaborate overnight scene from shared prompt

  20.2M views

• 0:17

  AI-generated running cow animation

  1.4M views

• 0:53

  Video recreated as a GLSL shader

  1.1M views

• 0:22

  4D gaussian splat reconstruction from video

  911.5K views

• 3:47

  Procedural ocean island simulation

  900K views

• 0:40

  Tentacle egg-laying rig

  804.1K views

Related articles

• A Practical Guide to Claude Code Skills: Your Secret Weapon for Developer Productivity

  A deep dive into Claude Code's Skills system, covering Design Skills evaluations, SEO audits, code quality guardrails, and other hands-on techniques.

• Same Name, Different Game: Comparing Two SEO Audit Skills and Which to Use

  The Claude Code Skills ecosystem is growing fast — fast enough that naming collisions are starting to happen. Two skills both called seo-audit exist, and they take completely different approaches. Here's a side-by-side breakdown and recommendation.

• How I Built JasonZhu.AI: Tech Stack, Architecture, and Full Cost Breakdown

  A complete record of building the JasonZhu.AI personal brand website — from choosing the tech stack to going live, including the full stack, implementation details, development tools, and cost breakdown. How an AI blogger built a website using AI tools.

• Andrew Ng's 2026 'AI Prompting for Everyone' Module 2 Complete Notes: Turning AI into Your True Thinking Partner

  Complete English notes for Andrew Ng's 'AI Prompting for Everyone' Module 2. 8 lessons covering: how to brainstorm with AI, manage context, use desktop agents, apply deep reasoning, avoid AI sycophancy, iterate on writing, and conduct objective reviews. 10 ready-to-use prompt templates you can copy right away.