Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Chocolate Pour

A thick rope of glossy chocolate coils onto a white plate, folding into a spiralling heap. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified110 lines of codev1.0.0

In Food & sweets, Light, glass & shine, Liquids

Next: Torus Wave LoopSurprise me

Chocolate Pour preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

6
1
1

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 1015 KB)
Info

What it is

Thick, glossy chocolate falling from a spout in one heavy rope onto a white plate, where it coils over and over as viscous liquids do, laying down a heap with a rotating spiral of folds and a scalloped skirt at its foot, shining in the studio light. Choose the chocolate (dark, milk, white or ruby), how many coils the rope makes in a loop, how tall the heap grows, how deep the folds are, the backdrop and whether the camera drifts.

Reuse it in your own idea

  • Dessert brand title: Dark chocolate.
  • Soft bakery scene: Milk, slow coils.
  • Luxury confectionery loop: Ruby, deep folds.

Which part is reusable

src/chocolate-pour.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The coiling is a formula, not a fluid simulation: the heap never grows or flows over the plate's rim.
  • The rope does not thin as it falls and the folds are a regular spiral.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/chocolate-pour.js
Exports
  • createChocolatePour({ kind?, coils?, heap?, ridges? }) => { group, setProgress(progress), dispose() }
  • KINDS: { dark, milk, white, ruby }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The plate is centred on the origin on y = 0 (radius 2.65); the spout is at y = 6.55; the heap peaks at about 0.75.

Lighting: A warm key light with a shadow map and the studio environment on the clear-coated chocolate.

Timing: setProgress(progress) rewrites the heap's heights and the rope's curve; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The rope's coil and the spiral folds of the heap turn a whole number of times per loop and the heap's skirt breathes in whole cycles, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
A heap grid of about 11 000 vertices rewritten each frame and a 90-segment tube rebuilt each frame, one shadow map. A few milliseconds a frame on an integrated Intel GPU. Software WebGL renders in a second or two a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- chocolate-pour/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:bba3b37a7410a39f…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/liquid-fluid/chocolate-pour (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original object: a coiling rope, a heap with rotating spiral folds, a clear-coated chocolate material and an exact loop.
BinMore like this

More like this

Play these full screen

Lava Lamp

3D object3DSeamless loop15 seconds

Resin Pour

3D object3DSeamless loop14 seconds

Ferrofluid

3D object3DSeamless loop16 seconds