Interactive 3D fluffy watermelon you can rotate and zoom in browser
Interactive 3D fluffy watermelon you can rotate and zoom in browser is a 15-second Claude Opus motion design reference by @vib3coded, built around Three.js, WebGL. GOAL: Build a single self-contained HTML page (no build step) showing an interactive 3D "Fluffy Watermelon" covered in long fur, rendered… Copy this 3D motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch…
@vib3codedView post
Prompt
GOAL:
Build a single self-contained HTML page (no build step) showing an interactive 3D "Fluffy Watermelon" covered in long fur, rendered with WebGL using three.js r147 (UMD build: https://t.co/e5eRvHwZc8).
MOTION:
All UI text in English.
SCENE & LOOK
- Full-screen canvas on a soft watermelon-flesh pink studio background: vertical gradient #ECB3AB → #F7CFC7 (lighter band in the middle) → #E8A9A0, used as the scene background.
- A big oblong watermelon lying on its side along the X axis: half-length 1.38, radius 0.98, blunt barrel-like ends, small dimples at both ends, slightly flattened belly, subtle surface unevenness. Start in a 3/4 view (about -0.32 rad around Y, 0.1 rad tilt), camera FOV 30°, framed to fill ~80% of the height.
- Rind pattern under the fur: light green (#A8D66B) with 16 dark green (#1C4D1C) stripes running stem to blossom, with ragged finger-like edges (sine meander + value noise), plus a pale cream "field spot" on the underside. Each hair takes the colour of its own root, so the stripes stay crisp through the fur.
- A short, dried, ribbed stem stub at one end with a slightly domed pale cut cap, and a thin curly helical tendril springing from beside it.
- One directional light from upper-left-front, wrap diffuse, Kajiya-Kay anisotropic highlight along the hair tangent, darker roots (occlusion by hair height), slight per-hair brightness variation.
FUR (most important: it must look crisp, never blurry)
- Fur length 0.2 units. Hairs grow out along the normal, then bend: combed from the stem end toward the blossom end and draped down the flanks (no whorls at the ends), plus slight gravity.
- Undercoat: shell texturing with ~64 instanced shells of the body mesh that reach only 50% of the fur length. Procedural hair cells in UV space (density scaled so one cell is ~3.4 device pixels at the default view), two hair populations (long + fine underfur), hairs gathering into locks toward their tips, analytic anti-aliased coverage, alpha blending, shells write depth. Fade shells out where the surface is seen edge-on and discard faint fragments, so no dotted rim appears at the outline.
- Guard hairs: ~90,000 individual tapered, camera-facing ribbon strands (instanced, 7 segments each) that follow exactly the same bend function, with a minimum width of ~0.75 px so they stay sharp. Draw them twice: once before the shells and once after (depth-tested), so faint edge fur never hides them and they always lie crisply on top.
- Always render at the device's full pixel ratio (capped at 2) and NEVER lower it for performance. If frames are slow, reduce the shell count first (down to 32), then the guard-hair count.
INTERACTION
- Drag to rotate freely (trackball style) with inertia after a flick. The fur lags behind the rotation through a damped spring and flops back. Gentle idle breeze in the fur; after 3 s without input, a slow auto-turn.
- Mouse wheel / pinch to zoom (smooth dolly). Double-click or "0" resets with an eased animation. Arrow keys rotate.
Author original
Build a single self-contained HTML page (no build step) showing an interactive 3D "Fluffy Watermelon" covered in long fur, rendered with WebGL using three.js r147 (UMD build: https://t.co/e5eRvHwZc8). All UI text in English.
SCENE & LOOK
- Full-screen canvas on a soft watermelon-flesh pink studio background: vertical gradient #ECB3AB → #F7CFC7 (lighter band in the middle) → #E8A9A0, used as the scene background.
- A big oblong watermelon lying on its side along the X axis: half-length 1.38, radius 0.98, blunt barrel-like ends, small dimples at both ends, slightly flattened belly, subtle surface unevenness. Start in a 3/4 view (about -0.32 rad around Y, 0.1 rad tilt), camera FOV 30°, framed to fill ~80% of the height.
- Rind pattern under the fur: light green (#A8D66B) with 16 dark green (#1C4D1C) stripes running stem to blossom, with ragged finger-like edges (sine meander + value noise), plus a pale cream "field spot" on the underside. Each hair takes the colour of its own root, so the stripes stay crisp through the fur.
- A short, dried, ribbed stem stub at one end with a slightly domed pale cut cap, and a thin curly helical tendril springing from beside it.
- One directional light from upper-left-front, wrap diffuse, Kajiya-Kay anisotropic highlight along the hair tangent, darker roots (occlusion by hair height), slight per-hair brightness variation.
FUR (most important: it must look crisp, never blurry)
- Fur length 0.2 units. Hairs grow out along the normal, then bend: combed from the stem end toward the blossom end and draped down the flanks (no whorls at the ends), plus slight gravity.
- Undercoat: shell texturing with ~64 instanced shells of the body mesh that reach only 50% of the fur length. Procedural hair cells in UV space (density scaled so one cell is ~3.4 device pixels at the default view), two hair populations (long + fine underfur), hairs gathering into locks toward their tips, analytic anti-aliased coverage, alpha blending, shells write depth. Fade shells out where the surface is seen edge-on and discard faint fragments, so no dotted rim appears at the outline.
- Guard hairs: ~90,000 individual tapered, camera-facing ribbon strands (instanced, 7 segments each) that follow exactly the same bend function, with a minimum width of ~0.75 px so they stay sharp. Draw them twice: once before the shells and once after (depth-tested), so faint edge fur never hides them and they always lie crisply on top.
- Always render at the device's full pixel ratio (capped at 2) and NEVER lower it for performance. If frames are slow, reduce the shell count first (down to 32), then the guard-hair count.
INTERACTION
- Drag to rotate freely (trackball style) with inertia after a flick. The fur lags behind the rotation through a damped spring and flops back. Gentle idle breeze in the fur; after 3 s without input, a slow auto-turn.
- Mouse wheel / pinch to zoom (smooth dolly). Double-click or "0" resets with an eased animation. Arrow keys rotate.
Questions
What is this 3d scenes prompt for?
It is a Claude Opus motion design brief for “Interactive 3D fluffy watermelon you can rotate and zoom 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.