---
name: coastal-cycle
description: Build an interactive SVG cycling illustration with rolling wheels, continuous gear-driven pedals, solved limb joints, coastal parallax and editable routes.
version: 0.1.0
---

# Coastal Cycle

Ride Harbor Pelican, an authored vector bird on a coral bicycle beside the sea. Wheels roll through measured distance; the crank follows the selected gear and both feet stay on their moving pedals through solved two-link joints. Brake, reverse, ring the bell, wave a wing and explore three routes with English and Simplified Chinese mouse, keyboard and touch controls.

## Run

```sh
node scripts/fill-prompt.mjs --slots assets/prompts/examples/harbor-pelican.json --out prompt.md
node scripts/new-project.mjs --out my-cycle
cd my-cycle && npm ci
npm run dev
npm run build:single
npm run shoot -- --file dist-single/index.html
```

Give the filled prompt and editable project to a coding agent. Change the supported limb lengths, gear ratios, speed and route colors/names in `src/ride.json`. The authored frame and rider anchor layout is fixed by validation; structural anchor, wheel-size or frame changes require updating the SVG, validator and verification together. Deliver source, a single offline HTML and bilingual reports. Build only inside generated or temporary projects.

## Interact

Use Speed to set the pace and hold Brake to slow the actual motion. Gear changes preserve crank phase. Reverse eases through zero speed and drives the geometry backwards. Route and Rain change the environment. Move across the ride to turn the head, or tap/press it to ring. Bell tones are optional and start muted. Focus view hides controls and has a visible exit; Escape also exits.

Native buttons and the speed range support keyboard use. Outside controls: Space pause, B hold brake, G gear, N route, W rain, L bell, F wing, D reverse, R reset, M sound, C focus view. Reduced motion starts paused and removes decorative body/wing/rain movement; Ride explicitly starts essential wheel and scenery motion.

The fixed60Hz clock integrates signed travel. Wheel angle equals distance divided by the outer tire radius; crank increments use the gear ratio. Both feet are actual crank endpoints; inverse kinematics solves knees and the arm. SVG tire extents, crank transforms, limb paths and foot transforms are inspected by the browser checks. Parallax layers and the chain move from the same measured travel.

## Limits and credentials

This is a planar kinematic illustration, not a vehicle, bird anatomy or freewheel simulation. Net travel is signed and can decrease in reverse. Route scenes are authored loops, not maps. State is temporary; reset restores defaults. There are no model calls, uploads, credentials, recorded sound or external runtime assets. Optional sound is a short synthesized bell; no listening or physical-device performance acceptance is implied.

## Verify and troubleshoot

See `references/verification.md` and `references/hosting.md`. Node22.4+ and the pinned npm dependencies are required. Missing Chrome stops browser verification. Invalid ride data fails with stable rule codes. SVG needs no WebGL; the shared startup error handshake retains the family code. Pause freezes easing and pulses; direct controls remain usable.