{"id":"rose-window","version":"1.0.0","title":"Rose Window","summary":"A great Gothic rose window of stained glass in dark stone, the sun passing behind it and dust turning in the light. Loops perfectly.","kind":"background","target":"three","collections":["backgrounds","hypnotic-loops"],"tags":["rose window","stained glass","cathedral","gothic","church","sunlight","tracery","medieval","light","loop","background"],"loopable":true,"motion":"procedural","durationSeconds":12,"status":"published","media":{"poster":"https://aipixelwizard.com/media/rose-window/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/rose-window/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/rose-window/1.0.0/sample.mp4","sampleBytes":4640714,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/rose-window","manifest":"https://aipixelwizard.com/api/v1/visuals/rose-window/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/rose-window/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/rose-window/1.0.0/","demo":"https://aipixelwizard.com/registry/rose-window/1.0.0/index.html"},"description":"A cathedral's rose window seen head-on: a star at the heart, a ring of lens-shaped petals, a ring of twice as many, a ring of round windows, all held by ribs of dark stone, every pane cut into shards of jewel-coloured glass and leaded. The sun goes once round behind the window, blazing the glass white-hot where it stands, catching the stone and sending shafts of light across the dark wall, with motes of dust turning in them. Choose how many petals the window has, the glass (cathedral, jewel, sunset or indigo), the fierceness of the sun, the shafts of light, the dust, the thickness of the stone, the lead and the brightness.","role":"Background (WebGL shader, full frame): a reverent, glowing backdrop for titles, music, history and spiritual content.","useCases":["A reverent backdrop for classical, choral and ambient music","A history, architecture or religion documentary title","A fantasy or gothic game and film title scene"],"synonyms":["stained glass window","cathedral window","gothic window","church window","mandala window","kaleidoscope window","sacred geometry","medieval glass"],"digest":"ba977bb06629dd5b2a0125c045823a58410b9ef8a3440fe3d5a7ca48fc24aa56","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/rose-window.js","exports":[{"name":"createRoseWindow","signature":"createRoseWindow({ petals?, glass?, sun?, rays?, dust?, tracery?, lead?, brightness?, seed? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }","description":"The whole window as one full-screen shader: render its scene with its camera after setSize and update, ideally through createBloomPass."},{"name":"createBloomPass","signature":"createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }","description":"A small bloom with filmic tone mapping: draws a scene to the canvas with its glow."},{"name":"GLASS","signature":"GLASS: { cathedral, jewel, sunset, indigo }","description":"Eight glass colours (sRGB hex) for each way of colouring the window."}],"reusable":["src/rose-window.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"Renderer, the full-screen shader and the bloom targets."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"petals","label":"Petals","help":"Petals in the inner ring, an even number: the next ring has twice as many and the outer ring four times as many round windows.","type":"integer","min":6,"max":16,"step":2,"default":12},{"key":"glass","label":"Glass","type":"select","default":"cathedral","options":[{"value":"cathedral","label":"Cathedral"},{"value":"jewel","label":"Jewel"},{"value":"sunset","label":"Sunset"},{"value":"indigo","label":"Indigo"}]},{"key":"sun","label":"Sun","help":"How fiercely the sun behind the window blazes through the glass.","type":"number","min":0,"max":1.5,"step":0.05,"default":1},{"key":"rays","label":"Shafts of light","type":"number","min":0,"max":1.6,"step":0.05,"default":1},{"key":"dust","label":"Dust","type":"number","min":0,"max":1.6,"step":0.05,"default":1},{"key":"tracery","label":"Stone","help":"How thick the ribs of stone tracery are.","type":"number","min":0.6,"max":1.4,"step":0.05,"default":1},{"key":"lead","label":"Lead","help":"How visible the lead lines between the shards of glass are.","type":"number","min":0,"max":1.5,"step":0.05,"default":1},{"key":"brightness","label":"Brightness","type":"number","min":0.6,"max":1.5,"step":0.05,"default":1},{"key":"seed","label":"Seed","type":"integer","min":1,"max":999,"step":1,"default":4}],"presets":[{"id":"default","label":"Cathedral, twelve petals","params":{}},{"id":"jewel","label":"Jewel glass, eight petals","params":{"glass":"jewel","petals":8,"seed":11}},{"id":"sunset","label":"Sunset glass, blazing sun","params":{"glass":"sunset","petals":10,"sun":1.3,"rays":1.3,"seed":7}},{"id":"indigo","label":"Indigo glass, sixteen petals","params":{"glass":"indigo","petals":16,"sun":0.8,"rays":1.2,"seed":21}},{"id":"overcast","label":"Overcast morning, fourteen petals","params":{"petals":14,"sun":0.3,"rays":0.3,"dust":0.6,"lead":1.2,"brightness":1.1,"tracery":1.2,"seed":3}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":12,"posterSeconds":3,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":12,"method":"The sun goes exactly once round its circle per loop, the shimmer of the glass and the shafts of light move on circles of a noise, and each mote of dust drifts in sines of whole cycles, so the last frame meets the first."},"seed":{"param":"seed","behavior":"Seed cuts the shards of glass, picks which colour each pane takes and scatters the dust: same seed, same window."}},"composition":{"inputs":"Time within the loop; the number of petals, the glass, the sun, shafts of light, dust, stone, lead, brightness and seed.","outputs":"A full frame, drawn by one shader on a full-screen quad.","coordinates":"The window is a circle centred on the frame, 90% of its half-height in radius; its rings are the star (0 – 0.15), the petals (0.15 – 0.47), the double ring (0.47 – 0.735) and the roundels (0.735 – 0.985) of that radius.","lighting":"Self-lit: the glass glows from the sun behind it, the stone and wall catch a little of the glow; the bloom adds the halo.","timing":"update(time, loopSeconds) sets the loop phase; frames render in any order.","compatibleWith":["kinetic-title","number-reveal"],"notes":["The stone is a signed-distance field: rings, radial ribs, lens outlines (two overlapping circles) and roundels, repeated by folding the plane into its sectors.","The glass is coloured by pane (ring, sector, inside the lens or not) and cut by a Voronoi pattern whose borders are the lead."]},"reuse":["Reverent backdrop for a choir or organ piece: Cathedral, twelve petals.","Fantasy title scene: Jewel glass.","Evening documentary title: Sunset glass."],"integration":{"newProject":"Create a WebGLRenderer, createRoseWindow() and createBloomPass(renderer, { width, height }); call rose.setSize(width, height), then each frame rose.update(time, loopSeconds) and bloom.render(rose.scene, rose.camera).","existingProject":"Copy src/rose-window.js; render rose.scene with rose.camera into a render target (or through the bloom pass) as the backdrop of your scene."},"performance":{"notes":"One full-screen pass with a distance field of about thirty shapes, a Voronoi lookup and 64 motes per pixel, then a small bloom. A few milliseconds a frame at 1080p on an integrated Intel GPU.","limits":"Software WebGL (no GPU) renders in a couple of seconds a frame."},"limitations":["The window is always seen head-on and centred: no perspective or tilt.","The pattern is a fixed design of a star and three rings; only the number of petals changes."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[{"name":"three.js","version":"0.185.1","license":"MIT","url":"https://github.com/mrdoob/three.js"}]},"rights":{"approvedForPublicRelease":true},"provenance":"Adapted from the owner's threejs-sketches/architecture-structure/webgpu-gothic-rose-window and light-atmosphere/stained-glass-sun (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: ring and sector tracery as a signed-distance field, Voronoi shards with lead, the sun exactly once round behind the glass, shafts of light and dust on exact loops, and the frame/time contract.","changelog":[{"version":"1.0.0","date":"2026-10-05","notes":"Initial release."}],"verification":{"testedOn":"2026-10-06","inputs":{"rose-window@1.0.0":"ba977bb06629dd5b2a0125c045823a58410b9ef8a3440fe3d5a7ca48fc24aa56","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":343,"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/rose-window/1.0.0/poster.webp","preview":"/media/rose-window/1.0.0/preview.mp4","sample":"/media/rose-window/1.0.0/sample.mp4","sampleBytes":4640714}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/rose-window/1.0.0/LICENSE"},{"path":"asset.json","size":10167,"sha256":"5d5384973620ee61ab459d446ec79d045d56eb70f4e483de2519289aef2d6008","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/rose-window/1.0.0/asset.json"},{"path":"demo.js","size":1147,"sha256":"c87e09753b14a66bc7fc8b637c1acc5f539c37c9bf0af23336d97bfca32c0299","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/rose-window/1.0.0/demo.js"},{"path":"index.html","size":525,"sha256":"78288ffd764372fdde468472d1a4aeba0c03b5f1f24dbd46f59a9bca60a65775","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/rose-window/1.0.0/index.html"},{"path":"src/rose-window.js","size":23179,"sha256":"04a9622159e178dd0c9bc7e150c403e8774e8e50fefdbf665ebad07aedb46f60","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/rose-window/1.0.0/src/rose-window.js"}],"warnings":[]}