# Jelly Resin Island

- Author: @Adidotdev
- Card: Creator prompt
- Theme: Jelly & soft-body
- Stack: Not rebuilt
- Interaction: Auto
- Licence: Credited link (Shared publicly by the author; full text with credit, removed on request)
- Verified: not yet
- Original post: https://x.com/Adidotdev/status/2110079828531794317

## Original prompt

```text
我要做一个全屏网页交互场景："树脂块微缩岛屿"。参考我上传的参考图，做出一张树脂方块里装着悬崖、沙滩和清澈青绿海水的实拍风格图，要达到那种真实质感；整块像果冻一样跟着鼠标晃，水面随鼠标起浪，水要果冻质感

技术栈：Vite + React + TypeScript，three + @react-three/fiber v9 + @react-three/drei + @react-three/postprocessing，leva 做调参面板。所有 3D 内容全部用代码程序化生成，不加载任何模型文件；环境光用 drei 的 Environment 预设即可。遵循 R3F 和 drei 的官方最佳实践。

场景要有：
- 一个圆角透明树脂块，块体本身就是海水，用 MeshTransmissionMaterial 做出通透感和由浅到深的青绿色水色。
- 块体内部的沙色海床，带焦散光斑，散布几块岩石，部分露出水面。
- 块体顶面的动态水面：GPU 高度场模拟，鼠标划过起涟漪，空闲时也有微弱自然波动；要有反射、浅深水混色和岸边泡沫。
- 一角的程序化岛屿：噪声地形塑出陡峭悬崖和一弯沙滩，按高度和坡度分层着色，缓坡上实例化散布简单几何体做植被。
- 果冻效果：整个场景跟随鼠标位移做弹簧式晃动，块体顶部晃得比底部多。
- 产品摄影式的呈现：米白背景、长焦俯视相机、接触阴影、景深做出微缩感，轻微泛光和暗角。
- leva 面板：水色、浪高、涟漪强度、太阳角度、潮位、果冻软硬、景深。

要求：桌面 60fps，手机 30fps 以上并自动降级；组件按职责拆分，高度场模拟独立成 hook；先跑通整体，再精修材质和参数。
```

Not rebuilt by 3dmotion yet. Credit stays with @Adidotdev.

Prompt by @Adidotdev (https://x.com/Adidotdev/status/2110079828531794317) via 3dmotion.io/e/jelly-resin-island