Harbor Hook

Fish a golden-hour pier, a foggy cove and a moonlit reef to fill an album of eleven original species.

Three.js4 build stagesComplete game available

Make it yours ↓Play full game ↗

Local build pack · No model call starts on this page

THE GAME LOOP

A small idea worth finishing.

Hold-release cast with a ping-pong power meter and aim; distance zones and drifting bubble hotspots change which fish bite
Nibbles versus a real bite with a short hook window; a miss costs one of three bites, never the whole cast
Tension needle against a drifting safe band with recoverable strain and slack meters; five fight patterns per species

THE LOOK & FEEL

A world with its own personality.

Original round otter with a brimmed rain hat, a jointed rod that bends under load and a sagging line to the bobber
Stylised wave shader per spot: sunset glint path, pale fog, moonlight with plankton sparkles; boats, buoys, lanterns
Procedural fish, crab, squid and ray models whose shape data also draws the album icons and catch cards

MADE FOR THUMBS

Plan the phone experience first.

One big context button (hold to cast, tap to hook, hold to reel) with aim arrows, 48px+ in safe areas; it moves to the thumb side in short landscape.

The playbook requests H5 layouts and input. Real-device playtesting is still part of the build.

01 / MAKE IT YOURS

Same spark. Your world.

Change a few details. The brief and every build stage update together.

Your main characterYour worldWhat the player wants to achieveA personal touch Optional

02 / YOUR BUILD PLAYBOOKThree.js direction

Create a cozy fishing campaign as one self-contained browser game in Three.js (WebGL2). The player is a sea otter in a yellow rain hat fishing at a golden-hour harbor pier, a misty dawn cove and a lantern dock over a night reef. Goal: meet every trip goal at all three fishing spots before each clock runs out.

Loop: hold to charge a cast (power meter, aim left or right), wait while small nibbles twitch the bobber, then hook the real dive inside a short window; a miss only costs one of three bites. Reel by holding: a tension needle must stay inside a drifting safe band while strain and slack meters fill slowly outside it, so mistakes are recoverable; letting go always eases tension. At least eight original species have real stats (size range, weight, rarity, home spot and zone) and fight differently (steady, zigzag, burst, dive, jump).

Each spot has its own light, props and data-driven goals (distinct species, named species, a heavy fish) on a clock, with a short overtime for a fish already hooked. Pick a tackle upgrade between trips. Keep an album with catch counts and records, add free fishing after the campaign, a hands-on tutorial, two difficulties, pause and settings.

The full pack adds the H5 controls, build contract and acceptance checks.

Copying, downloading and customizing are free. No build starts here.

Read the full local build pack

# Harbor Hook — SiGameGen original game brief

Prompt template, not a prebuilt game. Engine direction: Three.js.

## Project brief

Create a cozy fishing campaign as one self-contained browser game in Three.js (WebGL2). The player is a sea otter in a yellow rain hat fishing at a golden-hour harbor pier, a misty dawn cove and a lantern dock over a night reef. Goal: meet every trip goal at all three fishing spots before each clock runs out.

Loop: hold to charge a cast (power meter, aim left or right), wait while small nibbles twitch the bobber, then hook the real dive inside a short window; a miss only costs one of three bites. Reel by holding: a tension needle must stay inside a drifting safe band while strain and slack meters fill slowly outside it, so mistakes are recoverable; letting go always eases tension. At least eight original species have real stats (size range, weight, rarity, home spot and zone) and fight differently (steady, zigzag, burst, dive, jump).

Each spot has its own light, props and data-driven goals (distinct species, named species, a heavy fish) on a clock, with a short overtime for a fish already hooked. Pick a tackle upgrade between trips. Keep an album with catch counts and records, add free fishing after the campaign, a hands-on tutorial, two difficulties, pause and settings.

## Local build contract

Work in a new isolated project directory through my signed-in local Claude Code subscription. Do not call a separate model/image API, change provider settings, use an API gateway or spend on a paid service. Do not deploy, publish, commit or push without an explicit follow-up instruction. Read applicable repository instructions first.
Build a complete browser game with the full campaign and progression in the project brief. Keep the rules-first stage as development work, then finish the art, game feel and release review before calling the game complete. Include an interactive skippable tutorial, distinct data-driven levels or missions, meaningful progression, fair failure and chapter retry, a final ending, settings and replay. Pin locally installed dependencies; bundle code, engine, fonts and assets into a self-contained HTML. Use original procedural art or supplied assets with permission and keep a licence inventory. Separate deterministic rules, input, renderer, UI, audio and scene data.
SiGameGen embed contract: opaque-origin iframe, no runtime CDN/imports, fetch/XHR/WebSocket, browser storage, popups or page navigation. Keyboard and touch must work without pointer lock on phones. Emit only integer points: parent.postMessage({type:'sigamegen:game-event',version:1,event:'started',score:0}, '*') once per run, and the same schema with event:'game_over' and the final score once at win/loss. Points are not money.
Save campaign checkpoints through the host only. Request {type:'sigamegen:save-request',version:1,gameId:'<game-id>'}; accept {type:'sigamegen:save-state',version:1,gameId,state,storage:'available'|'unavailable'} only from window.parent. Validate your actual save schema, own-key IDs and ranges. Post {type:'sigamegen:save',version:1,gameId,state} with a small plain JSON state (<=8192 UTF-8 bytes); state:null explicitly clears it. Show saved only after {type:'sigamegen:save-status',version:1,gameId,status:'saved'|'cleared'|'unavailable'|'invalid'} from the parent. Failed or missing acknowledgements must stay honest and allow retry; missing storage must not block play. Local progress and scores never authorize money or rewards.
Audio is off until opt-in. Support volume, reduced motion, safe areas, controls at least 48px, portrait/landscape camera fit, pointercancel, pause/restart confirmation, tab hide and return without fast-forward. Tutorial hints must leave the action visible, and primary actions must fit short landscape screens. Stop rendering while paused, hidden and on results; cap particles/enemies and mobile DPR at 1.5. Target <=1.6MB raw / 400KB gzip; measure the actual result, not a promise. Test actual game fairness, legal-input progression, loss/retry and save validation; then review the full campaign, upgrades, ending and replay in the real sandbox at 320x568, 393x852, 852x393 and desktop. Keep inspection bots and debug controls out of release builds. Report passed checks and untested device/audio paths separately.

## Continue in the same Claude Code project

### 1. Core mechanics

Build deterministic fixed-step rules first with greybox shapes for a sea otter in a yellow rain hat at a golden-hour harbor pier, a misty dawn cove and a lantern dock over a night reef: cast power and aim, landing zones and hotspots, nibbles, bites and the hook window, tension, strain and slack, fight patterns, species weights with pity for needed fish, goals, overtime, upgrades and the album, so a player can meet every trip goal at all three fishing spots before each clock runs out. Test that nothing is caught without a bite and a hook, snaps and escapes build up gradually, releasing always eases tension, and that a careful input-only bot clears every trip while idle play loses.

### 2. Art pass

Art pass: model a sea otter in a yellow rain hat from primitives with fur, a cream muzzle, whiskers and boots; animate charge, cast, waiting, leaning back while reeling and proudly showing a catch. Build a golden-hour harbor pier, a misty dawn cove and a lantern dock over a night reef as three distinct dioramas around a cheap wave shader (sun glint, fog, moonlit sparkles) with piers, rocks, boats, buoys and lanterns. Generate every species from shape data (body, fins, tail, pattern) and reuse that data for 2D album icons. Keep a licence note.

### 3. Game feel

Make every step toward meet every trip goal at all three fishing spots before each clock runs out readable: a bobber that twitches for nibbles and dives with a splash and a HOOK cue for real bites, a rod that bends with tension, ripples, bubble hotspots, jumps and a catch card with size, weight and rarity. Teach surges with an ease-off cue. Add opt-in calm music and effects with volume sliders, reduced motion, and a three-step tutorial (cast past a buoy, ignore a nibble and hook, reel in the band) shown in a compact strip.

### 4. Review & ship

Review a sea otter in a yellow rain hat at a golden-hour harbor pier, a misty dawn cove and a lantern dock over a night reef as a release candidate at 320x568, 393x852, 852x393, 852x345 and desktop: the otter and bobber stay clear of the buttons and gauge, controls are 48px+, all menus reachable. Expose tension, the safe band, slack and strain as ARIA meters. Stop simulation and rendering when paused or hidden, validate saves with own-key ids and size checks, show 'saved' only after the host confirms, and ship one offline HTML without dev tools.

## Acceptance checks

- A careful input-only bot clears every trip on both difficulties, while idle play times out and always-reeling play snaps the line.
- No fish is caught without a real bite and a hook inside the window; a missed bite costs one bite, not the cast.
- Strain and slack fill gradually and drain back in the band; releasing the button never raises tension.
- Album entries with unknown ids, impossible sizes or wrong spots are rejected; the catch card matches the album stats.

## Research references

These are design references, not included code or assets. The prompts are original SiGameGen briefs. Model attribution in external repositories is creator-reported.

- Tidewater · dgreenheck: https://github.com/dgreenheck/tidewater
  Creator documents casting, line tension and catch cards in a detailed coastal world. Our original WebGL2 game includes three coastal spots, eleven species, tackle upgrades and a catch album. Its cover is an in-game frame with a promotional camera; the reference has heavier WebGPU requirements.
- Tidewater showcase: https://x.com/dangreenheck/status/2103004432786993341
  Original showcase link located from the public demo index. The GitHub report is the evidence used here; this X video was not rechecked in this session.

Want a quick 2D sketch first?

The online builder adapts these mechanics to Canvas 2D. The full Three.js version is built in your local Claude Code project.

Open a 2D sketch ↗Opening the builder is free. Only confirming Build game uses platform credits.

DONE MEANS PLAYABLE

The checks this game should pass.

A careful input-only bot clears every trip on both difficulties, while idle play times out and always-reeling play snaps the line.
No fish is caught without a real bite and a hook inside the window; a missed bite costs one bite, not the cast.
Strain and slack fill gradually and drain back in the band; releasing the button never raises tension.
Album entries with unknown ids, impossible sizes or wrong spots are rejected; the catch card matches the album stats.

These are requirements for your future build, not results already verified for this prompt.

RESEARCH, WITH CREDIT

What shaped this playbook.

Original SiGameGen prompts authored in our local Claude Code subscription session. References inform the design; their code, assets and prompts are not bundled. External model attribution is creator-reported.

GitHub

Tidewater · dgreenheck ↗

Creator documents casting, line tension and catch cards in a detailed coastal world. Our original WebGL2 game includes three coastal spots, eleven species, tackle upgrades and a catch album. Its cover is an in-game frame with a promotional camera; the reference has heavier WebGPU requirements.

Tidewater showcase ↗

Original showcase link located from the public demo index. The GitHub report is the evidence used here; this X video was not rechecked in this session.