104 lines
5.3 KiB
HTML
104 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="UTF-8"/>
|
|
<title>The Archive of Clay</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The Archive of Clay">
|
|
<meta property="og:description" content="Fourier">
|
|
<meta property="og:url" content="https://cathy-mcmasters.4ort.net/">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="description" content="Fourier's Law of Heat Conduction. Survival is arithmetic.">
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
:root { --clay-dark: #3a2e28; --clay-light: #8b7355; --loam: #5c4d3c; --sky: #e8f4f8; }
|
|
body{margin:0;background:#0b0f14;color:#fff;font-family:"Courier New",monospace}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:linear-gradient(to bottom,#0b0f14,#1a1a1a)}
|
|
.clip{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
|
|
.soil-layer{position:absolute;left:0;right:0;bottom:0;opacity:0.95;border-top:1px solid rgba(255,255,255,0.1)}
|
|
.data-stream{position:absolute;top:5%;left:5%;font-size:1.2rem;line-height:1.4;color:#ccc;writing-mode:vertical-lr;text-orientation:mixed}
|
|
.equation{font-size:2.5rem;color:#ffd700;margin:2rem 0;text-shadow:0 0 20px rgba(255,215,0,0.5)}
|
|
.cellar-plan{border:2px solid #8b7355;padding:2rem;width:60%;height:60vh;box-sizing:border-box;position:relative;background:rgba(139,115,85,0.1)}
|
|
.cellar-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:#8b7355;width:100%;height:100%}
|
|
.cellar-cell{background:rgba(0,0,0,0.8);transition:all 0.5s ease}
|
|
h1{font-size:4rem;margin-bottom:1rem;letter-spacing:0.05em}
|
|
p.sub{font-size:1.8rem;max-width:80vw;line-height:1.4}
|
|
</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="archive-of-clay" data-width="1920" data-height="1080" data-duration="180" data-start="0">
|
|
|
|
<!-- AUDIO TRACKS -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="45"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="90"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
|
|
|
<!-- SCENE 1: The Soil Profile -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="45" style="z-index:10">
|
|
<div class="soil-layer" style="height:30%;background:#3a2e28"></div>
|
|
<div class="soil-layer" style="height:40%;background:#5c4d3c"></div>
|
|
<div class="soil-layer" style="height:30%;background:#8b7355"></div>
|
|
|
|
<div class="data-stream" id="soil-data">
|
|
HAMPTON VA | CLAY-LOAM<br/>
|
|
K_THERMAL: 1.4 W/(m·K)<br/>
|
|
MOISTURE: 18.3% v/v<br/>
|
|
SHEAR MODULUS: 28 GPa
|
|
</div>
|
|
|
|
<h1 id="s1-title">ARCHIVE OF CLAY</h1>
|
|
<p id="s1-sub" class="sub">Hampton, Virginia. Latitude 37° N.</p>
|
|
</section>
|
|
|
|
<!-- SCENE 2: The Equation -->
|
|
<section id="s2" class="clip" data-start="45" data-duration="45" style="z-index:20">
|
|
<div class="equation" id="eq-display">
|
|
Q = k · A · ΔT / d
|
|
</div>
|
|
<p id="s2-narr" class="sub">Fourier's Law of Heat Conduction.<br/>Survival is arithmetic.</p>
|
|
</section>
|
|
|
|
<!-- SCENE 3: The Plan -->
|
|
<section id="s3" class="clip" data-start="90" data-duration="90" style="z-index:30">
|
|
<div class="cellar-plan" id="plan-view">
|
|
<div class="cellar-grid" id="thermal-grid"></div>
|
|
</div>
|
|
<p id="s3-caption" class="sub" style="position:absolute;bottom:5%">Minimum Burial Depth: 1.8 meters</p>
|
|
</section>
|
|
|
|
<script>
|
|
// Generate the thermal grid for Scene 3
|
|
const grid = document.getElementById('thermal-grid');
|
|
for(let i=0; i<144; i++) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'cellar-cell';
|
|
cell.style.backgroundColor = `rgb(${Math.floor(i*1.5)},${Math.floor(i*1.2)},${Math.floor(i)})`;
|
|
grid.appendChild(cell);
|
|
}
|
|
|
|
// TIMELINES
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// Scene 1: Title Reveal
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.5, ease: "power3.out" }, 0.5);
|
|
tl.to("#s1-sub", { opacity: 1, letterSpacing: "0.2em", duration: 2, ease: "expo.out" }, 3);
|
|
tl.to("#soil-data", { opacity: 1, x: 20, duration: 3, ease: "power2.inOut" }, 5);
|
|
|
|
// Scene 2: The Equation
|
|
tl.to(".equation", { scale: 1.2, color: "#fff", duration: 4, ease: "sine.inOut" }, 45.5);
|
|
tl.to("#eq-display", { color: "#ffd700", duration: 2, ease: "elastic.out(1,0.3)" }, 50);
|
|
tl.fromTo("#s2-narr",
|
|
{ opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 2, ease: "power2.out" }, 52);
|
|
|
|
// Scene 3: The Grid Ignition
|
|
const cells = Array.from(document.querySelectorAll('.cellar-cell'));
|
|
tl.staggerTo(cells, { backgroundColor: "rgba(255,215,0,0.3)", duration: 0.1 }, 0.02, 90.5);
|
|
tl.to("#s3-caption", { opacity: 1, filter: "blur(0px)", duration: 3, ease: "power3.inOut" }, 95);
|
|
|
|
// Fade Out
|
|
tl.to("body", { opacity: 0, duration: 5 }, 175);
|
|
|
|
window.__timelines["archive-of-clay"] = tl;
|
|
</script>
|
|
</body></html>
|