Reduce motion is on · previews stay still
All effects Water & sky Ocean Shallows: Top-Down Tropical Sea Ocean Shallows: Top-Down Tropical Sea Ocean Shallows: Top-Down Tropical Sea is a published Three.js prompt by @vib3coded. It has source credit and no verified 3dmotion rebuild.
by @vib3coded on X · 2026-10-16
Author preview · no on-site rebuild Original prompt @vib3coded · X Rebuild status No verified 3dmotion rebuild. Open demo No live demo linked here. Prompt by @vib3coded. Copies include source credit.
Original prompt Free · 2,621 characters 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…
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. Prompt by @vib3coded , posted on X on 2026-10-16. x.com/vib3coded/status/2111170001403040187 . Copies include this credit. Original prompt, credited
@MengTo Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
Original prompt, credited
collection · petergpt Open, then Run
A Verified card includes a receipt and a pinned single-file rebuild you can run here. Recorded limitations explain what the rebuild changes or leaves out.
