A page section your visitors will remember.

One platform, every terrain, shown rather than claimed. The skill builds a full-viewport three.js scene around an original concept vehicle that transforms in plain sight: wheels swing up and fold flat into their pods, two-panel wings sweep out and unfold, a skeg drops for sailing, and shutters close over the canopy before it dives. Each mode has its own handling model: tyre grip inside a friction circle on land, lift and drag with a stall past the critical angle in the air, buoyancy springing the hull to a Gerstner swell on the sea, and ballast, heavy drag and dive planes below it.

The world is one seamless place streamed in tiles around the camera, nearest first, with levels of detail and a seeded scatter of pines, scrub, cacti, coral, sea fans and kelp: a desert mesa with a cliff road and launch ramp, a forest valley, an open sea whose waves run in JavaScript for buoyancy and in the vertex shader for the surface, and a reef with caustics, a fish school and a pod of procedural whales. The mode changes at the boundaries or on a key. A HUD shows mode, speed, altitude or depth and a minimap; visitors take the wheel by keyboard or touch, or watch an autopilot tour that is a pure function of time, so captures are frame-exact.

How your agent works through it.

1. 01
   Pin down the job

   Game slice, product hero or explainer? That decides whether free drive and sound ship, how much copy sits over the scene and which mode the poster should show.

2. 02
   Lay out the world

   Edit the mesa, cliff, coast and reef parameters and the road points in config.js, then render a top-down map and check every region joins the next without a seam.

3. 03
   Tune each mode

   Set drive grip, wing area, stall angle, buoyancy and ballast. Drive each boundary by hand: off the cliff, onto the sea, under it, back up the slipway.

4. 04
   Direct the tour

   Write the tour legs so the loop opens on the strongest moment, every transformation is on camera and the loop closes on itself; keep the poster time on a striking frame.

5. 05
   Integrate and verify

   Mount it in your stack, dispose on unmount, then check keyboard, touch, 390px and 1440px, reduced motion, pause, sound, the fallback and a clean console.

Deliverables, not just a conversation.

Your agent will ask for

• What it is for: game prototype, product hero or explainer, and the target stack
• The vehicle: silhouette, livery colours and which modes it needs (kept unbranded)
• The regions and their order, plus any real place names the user owns (otherwise invented)
• Handling: top speeds, take-off speed, dive depth and how arcade or physical it should feel
• The autopilot route and loop length, and the frame that should open the page
• HUD units (km/h and metres, or knots and feet), copy, and whether sound is wanted

Runtime & requirements

• three.js 0.186 (ES module via import map or bundler)
• A browser with WebGL 2; an illustrated fallback renders otherwise
• Web Audio for the optional synthesised engine, wind and water
• Optional: Node.js 22+, Playwright and ffmpeg for exports

The sample uses a fictional brief. Brand names, copy and figures in the demo are placeholders your agent replaces with yours; the skill tells it never to invent claims or numbers.

Choose your agent.

Preserve the complete folder. Check runtime dependencies and review scripts before execution. These instructions explain the format; this package remains preview-only.