174 lines
8.7 KiB
HTML
174 lines
8.7 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="The shine leaves the paper. Now the waiting begins — and it must not be touched."><meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
:root{
|
|
--paper:#f3eede; /* cold dry paper */
|
|
--lav:#c9cfe8; /* pre-dawn lavender */
|
|
--coral:#e2704e; /* heart of the sunrise */
|
|
--payne:#3a3a44; /* skyline / ink */
|
|
--amber:#c8974a; /* reconciled cell */
|
|
--ink:#2b2b30;
|
|
}
|
|
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--paper)}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
|
|
/* shared card look — a painter's field note */
|
|
.card{position:relative;width:1500px;height:820px;background:rgba(255,252,243,.88);
|
|
border:1px solid rgba(43,43,48,.18);box-shadow:0 30px 80px rgba(80,60,40,.25);}
|
|
.marg{margin:90px}
|
|
h1{font-weight:400;font-size:64px;line-height:1.15;margin:0 0 30px;letter-spacing:-.5px}
|
|
p.note{font-family:ui-monospace,'Cascadia Mono',monospace;font-size:26px;line-height:1.6;
|
|
color:var(--ink);opacity:.82;max-width:1120px}
|
|
.rule{border-top:1px solid rgba(43,43,48,.25);width:180px;margin:44px 0 0}
|
|
.tag{font-family:ui-monospace,monospace;font-size:20px;letter-spacing:.18em;text-transform:uppercase;
|
|
color:var(--coral);font-weight:600;margin-bottom:18px}
|
|
|
|
/* the wash: translucent pools layered over paper */
|
|
.wash{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:980px;height:620px}
|
|
.pool{position:absolute;inset:0;border-radius:46% 44% 48% 42% / 52% 50% 54% 48%;
|
|
mix-blend-mode:multiply;opacity:.5}
|
|
.pool-lav{background:radial-gradient(60% 55% at 30% 35%, var(--lav), transparent 78%)}
|
|
.pool-coral{background:radial-gradient(55% 46% at 62% 28%, var(--coral), transparent 80%);opacity:.55}
|
|
.payne-band{position:absolute;left:8%;right:8%;bottom:16%;height:84px;background:var(--payne);opacity:.5}
|
|
.shine{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.25) 20%,transparent 40%)}
|
|
|
|
/* scene 2 — the failure bloom */
|
|
.caul{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:760px;height:520px;opacity:0}
|
|
.ring{border:6px solid var(--caulcol,var(--coral));border-radius:60% 40% 55% 45%;position:absolute;inset:0;opacity:.35}
|
|
.blob{position:absolute;background:var(--coral);opacity:.5;border-radius:50% 40% 55% 45%}
|
|
|
|
/* scene 3 — ledger grid */
|
|
.ledger{position:relative;width:1280px}
|
|
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:40px}
|
|
.cell{height:64px;background:rgba(255,255,255,.55);border:1px solid rgba(43,43,48,.15);border-radius:3px}
|
|
.row-label{font-family:ui-monospace,monospace;font-size:24px;margin-top:26px}
|
|
.reconciled{background:var(--amber);border-color:var(--amber)}
|
|
|
|
/* scene 4 — dawn settles */
|
|
.dawn{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:980px;height:620px}
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
|
|
|
<!-- SCENE 1 : the waiting -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
|
<div class="card">
|
|
<div class="wash">
|
|
<div class="pool pool-lav" id="p1"></div>
|
|
<div class="pool pool-coral" id="p1c"></div>
|
|
<div class="shine" id="shine1"></div>
|
|
</div>
|
|
<div class="marg" style="position:absolute;inset:0">
|
|
<div class="tag">field note 01 — the waiting</div>
|
|
<h1>The hardest part of a wash<br/>is nothing you paint.</h1>
|
|
<p class="note">The shine leaves the paper.<br/>Now the waiting begins — and it must not be touched.</p>
|
|
<div class="rule"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 2 : the failure modes -->
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
|
<div class="card">
|
|
<div class="caul" id="caul">
|
|
<div class="ring" id="ring1"></div>
|
|
<div class="ring" id="ring2"></div>
|
|
<div class="blob" id="blob1"></div>
|
|
</div>
|
|
<div class="marg" style="position:absolute;inset:0">
|
|
<div class="tag">field note 02 — the two failures</div>
|
|
<h1>Patience is not a virtue here.<br/>It is the medium.</h1>
|
|
<p class="note">Rush it, and the pigment blooms — a cauliflower edge.<br/>Wet it too heavy, and it floods to the shoreline.</p>
|
|
<div class="rule"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3 : the ledger -->
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
|
<div class="card">
|
|
<div class="ledger">
|
|
<div class="marg" style="position:relative">
|
|
<div class="tag">field note 03 — the same rule across two ledgers</div>
|
|
<h1>Let it lie down and settle.</h1>
|
|
<p class="note">Overnight, the row sits where it was hiding.<br/>By morning the balance reads reconciled.</p>
|
|
<div class="grid" id="grid">
|
|
<!-- 7 rows x 7 cols -->
|
|
</div>
|
|
<div class="row-label">A/R — line 17</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 4 : dawn settles -->
|
|
<section id="s4" class="clip" data-start="45" data-duration="15" data-track-index="1">
|
|
<div class="card">
|
|
<div class="dawn">
|
|
<div class="pool pool-lav" id="d1"></div>
|
|
<div class="pool pool-coral" id="d1c"></div>
|
|
<div class="payne-band" id="dpayne"></div>
|
|
</div>
|
|
<div class="marg" style="position:absolute;inset:0">
|
|
<div class="tag">field note 04 — the settling</div>
|
|
<h1>Wet on wet, with patience.</h1>
|
|
<p class="note">The paint dries lighter, the numbers reconcile,<br/>and the color sits where it decided to go.</p>
|
|
<div class="rule"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="45"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
|
</div>
|
|
|
|
<script>
|
|
// build the ledger grid (deterministic)
|
|
var grid = document.getElementById('grid');
|
|
var html = '';
|
|
for (var r = 0; r < 7; r++) {
|
|
for (var c = 0; c < 7; c++) {
|
|
var id = 'cell-' + r + '-' + c;
|
|
html += '<div class="cell" id="' + id + '"></div>';
|
|
}
|
|
}
|
|
grid.innerHTML = html;
|
|
|
|
window.__timelines = window.__timelines || {};
|
|
var tl = gsap.timeline({ paused: true });
|
|
|
|
// S1: pools sweep in, shine leaves
|
|
tl.from('#p1', {opacity:0, scale:.6, duration:2.4, ease:'power1.out'}, 0.3);
|
|
tl.from('#p1c', {opacity:0, scale:.7, duration:2.6, ease:'power1.out'}, 0.9);
|
|
tl.to('#shine1', {opacity:0, duration:5, ease:'power1.in'}, 2.6);
|
|
|
|
// S2: the bloom creeps, then a hard ring snaps shut
|
|
tl.set('#caul', {opacity:1}, 15.3);
|
|
tl.to('#blob1', {scale:2.1, opacity:.6, duration:4.4, ease:'power1.inOut'}, 15.6);
|
|
tl.fromTo('#ring1', {scale:.4, opacity:0}, {scale:1.6, opacity:.5, duration:3.2, ease:'power2.out'}, 16.2);
|
|
tl.fromTo('#ring2', {scale:.5, opacity:0}, {scale:1.9, opacity:.4, duration:3.8, ease:'power2.out'}, 17.0);
|
|
|
|
// S3: cells resolve row by row, amber line highlighted at end
|
|
tl.staggerFrom('.cell', {opacity:.05, duration:.5, ease:'none'}, 0.04, 30.4);
|
|
tl.to('#cell-6-1', {backgroundColor:'#c8974a', borderColor:'#c8974a', duration:.4}, 43.4);
|
|
tl.to('#cell-6-2', {backgroundColor:'#c8974a', borderColor:'#c8974a', duration:.4}, 43.9);
|
|
tl.to('#cell-6-3', {backgroundColor:'#c8974a', borderColor:'#c8974a', duration:.4}, 44.4);
|
|
tl.to('#cell-6-4', {backgroundColor:'#c8974a', borderColor:'#c8974a', duration:.4}, 44.9);
|
|
tl.to('#cell-6-5', {backgroundColor:'#c8974a', borderColor:'#c8974a', duration:.4}, 45.4);
|
|
|
|
// S4: dawn settles — coral line rises, band firms
|
|
tl.from('#d1', {opacity:0, scale:.7, duration:2.6, ease:'power1.out'}, 45.6);
|
|
tl.from('#d1c', {opacity:0, scale:.75, duration:2.8, ease:'power1.out'}, 46.4);
|
|
tl.to('#dpayne', {opacity:.7, y:8, duration:3, ease:'power1.inOut'}, 48.0);
|
|
|
|
window.__timelines['main'] = tl;
|
|
</script>
|
|
</body></html> |