Prompt Motion
@AiMotionSiteS
Prompt library

UI motion

Interactive top-down lagoon with swimming sea creatures in browser

Interactive top-down lagoon with swimming sea creatures in browser is a 16-second Claude Opus motion design reference by @vib3coded, built around Three.js. [Note: the creator shared a partial prompt. Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.

@vib3codedView post

Prompt

[Note: the creator shared a partial prompt. Wording below is theirs.] GOAL: Build a single self-contained HTML file (inline CSS and JS; the only external script is Three.js r128 from https://t.co/0wHkZvIHwv) called "Reef Lagoon": an interactive top-down view of a sunlit Maldives-style lagoon where the user throws sea creatures into the water and watches them swim. Output the complete file, no placeholders, no omitted sections. MOTION: CAMERA AND LAYOUT - Perspective camera straight overhead (height ~26 world units, up vector (0,0,-1)). Fit the vertical FOV so the visible water is about ±8.4 units in the short screen direction; the long direction scales with the aspect ratio. Recompute on resize. - The whole screen is water. One world unit is roughly 1 m at toy scale: dolphin ~2.4, white shark ~3.3, hammerhead ~3.1, orca ~4.5, humpback ~6, turtle ~1.35 shell length, manta ~1.6 length / 3.2 wingspan. WATER SIMULATION - GPU ripple height field (ping-pong float/half-float render targets, about 440 texels on the long side, stepped at 90 Hz). Update: average of 4 neighbours, velocity += (avg − h)*1.8, velocity *= 0.9935, h += velocity, h *= 0.9993. Absorbing "sponge" edges, so waves leaving the screen don't reflect. - Drops are queued (x, z, radius, amplitude, foam) and applied with a smooth cosine bump; a second channel stores foam that diffuses and fades. RENDERING (draw order per frame) 1. A tileable animated caustics texture (512², mipmapped). 2. A shadow pass: creature geometry projected along the sun onto the floor, rendered from the main camera into a half-res target with MAX blending. 3. The underwater scene into an off-screen target. Its alpha stores depth*0.22, which later scales refraction and blur. - Floor: a large heightfield mesh. Depth goes from ~1.35 near the bottom of the screen to ~4.3 at the top, with gentle undulation. - Coral heads come from noise masks: raised 1–1.4 units, warm ochre/purple/yellow colours with knobbly and brain-coral detail, plus a rubble ring around them. - Pale sand with soft irregular ripple shading. - Lighting: ambient + sun × (base + caustics focused by the Laplacian of the ripple field) × shadow × drifting cloud shadows (large slow noise). - Water absorption along the light path plus the view path, e.g. T = exp(−(0.30, 0.058, 0.04)·path), plus depth-based turquoise→blue scatter. 4. A full-screen water-surface pass. Each pixel is ray-cast through the inverse view-projection to the plane y=0. - Surface normal from the ripple field + scrolling wind-ripple gradient noise + a gentle swell. - Refraction: offset sampling of the underwater target, with chromatic split and depth blur. - Fresnel sky reflection with clouds, sun glints, foam, splash craters (a short-lived analytic bowl around each impact; brighten it, never let it go dark), and an optional whirlpool funnel with spiral foam arms. - Mild tone curve. 5. An overlay pass, depth-tested, drawn after the surface: creatures above water, water droplets (point sprites, gravity 20), soft mist sprites, rain str
Author original
Build a single self-contained HTML file (inline CSS and JS; the only external script is Three.js r128 from https://t.co/0wHkZvIHwv) called "Reef Lagoon": an interactive top-down view of a sunlit Maldives-style lagoon where the user throws sea creatures into the water and watches them swim. Output the complete file, no placeholders, no omitted sections. CAMERA AND LAYOUT - Perspective camera straight overhead (height ~26 world units, up vector (0,0,-1)). Fit the vertical FOV so the visible water is about ±8.4 units in the short screen direction; the long direction scales with the aspect ratio. Recompute on resize. - The whole screen is water. One world unit is roughly 1 m at toy scale: dolphin ~2.4, white shark ~3.3, hammerhead ~3.1, orca ~4.5, humpback ~6, turtle ~1.35 shell length, manta ~1.6 length / 3.2 wingspan. WATER SIMULATION - GPU ripple height field (ping-pong float/half-float render targets, about 440 texels on the long side, stepped at 90 Hz). Update: average of 4 neighbours, velocity += (avg − h)*1.8, velocity *= 0.9935, h += velocity, h *= 0.9993. Absorbing "sponge" edges, so waves leaving the screen don't reflect. - Drops are queued (x, z, radius, amplitude, foam) and applied with a smooth cosine bump; a second channel stores foam that diffuses and fades. RENDERING (draw order per frame) 1. A tileable animated caustics texture (512², mipmapped). 2. A shadow pass: creature geometry projected along the sun onto the floor, rendered from the main camera into a half-res target with MAX blending. 3. The underwater scene into an off-screen target. Its alpha stores depth*0.22, which later scales refraction and blur. - Floor: a large heightfield mesh. Depth goes from ~1.35 near the bottom of the screen to ~4.3 at the top, with gentle undulation. - Coral heads come from noise masks: raised 1–1.4 units, warm ochre/purple/yellow colours with knobbly and brain-coral detail, plus a rubble ring around them. - Pale sand with soft irregular ripple shading. - Lighting: ambient + sun × (base + caustics focused by the Laplacian of the ripple field) × shadow × drifting cloud shadows (large slow noise). - Water absorption along the light path plus the view path, e.g. T = exp(−(0.30, 0.058, 0.04)·path), plus depth-based turquoise→blue scatter. 4. A full-screen water-surface pass. Each pixel is ray-cast through the inverse view-projection to the plane y=0. - Surface normal from the ripple field + scrolling wind-ripple gradient noise + a gentle swell. - Refraction: offset sampling of the underwater target, with chromatic split and depth blur. - Fresnel sky reflection with clouds, sun glints, foam, splash craters (a short-lived analytic bowl around each impact; brighten it, never let it go dark), and an optional whirlpool funnel with spiral foam arms. - Mild tone curve. 5. An overlay pass, depth-tested, drawn after the surface: creatures above water, water droplets (point sprites, gravity 20), soft mist sprites, rain str

Questions

What is this ui motion prompt for?

It is a Claude Opus motion design brief for “Interactive top-down lagoon with swimming sea creatures in browser”. Paste it into Claude and keep the timings already written in the prompt.

Where is the original film?

The creator is @vib3coded. Use View post to open the X video this prompt belongs to.

More ui motion prompts