Jelly Cubes

About this style

Gelatin desserts set into a soft, elastic gel that is mostly water, so they are clear, glossy and wobble when they move. Soft-body animation imitates that behavior with springs: a shape squashes on impact, bulges to keep its volume and jiggles back in a decaying oscillation. Rendered with refractive, colored transmission, the cubes glow where light passes through them and throw colored light onto the surface below. Food brands, toy makers and 3D artists use the look for playful product shots and satisfying loops.

Make a 10-second 3D product film of fruit jellies: translucent jelly cubes drop, squash, wobble and settle into a stack, with light glowing through them.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Wibblesworth (fictional), a maker of fruit jellies.
- Title: "Set to wobble"
- Line: "Five fruit jellies, set with pressed juice."
- Flavors: Raspberry, Lime, Tangerine, Blueberry, Elderflower.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright, clean studio macro of real gelatin: glossy, glass-clear and deeply colored, with light glowing through each cube and spilling colored light onto the floor.
- Palette: a seamless sweep #DCE5EE on the floor curving up to #EEF3F8 behind; raspberry #E2304F, lime #7BC62D, tangerine #FF8A1C, blueberry #4A55D8, elderflower a pale clear straw #EFE2A2; contact shadows #8A97A8; type #22303F, secondary #607083, accent raspberry.
- The jellies: cubes of 1.0–1.25 units (RoundedBoxGeometry, radius 0.13, 8 segments: soft molded edges) in MeshPhysicalMaterial with transmission 1, roughness 0.06, ior 1.35, thickness 1.1, attenuationColor the flavor color and attenuationDistance 0.45 (deep color through the middle, lighter at the edges), and clearcoat 1 at roughness 0.03. Inside each, 8–14 seeded trapped air bubbles (small opaque white spheres, radius 0.012–0.035) that move with the deforming jelly and show through it. A faint mold line circles each cube 30% up its sides (a slight ridge in a generated normal map).
- Light that passes through: a strong back key DirectionalLight #FFFFFF at 2.8 from behind and above (elevation 50°) so the jellies glow from within; a front fill from a HemisphereLight #F4F8FF / #C8D2DE at 0.8; RoomEnvironment through PMREMGenerator at envMapIntensity 1.0 so every top edge and corner carries a crisp window highlight. On the floor on the camera side of each cube lies its transmitted light: a soft additive decal (a radial gradient in the flavor color at 35%) with a brighter elliptical caustic core 40% of its size, stretching as the cube squashes and swaying with its shear. Directly under each cube, a soft contact shadow (a blurred ellipse, #8A97A8 at 40%). ACESFilmic, exposure 1.1. The darkest part of any jelly stays clearly colored, never brown or black.
- Soft-body motion, all closed-form so seek(t) can jump anywhere. Each cube falls from above the frame under gravity (y = y₀ − ½·g·τ², g = 22 units/s²) to a known impact time, then deforms by damped springs that start at impact: a squash s(τ) = A·e^(−τ/0.32)·sin(2π·3.4·τ), and two shears hx and hz of the same form at 2.6 Hz with seeded phases and 30% of A. A follows the impact speed (about 0.28 for a floor landing). Each seek, deform every vertex from its stored rest position: with h its normalized height (0 at the base, 1 at the top) and H the cube's height, y' = h·H·(1 − s); x' = x·(1 + 0.55·s·4h(1 − h)) and likewise z, so it bulges at the middle as it squashes; then x' += hx·h²·H and z' += hz·h²·H, so the top lags like gel. The base stays planted and spreads 4% during the squash. Recompute normals each seek. A small rebound hop (4% of the drop height) follows each landing.
- Stacking: Blueberry lands on Lime and Elderflower on Blueberry, making a stack of three. A cube on top rides the top face of the one beneath (its base follows that cube's squashed height and shear), and each landing on the stack kicks the cubes below with smaller springs (60%, then 35%), so the wobble travels down the stack.
- Layout: the cubes stand on the floor in a shallow arc centered at x 1180 with 0.6-unit gaps: Raspberry at left, the stack in the middle reaching to about y 300, Tangerine at right. Camera fov 30, pitched 12° down, with a slow 6% dolly in and 8° of yaw across the piece on easeInOutSine.
- Labels (HTML, positioned each seek by projecting 3D anchors): each flavor in Onest 500, 22px, #22303F on a 1px #607083 leader ending in a 5px dot on its cube's front face, appearing 0.3 s after that cube lands; floor cubes' labels sit below them, the stacked cubes' labels to the right of the stack at their own heights.
- Type: kicker "WIBBLESWORTH" in Onest 600, 20px, tracked 0.16em, accent; title Unbounded 600, 84px, #22303F, top-left at (120, 110); line Onest 400, 28px, secondary, beneath. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: clear gel with deep color, highlights on every edge, colored light on the floor, a wobble that decays like real gelatin and passes down the stack. Cheap: opaque plastic cubes, a squash that's a uniform scale, a grey slab of shadow.
Banned: opaque or matte jellies, uniform-scale squash, splashes or liquid, faces or eyes, sparkles, glitter, bloom, outlines, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the empty sweep in bright light; the kicker and title rise in.
- 0.8–1.4s: Raspberry drops in at left, squashes and wobbles.
- 1.4–2.0s: Lime drops in at center.
- 2.0–2.6s: Tangerine drops in at right.
- 2.6–3.4s: Blueberry drops onto Lime and the wobble passes down.
- 3.4–4.4s: Elderflower drops onto Blueberry and the stack of three jiggles in a chain.
- 4.4–6.6s: everything settles; the line rises in at 4.6 s; all five labels are up; the camera keeps easing in.
- 6.6–7.4s: a tap on the tabletop: every cube is kicked once more (A = 0.12), left to right, 70 ms apart, and wobbles again.
- 7.4–8.8s: all motion decays to rest.
- 8.8–10.0s: hold, still.
For other lengths, change the gaps between drops and the settle; keep each spring's own timing and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Every cube's position and deformation is a closed-form function of t and its impact times; deform the geometry on the CPU from a stored rest copy each seek.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every jelly reads as clear colored gel with its bubbles and the floor visible through it, the base never lifts off or sinks into the floor during a squash, stacked cubes never interpenetrate, each colored floor glow sits on the camera side of its cube, labels point at their own cubes, and all motion is at rest by 8.8 s. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…