Build an interactive 3D “Jelly Koi Pond” in a single self-contained HTML file.
Create a small oval pond made entirely of soft, translucent jelly, floating just above a warm pastel background. Inside the jelly, add colorful koi fish and smooth little pebbles. Place lily pads, pink water lilies, and one adorable green frog with big eyes on the surface.
The pond should look like a beautiful miniature Japanese garden trapped inside a glossy gummy candy. Give it visible thickness, rounded edges, soft reflections, convincing transparency, and a soft shadow underneath.
Make the jelly physically interactive:
- Click and drag any part of the pond to stretch and lift it.
- Deform the pond locally rather than moving it as a rigid object.
- On release, let it bounce and wobble before gradually settling.
- Keep the fish, pebbles, lily pads, flowers, and frog attached to their positions within or on the deforming pond.
- Let the koi swim slowly when the pond is undisturbed.
- Clicking the surface should create a small ripple.
Add a compact, elegant control bar with Drag and Wobble modes, a jelly softness slider, three color options (mint, blue, and pink), and a reset button.
Use a minimal editorial layout with a large serif “Jelly Koi Pond.” title in the upper-left corner, small interaction hints, generous whitespace, and a soft sage background. Keep the pond as the main focus.
Use procedural geometry and materials, with no external image or model assets. Include lighting, shadows, mouse and touch support, and responsive resizing. Keep the simulation stable during strong dragging and repeated interactions.
Deliver a complete working experience, not a static mockup.
