# Emulsion Separate — `emulsion-separate@1.0.0`

A glass of oil on water: glossy beads rise, flatten into the oil and send ripples across the boundary while water beads sink. Loops perfectly.

A tall glass holding a layer of oil on top of water, forever separating. Glossy beads of oil are born at the bottom, swell, race up through the water and flatten into the oil layer, each merge sending a ring of ripples across the boundary between the liquids, while beads of coloured water sink through the oil and merge into the water below. Choose the number of beads, the colours (amber, rose or neon), how many trips each bead makes per loop, the strength of the ripples, the seed, the backdrop colour and whether the camera sways.

- Kind: object; status: published; digest sha256:d9b624d2db2f52eb73d52e1e1549e5c268cdda157b4827a296676d33452c2f3a
- Role: Object (3D, three.js): a soothing liquid-science loop, like a lava lamp seen through a glass of oil and water.
- Implementation: three; entry `src/emulsion-separate.js`
- Files: https://aipixelwizard.com/registry/emulsion-separate/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/emulsion-separate.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/emulsion-separate/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/emulsion-separate/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- 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.

## Exports
- `createEmulsion({ beads?, palette?, cycles?, ripples?, seed? }) => { group, setProgress(progress), dispose() }` — The glass of oil and water with its beads and rippling boundary, base on y = 0; needs an environment map.
- `PALETTES: { amber, rose, neon }` — Colours for the two liquids and their beads.

## Parameters
- `beads` (integer 6–40, default 20) — Beads
- `palette` (select one of amber | rose | neon, default "amber") — Colours
- `cycles` (integer 1–3, default 1) — Trips per loop
- `ripples` (number 0–2, default 1) — Ripples
- `seed` (integer 1–999, default 5) — Seed
- `background` (color, default "#17202c") — Backdrop
- `orbit` (boolean, default true) — Camera sway

## Composition
- Inputs: Time within the loop; the beads, colours, trips, ripples, seed, backdrop and camera sway.
- Outputs: A full frame rendered in 3D with a studio environment.
- Coordinates: The glass is centred on the y axis with radius 1.7 and height 6.2; the boundary between the liquids sits at y = 2.6; the camera looks at the middle of the glass.
- Lighting: A warm key light with a shadow map and the studio environment.
- Timing: setProgress(progress) places every bead and rewrites the boundary; frames render in any order.
- Works with: chrome-material, orbit-camera, kinetic-title, number-reveal
- Liquids and glass are transparent without depth writes; beads are opaque with a clearcoat.

## Output and loop
- 1080×1080, 30 fps, 16 s, procedural
- Seamless loop: yes — Every bead's position, size and squash is a function of the loop phase and its fixed offset, and each bead makes a whole number of trips per loop; ripples are functions of the time since a merge, so the last frame meets the first.
- Verified 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Create a WebGLRenderer with a studio environment, add createEmulsion().group and call glass.setProgress(progress) each frame.

Existing project: Copy src/emulsion-separate.js; add the group to your scene with an environment map and a shadow-casting light.

Reuse ideas:
- Calm loop: Amber on blue.
- Pastel cosmetic: Rose and mint, many.
- Party: Neon, two trips.

## Limitations
- Beads follow fixed paths; they do not collide or merge with each other.
- The liquids are tinted transparent bodies, not refractive.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Adapted from the owner's threejs-sketches/physics-forces/emulsion-separate (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: periodic beads rising and sinking through two tinted liquids, with ring ripples on the boundary from each merge, on an exact loop.