Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Resin Pour

A thread of clear resin pours into a wooden mould of three tinted layers with gems, pearls and rising bubbles, rings of ripples spreading from where it lands. Loops perfectly.

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

In Light, glass & shine, Liquids

Next: Frozen SplashSurprise me

Resin 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

24
1
16

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

View code Sample video (default settings, 1.6 MB)
Info

What it is

A pour of clear epoxy resin into a wooden mould, over a table of embedded treasures. A glossy thread of resin falls from above, rings of ripples spread across the surface where it lands, and below the surface three layers of tinted resin lie one over another with slowly undulating boundaries, gems, pearls and rings suspended between them and bubbles rising lazily through the layers. Choose the tints (ocean, sunset, forest or amethyst), how many gems are embedded, the strength of the ripples, the wood of the mould (oak, walnut or ebony), the seed, the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • Craft brand: Ocean, walnut.
  • Warm decor: Sunset, oak.
  • Dreamy: Amethyst, calm.

Which part is reusable

src/resin-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 resin is translucent tinted slabs without true refraction, so the embedded objects are not bent.
  • The stream is a fixed-shape thread with moving stripes, not a simulated fluid.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/resin-pour.js
Exports
  • createResinPour({ tints?, gems?, ripples?, wood?, seed? }) => { group, setProgress(progress), dispose() }
  • TINTS: { ocean, sunset, forest, amethyst }
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 mould is 8 × 8 inside with its floor at y = 0; the layers' tops are at 0.55, 1.0 and 1.5; the stream falls from y = 8 at the centre; the camera looks down at about 36°.

Lighting: A warm key light with a shadow map and the studio environment on the glossy resin.

Timing: setProgress(progress) rewrites the layer surfaces and places rings and bubbles; frames render in any order.

Output
1080×1080, 30 fps, 14 s · procedural (computed from the frame number) · seamless loop — The ripples travel four wavelengths' worth of phase per loop, the layer boundaries undulate in sines of whole cycles, the stream's stripes move whole periods and each bubble makes whole trips, so the last frame meets the first.
Tested
Rendered 420 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
Three 65×65 grids rewritten and re-normalised each frame, up to 60 gems and 36 bubbles with a shadow map: a few milliseconds a frame on an integrated Intel GPU. Software WebGL renders in several seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- resin-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:10172b68f8b0d045…
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/objects-scenes/resin-pour (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: three translucent tinted layers with whole-cycle undulation, a ring-rippled top, embedded gems, rising bubbles and a striped pouring stream on an exact loop.
BinMore like this

More like this

Play these full screen

Ferrofluid

3D object3DSeamless loop16 seconds