Build a single self-contained HTML file: an interactive 3D toy called "Jelly Bricks" - translucent gummy candy bricks you can grab, stretch, stack into a tower and knock over. Use three.js (import from a CDN) and any lightweight physics library you like. Everything must run by opening the file in a browser.
LOOK
- Bricks are classic stud-on-top building bricks (2x1, 2x2, 3x2, 4x2) in red, orange, yellow, green and blue. No brand names or logos anywhere.
- Material must read as real gummy candy: glossy, translucent, light passing through, deeper colour where the brick is thicker, soft rounded edges and rounded studs. Use MeshPhysicalMaterial with transmission, thickness, attenuation colour, clearcoat, and an environment map for reflections.
- Soft shadows plus a faint coloured glow on the floor under each brick, tinted by its colour.
- Clean white background, slight slow camera drift so the scene feels alive.
JELLY BEHAVIOUR (most important)
- Grab a brick and it stretches toward the cursor before it lifts off, like pulling taffy. Release it and the stretch snaps back with a decaying wobble.
- A brick lagging behind the cursor tilts slightly in the direction it's moving.
- Every landing squashes the brick flat, then it springs back up with a few wobbles (spring-damper squash and shear, done in the vertex shader).
- Dropping a brick on the stack snaps it in place, and the whole tower sways like pudding: each brick's wobble shifts the bricks above it, so the top moves the most.
- Pulling a brick out of the middle of the tower collapses it: the bricks above tumble, bounce off the floor and each other, and scatter a little - lively, not explosive.
UI (minimal editorial style)
- Top left: small caps label "Nº 09 / SOFT GOODS", big serif italic title "Jelly / Bricks." with "Bricks." in red, and a one-line subtitle.
- Floating panel on the right: flavor colour swatches, a "Wobble" slider that controls jelly softness, live "Stack height" and "Bricks" counters, and a black "Pour more bricks" button that drops a handful of new bricks from above with random spin.
- Bottom left hint: "Grab to lift · Drop to snap · Space to wobble". Space shakes the tower.
- Custom round cursor that shrinks while holding a brick.
Start with one 4x2 brick in the centre as the tower base and about 9 bricks scattered around it. Keep it at 60fps on a laptop.
中文译文
构建一个单一的自包含 HTML 文件：一个名为“Jelly Bricks”的可交互 3D 玩具——半透明的软糖积木，你可以抓取、拉伸、堆成塔再推倒。使用 three.js（从 CDN 导入）以及任何你喜欢的轻量级物理库。一切必须通过在浏览器中打开该文件来运行。
外观
- 积木是经典的顶部带凸点的拼插积木（2x1、2x2、3x2、4x2），颜色为红、橙、黄、绿和蓝。任何地方都不得出现品牌名称或标志。
- 材质必须呈现为真正的软糖：有光泽、半透明、光线穿透、积木更厚处颜色更深、边缘柔和圆润、凸点圆润。使用 MeshPhysicalMaterial，配合 transmission、thickness、attenuation colour、clearcoat，以及用于反射的环境贴图。
- 柔和阴影，外加每块积木下方地面上微弱的有色辉光，颜色由该积木自身的颜色染成。
- 干净的白色背景，轻微而缓慢的镜头漂移，让场景显得有生气。
果冻行为（最重要）
- 抓住一块积木，它会先朝光标方向拉伸，然后才被提起，就像拉扯太妃糖。松开后，拉伸会伴随逐渐衰减的晃动弹回原状。
- 落在光标后面的积木会朝它正在移动的方向略微倾斜。
- 每一次落地都会把积木压扁，然后带几次晃动弹回（弹簧-阻尼式挤压与剪切，在顶点着色器中实现）。
- 把一块积木落到堆叠上，它会咔哒一声就位，整座塔像布丁一样摇晃：每块积木的晃动会带动它上面的积木，因此顶部移动得最多。
- 从塔中间抽出一块积木会让塔倒塌：上方的积木翻滚、从地面和彼此身上弹开，并四散一点——活泼，但不爆炸。
UI（极简编辑风格）
- 左上角：小型大写字母标签“Nº 09 / SOFT GOODS”，大号衬线斜体标题“Jelly / Bricks.”，其中“Bricks.”为红色，以及一行副标题。
- 右侧浮动面板：口味颜色色块、控制果冻柔软度的“Wobble”滑块、实时的“Stack height”和“Bricks”计数器，以及一个黑色的“Pour more bricks”按钮，从上方随机旋转着丢下一把新积木。
- 左下角提示：“Grab to lift · Drop to snap · Space to wobble”。空格键会晃动整座塔。
- 自定义圆形光标，在抓取积木时缩小。
开始时在中央放一块 4x2 积木作为塔的底座，周围散落约 9 块积木。在笔记本电脑上保持 60fps。
