{"id":"liquid-marble","version":"1.0.0","title":"Liquid Marble","summary":"Marbled ink in four colours folding into itself, with fine veins and a soft sheen. Loops perfectly.","kind":"background","target":"three","collections":["backgrounds","hypnotic-loops","satisfying"],"tags":["marble","marbling","ink","liquid","swirl","paint","fluid","abstract","luxury","loop"],"loopable":true,"motion":"procedural","durationSeconds":12,"status":"published","media":{"poster":"https://aipixelwizard.com/media/liquid-marble/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/liquid-marble/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/liquid-marble/1.0.0/sample.mp4","sampleBytes":4573603,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/liquid-marble","manifest":"https://aipixelwizard.com/api/v1/visuals/liquid-marble/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/","demo":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/index.html"},"description":"Swirling marbled ink: three colours folded into one another like paint on water, with fine veins of a fourth colour running through the folds and a soft sheen where the surface leans towards the light. The flow is a stack of sine warps of the picture, each running whole cycles per loop, so the marbling never stops and always comes back to where it began. Choose the colours (lapis, rose, jade or ink), how fine the marbling is, how violently it folds, how visible the veins are and the seed.","role":"Shader background (three.js): an elegant, endlessly moving marble for titles, covers and calm scenes.","useCases":["A luxury or editorial title backdrop","A calm looping background behind text","A fluid-art visual for music or wellness"],"synonyms":["marbled paper","ink in water","suminagashi","fluid art","liquid background","swirl pattern"],"digest":"1cf0582c22422cf474c332fe345cf0e5c32075fc2244c500f507533e96fd8ef9","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/liquid-marble.js","exports":[{"name":"createLiquidMarble","signature":"createLiquidMarble({ palette?, scale?, swirl?, veins?, seed? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }","description":"The marble as one full-screen shader; render its scene with its camera, ideally through createBloomPass."},{"name":"createBloomPass","signature":"createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }","description":"A small bloom with tone mapping and a fixed grain."},{"name":"PALETTES","signature":"PALETTES: { lapis, rose, jade, ink }","description":"Base, two fold colours and the vein colour."}],"reusable":["src/liquid-marble.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"Renderer and a full-screen shader material."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"palette","label":"Colours","type":"select","default":"lapis","options":[{"value":"lapis","label":"Lapis and gold"},{"value":"rose","label":"Rose"},{"value":"jade","label":"Jade"},{"value":"ink","label":"Ink"}]},{"key":"scale","label":"Fineness","type":"number","min":0.8,"max":3,"step":0.1,"default":2.4},{"key":"swirl","label":"Swirl","type":"number","min":0.3,"max":1.6,"step":0.1,"default":1},{"key":"veins","label":"Veins","type":"number","min":0,"max":1,"step":0.1,"default":1},{"key":"seed","label":"Seed","type":"integer","min":1,"max":999,"step":1,"default":4}],"presets":[{"id":"default","label":"Lapis and gold","params":{}},{"id":"rose","label":"Rose, fine","params":{"palette":"rose","scale":3,"seed":11}},{"id":"jade","label":"Jade, slow folds","params":{"palette":"jade","swirl":0.6,"scale":1.2,"seed":7}},{"id":"ink","label":"Ink, strong swirl","params":{"palette":"ink","swirl":1.5,"veins":0.6,"seed":2}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":12,"posterSeconds":3,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":12,"method":"Every time term in the warps is a whole number of cycles per loop, so the last frame meets the first."},"seed":{"param":"seed","behavior":"Seed offsets the phases of the warps: same seed, same marble."}},"composition":{"inputs":"Time within the loop; the colours, fineness, swirl, veins and seed.","outputs":"A full-frame shader image through a bloom pass.","coordinates":"Screen-centred, ±1 vertically, scaled by the fineness; five warping passes fold the plane.","lighting":"Self-lit with a faint sheen from the field's slope; the bloom adds softness.","timing":"update(time, loopSeconds) sets the loop phase; frames render in any order.","compatibleWith":["kinetic-title","number-reveal"],"notes":["No textures or noise lookups: the whole look is trigonometry, which is why it loops exactly."]},"reuse":["Luxury title: Lapis and gold.","Soft brand: Rose, fine.","Calm: Jade, slow folds."],"integration":{"newProject":"Create a WebGLRenderer, createLiquidMarble() and createBloomPass(renderer, { width, height }); call marble.setSize(w, h) and each frame marble.update(time, loopSeconds) then bloom.render(marble.scene, marble.camera).","existingProject":"Copy src/liquid-marble.js and render marble.scene with marble.camera into your own target."},"performance":{"notes":"One full-screen fragment shader with five warping passes, plus the bloom: about 2 ms a frame at 1080² on an integrated Intel GPU.","limits":"Software WebGL renders in about two seconds a frame."},"limitations":["It is a procedural marble, not a fluid simulation: it does not react to objects.","Very high fineness with strong swirl can alias into fine moiré."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.0.0","date":"2026-10-08","notes":"Initial release."}],"verification":{"testedOn":"2026-10-08","inputs":{"liquid-marble@1.0.0":"1cf0582c22422cf474c332fe345cf0e5c32075fc2244c500f507533e96fd8ef9","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":360,"renderSeconds":176.8,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/liquid-marble/1.0.0/poster.webp","preview":"/media/liquid-marble/1.0.0/preview.mp4","sample":"/media/liquid-marble/1.0.0/sample.mp4","sampleBytes":4573603}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/LICENSE"},{"path":"asset.json","size":7052,"sha256":"8d18edc89835f43ae8f0b51afc6951a22703956f54079a6fd7ddfcf10a71742a","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/asset.json"},{"path":"demo.js","size":980,"sha256":"781544543963474fa04b04882972f2d9193c46851738fe4eeb2660fd195755de","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/demo.js"},{"path":"index.html","size":527,"sha256":"2cab03ee80b560a39d11b00c0c6c49d902c62293ee8a875e584e592f533845fa","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/index.html"},{"path":"src/liquid-marble.js","size":10023,"sha256":"5bafb12188a18f4351bb761da75a7067fc5365d74073738d737118615981711a","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/liquid-marble/1.0.0/src/liquid-marble.js"}],"warnings":[]}