# Ocean Shallows: Top-Down Tropical Sea

- Author: @vib3coded
- Card: Creator prompt
- Theme: Water & sky
- Stack: Not rebuilt
- Interaction: Pointer
- Licence: Credited link (Shared publicly by the author; full text with credit, removed on request)
- Verified: not yet
- Original post: https://x.com/vib3coded/status/2111170001403040187

## Original prompt

```text
Build a single-file Three.js r128 (cdnjs) WebGL page titled "Ocean Shallows": a top-down view of a tropical sea filling the whole screen, with a small curved beach in the top-left corner.

Water:
- GPU height-field ripple simulation with absorbing screen edges.
- Refraction and moving caustics.
- Long swell rolling toward the shore, plus fine sun glitter.
- Depth-based color: pale turquoise near the beach, deep sapphire offshore.
- On the beach, waves break, rush up the sand as foamy swash with lace foam, then drain back and leave glossy wet sand.
- The shadow of a swaying palm (trunk and fronds) falls across the beach and the shallows.

Seabed (baked):
- Rippled sand and seagrass meadows.
- Coral heads and boulders with contact shadows.
- Coral rubble, starfish, shells and sea urchins.

Creatures:
- A frosted-glass dock holds five creature cards. Each thumbnail is rendered from the real 3D model: Manta, Spotted Eagle Ray, Blue-spotted Stingray, Moon Jelly, Sea Nettle.
- Tap a card to throw the creature on an arc into the sea, with a splash, rings and droplets.
- Drag a card to hold the creature above the water, then drop it anywhere.

Rays:
- Instanced flat two-sheet bodies whose wings bend along the span. Mantas and eagle rays flap; the stingray's disc undulates.
- Each has a tail and its own pattern:
  - Manta: black back with white shoulder patches, cephalic fins, white belly with dark spots.
  - Eagle ray: dark back with white spots and rings, long whip tail.
  - Stingray: tan with electric-blue spots, spiracles and a striped tail.
- Rays bank in turns, cast shadows on the sand, flee from touches and leave wakes near the surface.
- Mantas and eagle rays sometimes breach and flip in the air.
- Stingrays rest on the sand and puff silt when startled.

Jellyfish:
- Pulsing bells (fast contraction, slow relaxation) push them along the bell axis.
- Translucent fresnel shading.
- They drift with ocean currents and get pulled by the whirlpool.
- Moon jelly: four pink gonad horseshoes, radial canals and a fringe of tentacles.
- Sea nettle: amber bell with rust stripes, long trailing tentacles and frilly cream oral arms. Draw these as camera-facing ribbons that stream behind its motion, hang straight down and drip when it is held in the air.

Controls: Rain, Whirlpool (drag to move it), Calm, Clear sea, Sound (synthesized surf timed to the swash, plus splashes and plinks), Hide UI. Add keyboard shortcuts R / W / C / M / H.

UI: English, Fraunces + Nunito Sans fonts, responsive mobile layout, a creature counter ("4 rays · 5 jellies"), a 48-creature cap and adaptive render quality.
```

Not rebuilt by 3dmotion yet. Credit stays with @vib3coded.

Prompt by @vib3coded (https://x.com/vib3coded/status/2111170001403040187) via 3dmotion.io/e/ocean-shallows-top-down-tropical-sea