Interactive harbor diorama inside a translucent jelly block
Interactive harbor diorama inside a translucent jelly block is a 17-second Claude Opus motion design reference by @vib3coded, built around code. [Note: the creator shared a partial prompt. Copy this 3D 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 "Harbor Jelly" — a single self-contained HTML file (no external requests, no libraries) that renders an interactive 3D diorama with WebGPU/WGSL: a small working container harbor set inside a square block of wobbly, translucent jelly sea, sitting on a paper studio backdrop. It belongs to a series called "Material Studies", so match that look: warm paper background, serif italic display title ("Harbor Jelly."), small uppercase eyebrow "MATERIAL STUDIES", a status pill top-right ("WebGPU · Live"), a frosted control panel on the right, and a "How to play" line bottom-left. English UI. Light theme only, by design.
MOTION:
THE BLOCK
- A 5.2 × 5.2 block seen from a 3/4 orbit camera. The ground and sea are cut flat at the block's sides, so you see candy-coloured soil strata in cross-section, and the sea's cut faces show everything underwater through the jelly.
- The water is a real-time linear shallow-water simulation on a staggered grid (heights at cell centres, velocities on faces) with a little surface tension, so it feels like jelly. Render it with refraction, absorption by depth, caustics projected onto the floor, light shafts, a Fresnel studio reflection, foam (wakes, splashes, a shoreline lace) and a bright meniscus on the cut edges.
- The whole block can be tipped by dragging its side. The water sloshes to the low side, the jelly shears and quivers, then it settles flat again.
THE HARBOR (layout)
- Along the back runs a vertical concrete quay wall, with rubber fenders, bollards, ladders, and mussels and weed crusting it below the waterline.
- Left part: a container terminal. A flat asphalt yard with painted lines, concrete strips with two crane rails, light towers, and a small terminal office. Hundreds of colourful containers are stacked in neat rows. Each is a ribbed steel box with door ends and darker corner posts, drawn as GPU instances in about ten liveries.
- Right part: an old stone fishing quay with a cobbled promenade, a corrugated fish-market shed and lamp posts. A timber pier stands on mussel-covered piles with cross-bracing, with two small fishing boats moored alongside.
- Behind it all, a town climbs a grassy hill: three rows of gabled houses in Nordic harbour colours (falu red, ochre, white, pale blue, mint, pink) with tiled or slate roofs, white-framed windows, doors and chimneys. There is a white church with a green copper spire, and some round trees.
- A rubble breakwater shelters the fishing harbour, with a concrete crown wall. Big rocks sit near the crest, smaller weedy ones tumble down under water. On its head stands a red-and-white banded lighthouse with a gallery and a glass lantern, whose lamp slowly turns.
- In the open basin: two small yachts swinging on their moorings (white hulls, coloured stripe, fin keels visible through the jelly, furled sails), yellow mooring buoys, and a green channel buoy, all bobbing on the waves.
- On the floor: pale sand with drifts of silt, weed tufts, stones, starfish, an old anchor wi
Author original
Build "Harbor Jelly" — a single self-contained HTML file (no external requests, no libraries) that renders an interactive 3D diorama with WebGPU/WGSL: a small working container harbor set inside a square block of wobbly, translucent jelly sea, sitting on a paper studio backdrop. It belongs to a series called "Material Studies", so match that look: warm paper background, serif italic display title ("Harbor Jelly."), small uppercase eyebrow "MATERIAL STUDIES", a status pill top-right ("WebGPU · Live"), a frosted control panel on the right, and a "How to play" line bottom-left. English UI. Light theme only, by design.
THE BLOCK
- A 5.2 × 5.2 block seen from a 3/4 orbit camera. The ground and sea are cut flat at the block's sides, so you see candy-coloured soil strata in cross-section, and the sea's cut faces show everything underwater through the jelly.
- The water is a real-time linear shallow-water simulation on a staggered grid (heights at cell centres, velocities on faces) with a little surface tension, so it feels like jelly. Render it with refraction, absorption by depth, caustics projected onto the floor, light shafts, a Fresnel studio reflection, foam (wakes, splashes, a shoreline lace) and a bright meniscus on the cut edges.
- The whole block can be tipped by dragging its side. The water sloshes to the low side, the jelly shears and quivers, then it settles flat again.
THE HARBOR (layout)
- Along the back runs a vertical concrete quay wall, with rubber fenders, bollards, ladders, and mussels and weed crusting it below the waterline.
- Left part: a container terminal. A flat asphalt yard with painted lines, concrete strips with two crane rails, light towers, and a small terminal office. Hundreds of colourful containers are stacked in neat rows. Each is a ribbed steel box with door ends and darker corner posts, drawn as GPU instances in about ten liveries.
- Right part: an old stone fishing quay with a cobbled promenade, a corrugated fish-market shed and lamp posts. A timber pier stands on mussel-covered piles with cross-bracing, with two small fishing boats moored alongside.
- Behind it all, a town climbs a grassy hill: three rows of gabled houses in Nordic harbour colours (falu red, ochre, white, pale blue, mint, pink) with tiled or slate roofs, white-framed windows, doors and chimneys. There is a white church with a green copper spire, and some round trees.
- A rubble breakwater shelters the fishing harbour, with a concrete crown wall. Big rocks sit near the crest, smaller weedy ones tumble down under water. On its head stands a red-and-white banded lighthouse with a gallery and a glass lantern, whose lamp slowly turns.
- In the open basin: two small yachts swinging on their moorings (white hulls, coloured stripe, fin keels visible through the jelly, furled sails), yellow mooring buoys, and a green channel buoy, all bobbing on the waves.
- On the floor: pale sand with drifts of silt, weed tufts, stones, starfish, an old anchor wi
Questions
What is this 3d scenes prompt for?
It is a Claude Opus motion design brief for “Interactive harbor diorama inside a translucent jelly block”. 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.