noisedestroyers/bubblechambersimart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

13 Layers.

Browse Source
This commit is contained in:
noisedestroyers
2026-07-19 21:28:14 -04:00
parent 2a4fffbb2a
commit 9460943a26
46 changed files with 1323 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
fable/Proof1/manifest.json
View File

@@ -20,59 +20,77 @@
"file": "plane-1-sun.svg",
"z": 0,
"blur": 1.4,
"dim": 0.95,
"dim": 1,
"white": "none",
"glow": 1
},
{
"id": "sea-far",
"file": "plane-2-sea-far.svg",
"z": 9,
"blur": 0.9,
"dim": 1,
"white": "none",
"glow": 0.7
},
{
"id": "sea-mid",
"file": "plane-3-sea-mid.svg",
"z": 15,
"blur": 0.5,
"dim": 1,
"white": "trace",
"glow": 0.7
},
{
"id": "sea-near",
"file": "plane-4-sea-near.svg",
"z": 18,
"blur": 0.2,
"dim": 1,
"white": "trace",
"glow": 0.7
},
{
"id": "event-halo",
"file": "plane-5-event-halo.svg",
"z": 27,
"blur": 2.4,
"id": "event-glow",
"file": "plane-2-event-glow.svg",
"z": 8,
"blur": 2.6,
"dim": 0.85,
"white": "none",
"glow": 0.9
},
{
"id": "event-core",
"file": "plane-6-event-core.svg",
"z": 30,
"blur": 0,
"id": "sea-far",
"file": "plane-3-sea-far.svg",
"z": 14,
"blur": 0.9,
"dim": 0.7,
"white": "none",
"glow": 0.8
},
{
"id": "sea-mid",
"file": "plane-4-sea-mid.svg",
"z": 18,
"blur": 0.5,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "sea-near",
"file": "plane-5-sea-near.svg",
"z": 22,
"blur": 0.2,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "event-birth",
"file": "plane-6-event-birth.svg",
"z": 28,
"blur": 0.7,
"dim": 1,
"white": "under",
"white": "none",
"glow": 0.8
},
{
"id": "event-life",
"file": "plane-7-event-life.svg",
"z": 32,
"blur": 0.3,
"dim": 1,
"white": "trace",
"glow": 0.5
},
{
"id": "event-death",
"file": "plane-8-event-death.svg",
"z": 36,
"blur": 0,
"dim": 1,
"white": "under",
"glow": 0.3
},
{
"id": "front-glass",
"file": "plane-7-front-glass.svg",
"z": 30,
"file": "plane-9-front-glass.svg",
"z": 36,
"blur": 0,
"dim": 1,
"white": "none",

2
fable/Proof1/plane-1-sun.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 412 KiB

0
fable/Proof1/plane-5-event-halo.svg → fable/Proof1/plane-2-event-glow.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 MiB

After

Width:  |  Height:  |  Size: 4.5 MiB

0
fable/Proof1/plane-2-sea-far.svg → fable/Proof1/plane-3-sea-far.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 396 KiB

0
fable/Proof1/plane-3-sea-mid.svg → fable/Proof1/plane-4-sea-mid.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 396 KiB

0
fable/Proof1/plane-4-sea-near.svg → fable/Proof1/plane-5-sea-near.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 KiB

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof1/plane-6-event-birth.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

1
fable/Proof1/plane-7-event-life.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

1
fable/Proof1/plane-8-event-death.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

0
fable/Proof1/plane-7-front-glass.svg → fable/Proof1/plane-9-front-glass.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

51
fable/Proof1/simulator.html
View File

@@ -1,14 +1,13 @@
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Proof1 · lit chamber — backlit parallax</title>
<style>
:root{--gap:6;--bright:1;}
html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
font:12px/1.5 ui-monospace,monospace;color:#9aa;}
#wrap{position:fixed;inset:0;display:grid;place-items:center;}
.scene{perspective:2200px;perspective-origin:50% 45%;}
.scene{perspective:1400px;perspective-origin:50% 45%;}
.stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
width:500.5px;height:810px;}
.panel{position:absolute;inset:-14%;transform:translateZ(-120px);
.panel{position:absolute;inset:-70%;
background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
filter:blur(2px);}
.plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
@@ -27,7 +26,9 @@
<h1>Proof1 · lit chamber</h1>
<div>move mouse = parallax · drag sliders</div>
<label>air gap ×<span id="gv"></span></label>
<input id="gap" type="range" min="1" max="18" step="0.5" value="6">
<input id="gap" type="range" min="1" max="28" step="0.5" value="12">
<label>parallax ×<span id="pv"></span></label>
<input id="par" type="range" min="0" max="220" step="5" value="110">
<label>backlight<span id="bv"></span></label>
<input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
<div id="pills"></div>
@@ -37,7 +38,7 @@
<div class="panel" id="panel"></div>
</div></div></div>
<script>
const PLANES=[{"id":"sun","file":"plane-1-sun.svg","z":0,"blur":1.4,"dim":0.95,"white":"none","glow":1},{"id":"sea-far","file":"plane-2-sea-far.svg","z":9,"blur":0.9,"dim":1,"white":"none","glow":0.7},{"id":"sea-mid","file":"plane-3-sea-mid.svg","z":15,"blur":0.5,"dim":1,"white":"trace","glow":0.7},{"id":"sea-near","file":"plane-4-sea-near.svg","z":18,"blur":0.2,"dim":1,"white":"trace","glow":0.7},{"id":"event-halo","file":"plane-5-event-halo.svg","z":27,"blur":2.4,"dim":0.85,"white":"none","glow":0.9},{"id":"event-core","file":"plane-6-event-core.svg","z":30,"blur":0,"dim":1,"white":"under","glow":0.5},{"id":"front-glass","file":"plane-7-front-glass.svg","z":30,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
const PLANES=[{"id":"sun","file":"plane-1-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"event-glow","file":"plane-2-event-glow.svg","z":8,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"sea-far","file":"plane-3-sea-far.svg","z":14,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"sea-mid","file":"plane-4-sea-mid.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"sea-near","file":"plane-5-sea-near.svg","z":22,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"event-birth","file":"plane-6-event-birth.svg","z":28,"blur":0.7,"dim":1,"white":"none","glow":0.8},{"id":"event-life","file":"plane-7-event-life.svg","z":32,"blur":0.3,"dim":1,"white":"trace","glow":0.5},{"id":"event-death","file":"plane-8-event-death.svg","z":36,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"front-glass","file":"plane-9-front-glass.svg","z":36,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
const stack=document.getElementById('stack');
const legend=document.getElementById('legend');
const pills=document.getElementById('pills');
@@ -52,30 +53,38 @@ PLANES.forEach(p=>{
pill.onclick=()=>{d.dataset.off=d.dataset.off?'':'1'; pill.classList.toggle('off'); layout();};
pills.appendChild(pill);
});
let gap=6, bright=1, mx=0, my=0;
function layout(){
let gap=12, par=110, bright=1, mx=0, my=0;
const panel=document.getElementById('panel');
// One transform per plane = translateZ (real depth) + a depth-scaled screen
// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
// so the event's birth→death timeline slides apart as you move.
function update(){
stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
for(const p of PLANES){
const e=els[p.id];
const z=(p.z-maxZ)*gap; // front plane at 0, others recede
const blur=(p.blur||0)*(gap/6);
const off=e.dataset.off?' opacity:0;':'';
e.style.transform='translateZ('+z+'px)';
e.style.filter='blur('+blur.toFixed(2)+'px)';
const z=(p.z-maxZ)*gap; // front plane at 0, others recede
const depth=(maxZ-p.z)/(maxZ||1); // 0 = front, 1 = deepest
const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
e.style.opacity=e.dataset.off?0:(p.dim??1);
e.style.mixBlendMode=p.blend||'normal';
}
document.getElementById('panel').style.filter='blur(2px) brightness('+bright+')';
}
function parallax(){
stack.style.transform='rotateX('+(my*7)+'deg) rotateY('+(mx*9)+'deg)';
// keep the light panel ALWAYS behind the deepest plane, scaled up so it still
// fills the backdrop as it recedes (else deep planes pop behind it at high gap).
const pz=(0-maxZ)*gap-90;
panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
panel.style.filter='blur(2px) brightness('+bright+')';
}
addEventListener('mousemove',e=>{
mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; parallax();
mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
});
const gapI=document.getElementById('gap'), brI=document.getElementById('bright');
gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; layout();};
brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); layout();};
const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
document.getElementById('gv').textContent=' '+gap;
document.getElementById('pv').textContent=' '+par;
document.getElementById('bv').textContent=' '+bright.toFixed(2);
layout(); parallax();
update();
</script></body></html>

137
fable/Proof2/manifest.json Normal file
View File

@@ -0,0 +1,137 @@
{
"piece": "Proof2 — the lit chamber (7 time-shells)",
"source": "REFINED_Backlit7 merge (mirror event, uniform-lace)",
"seed": "MESON-5113#03",
"bubbleOpacity": 0.5,
"art": {
"w": 1001,
"h": 1620,
"ratio": "phi (golden portrait)"
},
"sheet": {
"w_mm": 330,
"h_mm": 420,
"note": "A3 — golden art square floated, clear margins = lit void"
},
"gaps_mm": "plane z is nominal; two scales: ~3mm within a sheet, ~9mm between",
"planes": [
{
"id": "sun",
"file": "plane-01-sun.svg",
"z": 0,
"blur": 1.4,
"dim": 1,
"white": "none",
"glow": 1
},
{
"id": "glow",
"file": "plane-02-glow.svg",
"z": 5,
"blur": 2.6,
"dim": 0.85,
"white": "none",
"glow": 0.9
},
{
"id": "wave1",
"file": "plane-03-wave1.svg",
"z": 10,
"blur": 0.9,
"dim": 0.7,
"white": "none",
"glow": 0.8
},
{
"id": "p1",
"file": "plane-04-p1.svg",
"z": 14,
"blur": 0.8,
"dim": 1,
"white": "none",
"glow": 0.8
},
{
"id": "wave2",
"file": "plane-05-wave2.svg",
"z": 18,
"blur": 0.5,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "p2",
"file": "plane-06-p2.svg",
"z": 22,
"blur": 0.7,
"dim": 1,
"white": "none",
"glow": 0.7
},
{
"id": "wave3",
"file": "plane-07-wave3.svg",
"z": 26,
"blur": 0.2,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "p3",
"file": "plane-08-p3.svg",
"z": 30,
"blur": 0.55,
"dim": 1,
"white": "trace",
"glow": 0.6
},
{
"id": "p4",
"file": "plane-09-p4.svg",
"z": 34,
"blur": 0.45,
"dim": 1,
"white": "trace",
"glow": 0.5
},
{
"id": "p5",
"file": "plane-10-p5.svg",
"z": 38,
"blur": 0.35,
"dim": 1,
"white": "trace",
"glow": 0.4
},
{
"id": "p6",
"file": "plane-11-p6.svg",
"z": 42,
"blur": 0.2,
"dim": 1,
"white": "under",
"glow": 0.35
},
{
"id": "p7",
"file": "plane-12-p7.svg",
"z": 46,
"blur": 0,
"dim": 1,
"white": "under",
"glow": 0.3
},
{
"id": "film-grain",
"file": "plane-13-film-grain.svg",
"z": 46,
"blur": 0,
"dim": 1,
"white": "none",
"glow": 0,
"blend": "multiply"
}
]
}

1
fable/Proof2/plane-01-sun.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

0
fable/Proof1/plane-6-event-core.svg → fable/Proof2/plane-02-glow.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 MiB

After

Width:  |  Height:  |  Size: 4.5 MiB

1
fable/Proof2/plane-03-wave1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof2/plane-04-p1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

1
fable/Proof2/plane-05-wave2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof2/plane-06-p2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

1
fable/Proof2/plane-07-wave3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof2/plane-08-p3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 574 KiB

1
fable/Proof2/plane-09-p4.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 606 KiB

1
fable/Proof2/plane-10-p5.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 650 KiB

1
fable/Proof2/plane-11-p6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 761 KiB

1
fable/Proof2/plane-12-p7.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

1
fable/Proof2/plane-13-film-grain.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="1620" viewBox="0 0 1001 1620"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz4KIDxmaWx0ZXIgaWQ9ImR1c3QiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0idHVyYnVsZW5jZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuIi8+PGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMjM1IDAgMCAwIDAgMC4xODggMCAwIDAgMCAwLjEzMyAwIDAgMCAwLjMwMCAtMC4xOCIvPjwvZmlsdGVyPgogPGZpbHRlciBpZD0iZm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDQiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC40MiAwIDAgMCAwIDAuMzAgMCAwIDAgMCAwLjE2IDAgMCAwIDAuMTk4IC0wLjEyIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2ZveCkiLz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2R1c3QpIi8+CjxsaW5lIHgxPSI0MTEiIHkxPSIzNDQiIHgyPSI0MzAiIHkyPSIxMjQ3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA5MCIgc3Ryb2tlLXdpZHRoPSIwLjc5Ii8+PGxpbmUgeDE9IjcwMiIgeTE9IjY4IiB4Mj0iNjg3IiB5Mj0iMTQzNyIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4wNTEiIHN0cm9rZS13aWR0aD0iMC43NyIvPjxsaW5lIHgxPSI0MjIiIHkxPSI1MTQiIHgyPSI0MzciIHkyPSIxNzU3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE2NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PGxpbmUgeDE9IjEwIiB5MT0iNTIzIiB4Mj0iMTkiIHkyPSIxODY5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE1MCIgc3Ryb2tlLXdpZHRoPSIwLjUzIi8+PGxpbmUgeDE9IjQzNCIgeTE9IjI4NSIgeDI9IjQyMSIgeTI9IjE0NDIiIHN0cm9rZT0icmdiKDYwLDQ4LDM0KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU3IiBzdHJva2Utd2lkdGg9IjAuNzAiLz48bGluZSB4MT0iMTExIiB5MT0iMTgwIiB4Mj0iOTUiIHkyPSIxNTk0IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4NiIgc3Ryb2tlLXdpZHRoPSIwLjkxIi8+PGxpbmUgeDE9IjE0MCIgeTE9IjE2NCIgeDI9IjE1OCIgeTI9Ijc1OCIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4xMDUiIHN0cm9rZS13aWR0aD0iMS4wNCIvPjxsaW5lIHgxPSIxOTIiIHkxPSIzNjMiIHgyPSIyMDciIHkyPSIxNDg5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PC9zdmc+"/><g opacity="0.85"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iMTkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgo8ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4xNDkgMCAwIDAgMCAwLjEyNSAwIDAgMCAwIDAuMTAyIDAgMCAwIDAuNTIgMCIvPgo8L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2cpIi8+PC9zdmc+"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

90
fable/Proof2/simulator.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Proof2 · lit chamber — backlit parallax</title>
<style>
html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
font:12px/1.5 ui-monospace,monospace;color:#9aa;}
#wrap{position:fixed;inset:0;display:grid;place-items:center;}
.scene{perspective:1400px;perspective-origin:50% 45%;}
.stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
width:500.5px;height:810px;}
.panel{position:absolute;inset:-70%;
background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
filter:blur(2px);}
.plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
background-repeat:no-repeat;will-change:transform,filter;}
#hud{position:fixed;left:14px;top:12px;z-index:9;background:#141416cc;padding:12px 14px;
border-left:3px solid #d9b48a;max-width:300px;}
#hud h1{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d9b48a;font-weight:400;margin:0 0 8px;}
#hud label{display:block;margin:7px 0 2px;color:#aab;}
#hud input[type=range]{width:100%;}
#legend{position:fixed;right:14px;top:12px;z-index:9;background:#141416cc;padding:10px 12px;color:#889;}
#legend b{color:#d9b48a;font-weight:400;}
.pill{display:inline-block;margin:2px 4px 2px 0;padding:1px 6px;border:1px solid #333;border-radius:9px;cursor:pointer;color:#aab;}
.pill.off{opacity:.35;text-decoration:line-through;}
</style></head><body>
<div id="hud">
<h1>Proof2 · lit chamber</h1>
<div>move mouse = parallax · drag sliders</div>
<label>air gap ×<span id="gv"></span></label>
<input id="gap" type="range" min="1" max="28" step="0.5" value="12">
<label>parallax ×<span id="pv"></span></label>
<input id="par" type="range" min="0" max="220" step="5" value="110">
<label>backlight<span id="bv"></span></label>
<input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
<div id="pills"></div>
</div>
<div id="legend"></div>
<div id="wrap"><div class="scene"><div class="stack" id="stack">
<div class="panel" id="panel"></div>
</div></div></div>
<script>
const PLANES=[{"id":"sun","file":"plane-01-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"glow","file":"plane-02-glow.svg","z":5,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"wave1","file":"plane-03-wave1.svg","z":10,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"p1","file":"plane-04-p1.svg","z":14,"blur":0.8,"dim":1,"white":"none","glow":0.8},{"id":"wave2","file":"plane-05-wave2.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"p2","file":"plane-06-p2.svg","z":22,"blur":0.7,"dim":1,"white":"none","glow":0.7},{"id":"wave3","file":"plane-07-wave3.svg","z":26,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"p3","file":"plane-08-p3.svg","z":30,"blur":0.55,"dim":1,"white":"trace","glow":0.6},{"id":"p4","file":"plane-09-p4.svg","z":34,"blur":0.45,"dim":1,"white":"trace","glow":0.5},{"id":"p5","file":"plane-10-p5.svg","z":38,"blur":0.35,"dim":1,"white":"trace","glow":0.4},{"id":"p6","file":"plane-11-p6.svg","z":42,"blur":0.2,"dim":1,"white":"under","glow":0.35},{"id":"p7","file":"plane-12-p7.svg","z":46,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"film-grain","file":"plane-13-film-grain.svg","z":46,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
const stack=document.getElementById('stack');
const legend=document.getElementById('legend');
const pills=document.getElementById('pills');
const maxZ=Math.max(...PLANES.map(p=>p.z));
const els={};
legend.innerHTML='<b>planes</b> (front → back)<br>'+[...PLANES].reverse().map(p=>p.id+' · '+p.z+'mm').join('<br>');
PLANES.forEach(p=>{
const d=document.createElement('div');
d.className='plane'; d.style.backgroundImage='url('+p.file+')';
d.dataset.id=p.id; stack.appendChild(d); els[p.id]=d;
const pill=document.createElement('span'); pill.className='pill'; pill.textContent=p.id;
pill.onclick=()=>{d.dataset.off=d.dataset.off?'':'1'; pill.classList.toggle('off'); layout();};
pills.appendChild(pill);
});
let gap=12, par=110, bright=1, mx=0, my=0;
const panel=document.getElementById('panel');
// One transform per plane = translateZ (real depth) + a depth-scaled screen
// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
// so the event's birth→death timeline slides apart as you move.
function update(){
stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
for(const p of PLANES){
const e=els[p.id];
const z=(p.z-maxZ)*gap; // front plane at 0, others recede
const depth=(maxZ-p.z)/(maxZ||1); // 0 = front, 1 = deepest
const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
e.style.opacity=e.dataset.off?0:(p.dim??1);
e.style.mixBlendMode=p.blend||'normal';
}
// keep the light panel ALWAYS behind the deepest plane, scaled up so it still
// fills the backdrop as it recedes (else deep planes pop behind it at high gap).
const pz=(0-maxZ)*gap-90;
panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
panel.style.filter='blur(2px) brightness('+bright+')';
}
addEventListener('mousemove',e=>{
mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
});
const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
document.getElementById('gv').textContent=' '+gap;
document.getElementById('pv').textContent=' '+par;
document.getElementById('bv').textContent=' '+bright.toFixed(2);
update();
</script></body></html>

137
fable/Proof3/manifest.json Normal file
View File

@@ -0,0 +1,137 @@
{
"piece": "Proof3 — the lit chamber (equal-count shells, ring-pop)",
"source": "REFINED_Backlit7 merge (mirror event, uniform-lace)",
"seed": "MESON-5113#03",
"bubbleOpacity": 0.5,
"art": {
"w": 1001,
"h": 1620,
"ratio": "phi (golden portrait)"
},
"sheet": {
"w_mm": 330,
"h_mm": 420,
"note": "A3 — golden art square floated, clear margins = lit void"
},
"gaps_mm": "plane z is nominal; two scales: ~3mm within a sheet, ~9mm between",
"planes": [
{
"id": "sun",
"file": "plane-01-sun.svg",
"z": 0,
"blur": 1.4,
"dim": 1,
"white": "none",
"glow": 1
},
{
"id": "glow",
"file": "plane-02-glow.svg",
"z": 5,
"blur": 2.6,
"dim": 0.85,
"white": "none",
"glow": 0.9
},
{
"id": "wave1",
"file": "plane-03-wave1.svg",
"z": 10,
"blur": 0.9,
"dim": 0.7,
"white": "none",
"glow": 0.8
},
{
"id": "p1",
"file": "plane-04-p1.svg",
"z": 14,
"blur": 0.8,
"dim": 1,
"white": "none",
"glow": 0.8
},
{
"id": "wave2",
"file": "plane-05-wave2.svg",
"z": 18,
"blur": 0.5,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "p2",
"file": "plane-06-p2.svg",
"z": 22,
"blur": 0.7,
"dim": 1,
"white": "none",
"glow": 0.7
},
{
"id": "wave3",
"file": "plane-07-wave3.svg",
"z": 26,
"blur": 0.2,
"dim": 0.7,
"white": "trace",
"glow": 0.7
},
{
"id": "p3",
"file": "plane-08-p3.svg",
"z": 30,
"blur": 0.55,
"dim": 1,
"white": "trace",
"glow": 0.6
},
{
"id": "p4",
"file": "plane-09-p4.svg",
"z": 34,
"blur": 0.45,
"dim": 1,
"white": "trace",
"glow": 0.5
},
{
"id": "p5",
"file": "plane-10-p5.svg",
"z": 38,
"blur": 0.35,
"dim": 1,
"white": "trace",
"glow": 0.4
},
{
"id": "p6",
"file": "plane-11-p6.svg",
"z": 42,
"blur": 0.2,
"dim": 1,
"white": "under",
"glow": 0.35
},
{
"id": "p7",
"file": "plane-12-p7.svg",
"z": 46,
"blur": 0,
"dim": 1,
"white": "under",
"glow": 0.3
},
{
"id": "film-grain",
"file": "plane-13-film-grain.svg",
"z": 46,
"blur": 0,
"dim": 1,
"white": "none",
"glow": 0,
"blend": "multiply"
}
]
}

1
fable/Proof3/plane-01-sun.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

1
fable/Proof3/plane-02-glow.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

1
fable/Proof3/plane-03-wave1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof3/plane-04-p1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 606 KiB

1
fable/Proof3/plane-05-wave2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof3/plane-06-p2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB

1
fable/Proof3/plane-07-wave3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

1
fable/Proof3/plane-08-p3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 721 KiB

1
fable/Proof3/plane-09-p4.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 700 KiB

1
fable/Proof3/plane-10-p5.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 693 KiB

1
fable/Proof3/plane-11-p6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

1
fable/Proof3/plane-12-p7.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 680 KiB

1
fable/Proof3/plane-13-film-grain.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1001" height="1620" viewBox="0 0 1001 1620"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz4KIDxmaWx0ZXIgaWQ9ImR1c3QiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxmZVR1cmJ1bGVuY2UgdHlwZT0idHVyYnVsZW5jZSIgYmFzZUZyZXF1ZW5jeT0iMC41IiBudW1PY3RhdmVzPSIyIiBzZWVkPSIxMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuIi8+PGZlQ29sb3JNYXRyaXggaW49Im4iIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuMjM1IDAgMCAwIDAgMC4xODggMCAwIDAgMCAwLjEzMyAwIDAgMCAwLjMwMCAtMC4xOCIvPjwvZmlsdGVyPgogPGZpbHRlciBpZD0iZm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDQiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjE3IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC40MiAwIDAgMCAwIDAuMzAgMCAwIDAgMCAwLjE2IDAgMCAwIDAuMTk4IC0wLjEyIi8+PC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2ZveCkiLz4KPHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2R1c3QpIi8+CjxsaW5lIHgxPSI0MTEiIHkxPSIzNDQiIHgyPSI0MzAiIHkyPSIxMjQ3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA5MCIgc3Ryb2tlLXdpZHRoPSIwLjc5Ii8+PGxpbmUgeDE9IjcwMiIgeTE9IjY4IiB4Mj0iNjg3IiB5Mj0iMTQzNyIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4wNTEiIHN0cm9rZS13aWR0aD0iMC43NyIvPjxsaW5lIHgxPSI0MjIiIHkxPSI1MTQiIHgyPSI0MzciIHkyPSIxNzU3IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE2NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PGxpbmUgeDE9IjEwIiB5MT0iNTIzIiB4Mj0iMTkiIHkyPSIxODY5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjE1MCIgc3Ryb2tlLXdpZHRoPSIwLjUzIi8+PGxpbmUgeDE9IjQzNCIgeTE9IjI4NSIgeDI9IjQyMSIgeTI9IjE0NDIiIHN0cm9rZT0icmdiKDYwLDQ4LDM0KSIgc3Ryb2tlLW9wYWNpdHk9IjAuMTU3IiBzdHJva2Utd2lkdGg9IjAuNzAiLz48bGluZSB4MT0iMTExIiB5MT0iMTgwIiB4Mj0iOTUiIHkyPSIxNTk0IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA4NiIgc3Ryb2tlLXdpZHRoPSIwLjkxIi8+PGxpbmUgeDE9IjE0MCIgeTE9IjE2NCIgeDI9IjE1OCIgeTI9Ijc1OCIgc3Ryb2tlPSJyZ2IoNjAsNDgsMzQpIiBzdHJva2Utb3BhY2l0eT0iMC4xMDUiIHN0cm9rZS13aWR0aD0iMS4wNCIvPjxsaW5lIHgxPSIxOTIiIHkxPSIzNjMiIHgyPSIyMDciIHkyPSIxNDg5IiBzdHJva2U9InJnYig2MCw0OCwzNCkiIHN0cm9rZS1vcGFjaXR5PSIwLjA3NSIgc3Ryb2tlLXdpZHRoPSIxLjAzIi8+PC9zdmc+"/><g opacity="0.85"><image x="0" y="0" width="1001" height="1620" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAxIiBoZWlnaHQ9IjE2MjAiIHZpZXdCb3g9IjAgMCAxMDAxIDE2MjAiPgo8ZGVmcz48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuOSIgbnVtT2N0YXZlcz0iMiIgc2VlZD0iMTkiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibiIvPgo8ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4xNDkgMCAwIDAgMCAwLjEyNSAwIDAgMCAwIDAuMTAyIDAgMCAwIDAuNTIgMCIvPgo8L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMDEiIGhlaWdodD0iMTYyMCIgZmlsdGVyPSJ1cmwoI2cpIi8+PC9zdmc+"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

101
fable/Proof3/simulator.html Normal file
View File

@@ -0,0 +1,101 @@
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Proof3 · lit chamber — backlit parallax</title>
<style>
html,body{margin:0;height:100%;background:#0a0a0b;overflow:hidden;
font:12px/1.5 ui-monospace,monospace;color:#9aa;}
#wrap{position:fixed;inset:0;display:grid;place-items:center;}
.scene{perspective:1400px;perspective-origin:50% 45%;}
.stack{position:relative;transform-style:preserve-3d;transition:transform .06s linear;
width:500.5px;height:810px;}
.panel{position:absolute;inset:-70%;
background:radial-gradient(120% 90% at 50% 42%,#fff6ec, #ffe7c8 42%, #f0c48c 78%, #caa06a 100%);
filter:blur(2px);}
.plane{position:absolute;inset:0;width:100%;height:100%;background-size:cover;
background-repeat:no-repeat;will-change:transform,filter;}
#hud{position:fixed;left:14px;top:12px;z-index:9;background:#141416cc;padding:12px 14px;
border-left:3px solid #d9b48a;max-width:300px;}
#hud h1{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#d9b48a;font-weight:400;margin:0 0 8px;}
#hud label{display:block;margin:7px 0 2px;color:#aab;}
#hud input[type=range]{width:100%;}
#legend{position:fixed;right:14px;top:12px;z-index:9;background:#141416cc;padding:10px 12px;color:#889;}
#legend b{color:#d9b48a;font-weight:400;}
#layers{margin-top:10px;max-height:44vh;overflow:auto;padding-right:4px;}
.lay{display:flex;align-items:center;gap:7px;margin:1px 0;}
.lay span{width:82px;color:#aab;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lay input[type=range]{flex:1;}
.lay b{width:26px;text-align:right;color:#778;font-size:10px;}
</style></head><body>
<div id="hud">
<h1>Proof3 · lit chamber</h1>
<div>move mouse = parallax · drag sliders</div>
<label>air gap ×<span id="gv"></span></label>
<input id="gap" type="range" min="1" max="28" step="0.5" value="12">
<label>parallax ×<span id="pv"></span></label>
<input id="par" type="range" min="0" max="220" step="5" value="110">
<label>backlight<span id="bv"></span></label>
<input id="bright" type="range" min="0.3" max="1.8" step="0.05" value="1">
<label>layer opacity (front → back)</label>
<div id="layers"></div>
</div>
<div id="legend"></div>
<div id="wrap"><div class="scene"><div class="stack" id="stack">
<div class="panel" id="panel"></div>
</div></div></div>
<script>
const PLANES=[{"id":"sun","file":"plane-01-sun.svg","z":0,"blur":1.4,"dim":1,"white":"none","glow":1},{"id":"glow","file":"plane-02-glow.svg","z":5,"blur":2.6,"dim":0.85,"white":"none","glow":0.9},{"id":"wave1","file":"plane-03-wave1.svg","z":10,"blur":0.9,"dim":0.7,"white":"none","glow":0.8},{"id":"p1","file":"plane-04-p1.svg","z":14,"blur":0.8,"dim":1,"white":"none","glow":0.8},{"id":"wave2","file":"plane-05-wave2.svg","z":18,"blur":0.5,"dim":0.7,"white":"trace","glow":0.7},{"id":"p2","file":"plane-06-p2.svg","z":22,"blur":0.7,"dim":1,"white":"none","glow":0.7},{"id":"wave3","file":"plane-07-wave3.svg","z":26,"blur":0.2,"dim":0.7,"white":"trace","glow":0.7},{"id":"p3","file":"plane-08-p3.svg","z":30,"blur":0.55,"dim":1,"white":"trace","glow":0.6},{"id":"p4","file":"plane-09-p4.svg","z":34,"blur":0.45,"dim":1,"white":"trace","glow":0.5},{"id":"p5","file":"plane-10-p5.svg","z":38,"blur":0.35,"dim":1,"white":"trace","glow":0.4},{"id":"p6","file":"plane-11-p6.svg","z":42,"blur":0.2,"dim":1,"white":"under","glow":0.35},{"id":"p7","file":"plane-12-p7.svg","z":46,"blur":0,"dim":1,"white":"under","glow":0.3},{"id":"film-grain","file":"plane-13-film-grain.svg","z":46,"blur":0,"dim":1,"white":"none","glow":0,"blend":"multiply"}];
const stack=document.getElementById('stack');
const legend=document.getElementById('legend');
const layers=document.getElementById('layers');
const maxZ=Math.max(...PLANES.map(p=>p.z));
const els={}, op={}; // op[id] = per-layer opacity override (a slider each)
legend.innerHTML='<b>planes</b> (front → back)<br>'+[...PLANES].reverse().map(p=>p.id+' · '+p.z+'mm').join('<br>');
// build planes back→front for correct DOM paint order, sliders front→back for reading
PLANES.forEach(p=>{
const d=document.createElement('div');
d.className='plane'; d.style.backgroundImage='url('+p.file+')';
d.dataset.id=p.id; stack.appendChild(d); els[p.id]=d;
op[p.id]=(p.dim??1);
});
[...PLANES].reverse().forEach(p=>{
const row=document.createElement('div'); row.className='lay';
const lab=document.createElement('span'); lab.textContent=p.id;
const sl=document.createElement('input'); sl.type='range'; sl.min=0; sl.max=1; sl.step=0.05; sl.value=op[p.id];
const val=document.createElement('b'); val.textContent=op[p.id].toFixed(2);
sl.oninput=()=>{op[p.id]=+sl.value; val.textContent=op[p.id].toFixed(2); update();};
row.appendChild(lab); row.appendChild(sl); row.appendChild(val); layers.appendChild(row);
});
let gap=12, par=110, bright=1, mx=0, my=0;
const panel=document.getElementById('panel');
// One transform per plane = translateZ (real depth) + a depth-scaled screen
// shift (EXAGGERATED parallax) + the stack's 3D tilt. Deeper planes shift more,
// so the event's birth→death timeline slides apart as you move.
function update(){
stack.style.transform='rotateX('+(my*11).toFixed(2)+'deg) rotateY('+(mx*15).toFixed(2)+'deg)';
for(const p of PLANES){
const e=els[p.id];
const z=(p.z-maxZ)*gap; // front plane at 0, others recede
const depth=(maxZ-p.z)/(maxZ||1); // 0 = front, 1 = deepest
const ox=(-mx*depth*par).toFixed(1), oy=(my*depth*par).toFixed(1);
e.style.transform='translate3d('+ox+'px,'+oy+'px,'+z.toFixed(1)+'px)';
e.style.filter='blur('+((p.blur||0)*(gap/8)).toFixed(2)+'px)';
e.style.opacity=op[p.id];
e.style.mixBlendMode=p.blend||'normal';
}
// keep the light panel ALWAYS behind the deepest plane, scaled up so it still
// fills the backdrop as it recedes (else deep planes pop behind it at high gap).
const pz=(0-maxZ)*gap-90;
panel.style.transform='translateZ('+pz.toFixed(0)+'px) scale('+(1+(-pz)/1400).toFixed(2)+')';
panel.style.filter='blur(2px) brightness('+bright+')';
}
addEventListener('mousemove',e=>{
mx=(e.clientX/innerWidth-0.5)*2; my=-(e.clientY/innerHeight-0.5)*2; update();
});
const gapI=document.getElementById('gap'), parI=document.getElementById('par'), brI=document.getElementById('bright');
gapI.oninput=()=>{gap=+gapI.value; document.getElementById('gv').textContent=' '+gap; update();};
parI.oninput=()=>{par=+parI.value; document.getElementById('pv').textContent=' '+par; update();};
brI.oninput=()=>{bright=+brI.value; document.getElementById('bv').textContent=' '+bright.toFixed(2); update();};
document.getElementById('gv').textContent=' '+gap;
document.getElementById('pv').textContent=' '+par;
document.getElementById('bv').textContent=' '+bright.toFixed(2);
update();
</script></body></html>