362 lines
13 KiB
HTML
362 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>The Iterative Drift Ledger | Abel Hall</title>
|
||
<style>
|
||
:root {
|
||
--void: #0a0a0f;
|
||
--granite: #1a1a24;
|
||
--signal: #00d4ff;
|
||
--drift: #ff3366;
|
||
--text: #e0e0e0;
|
||
--muted: #888899;
|
||
--grid: rgba(0, 212, 255, 0.03);
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
background: var(--void);
|
||
color: var(--text);
|
||
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.canvas {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
background-image:
|
||
linear-gradient(var(--grid) 1px, transparent 1px),
|
||
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||
background-size: 40px 40px;
|
||
}
|
||
|
||
header {
|
||
padding: 8rem 2rem 4rem;
|
||
max-width: 90ch;
|
||
margin: 0 auto;
|
||
border-bottom: 1px solid var(--granite);
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 1rem;
|
||
background: linear-gradient(180deg, var(--signal), var(--muted));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.1rem;
|
||
color: var(--muted);
|
||
max-width: 65ch;
|
||
}
|
||
|
||
.section {
|
||
padding: 6rem 2rem;
|
||
max-width: 120ch;
|
||
margin: 0 auto;
|
||
border-top: 1px dashed var(--granite);
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 2rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-num {
|
||
font-size: 0.9rem;
|
||
color: var(--drift);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.8rem;
|
||
letter-spacing: -0.01em;
|
||
color: var(--signal);
|
||
}
|
||
|
||
.data-block {
|
||
background: var(--granite);
|
||
border-left: 3px solid var(--signal);
|
||
padding: 2rem;
|
||
margin: 2rem 0;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.data-row {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr;
|
||
gap: 1rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||
}
|
||
|
||
.data-row:last-child { border-bottom: none; }
|
||
|
||
.label { color: var(--muted); }
|
||
|
||
.value {
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.drift-value { color: var(--drift); }
|
||
|
||
.field-image {
|
||
width: 100%;
|
||
height: 300px;
|
||
object-fit: cover;
|
||
border: 1px solid var(--granite);
|
||
margin: 2rem 0;
|
||
filter: grayscale(0.3) contrast(1.1);
|
||
}
|
||
|
||
.image-caption {
|
||
font-size: 0.85rem;
|
||
color: var(--muted);
|
||
margin-top: 0.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.visualization {
|
||
height: 400px;
|
||
background: var(--granite);
|
||
border: 1px solid var(--granite);
|
||
margin: 3rem 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-line-perfect {
|
||
position: absolute;
|
||
bottom: 20%;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: var(--signal);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.chart-line-lived {
|
||
position: absolute;
|
||
bottom: 20%;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: var(--drift);
|
||
clip-path: polygon(
|
||
0% 50%, 5% 45%, 10% 55%, 15% 48%, 20% 52%,
|
||
25% 47%, 30% 53%, 35% 49%, 40% 51%, 45% 46%,
|
||
50% 54%, 55% 50%, 60% 48%, 65% 52%, 70% 49%,
|
||
75% 51%, 80% 47%, 85% 53%, 90% 50%, 95% 48%, 100% 50%
|
||
);
|
||
}
|
||
|
||
.axis-label {
|
||
position: absolute;
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.y-axis { left: 1rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
|
||
.x-axis { bottom: 1rem; left: 50%; transform: translateX(-50%); }
|
||
|
||
.legend {
|
||
display: flex;
|
||
gap: 3rem;
|
||
margin-top: 2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.legend-item { display: flex; align-items: center; gap: 0.5rem; }
|
||
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
|
||
.control-panel {
|
||
background: var(--granite);
|
||
padding: 2rem;
|
||
margin: 3rem 0;
|
||
border: 1px solid var(--granite);
|
||
}
|
||
|
||
input[type="range"] {
|
||
width: 100%;
|
||
accent-color: var(--signal);
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.readout {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.9rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
footer {
|
||
padding: 4rem 2rem;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
border-top: 1px solid var(--granite);
|
||
}
|
||
|
||
a { color: var(--signal); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="canvas">
|
||
<header>
|
||
<h1>The Iterative Drift Ledger</h1>
|
||
<p class="subtitle">Prevention protocols seek to eliminate variance. This ledger maps it. Every deviation from the perfect line is not a failure—it is data. From aluminum alloys to Arduino sensors, from the North Shore granite to the Mars habitat dome.</p>
|
||
</header>
|
||
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<span class="section-num">01</span>
|
||
<h2>The Physics of Breath</h2>
|
||
</div>
|
||
|
||
<p style="margin-bottom: 2rem;">Materials expand. This is not a flaw in engineering—it is a law of thermodynamics. To build a system that never drifts is to deny physics itself. The goal is not zero variance, but calibrated tolerance.</p>
|
||
|
||
<div class="data-block">
|
||
<div class="data-row">
|
||
<span class="label">Material</span>
|
||
<span class="value">Aluminium Alloy (Q447725)</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Property</span>
|
||
<span class="value">Coefficient of Thermal Expansion (Q45760)</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Linear Range</span>
|
||
<span class="value drift-value">23–24 × 10⁻⁶ K⁻¹</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Domain</span>
|
||
<span class="value">Thermodynamics • Mechanical Engineering</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Source</span>
|
||
<span class="value"><a href="https://4ort.xyz/entity/thermal-expansion" target="_blank">Wikidata Q6583695</a></span>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="color: var(--muted); margin-top: 1rem; font-size: 0.9rem;">
|
||
At 100K temperature differential, a 10-meter aluminum beam expands 24mm. Not error. Expectation.
|
||
</p>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<span class="section-num">02</span>
|
||
<h2>Field Data: North Shore Drift Logs</h2>
|
||
</div>
|
||
|
||
<p style="margin-bottom: 2rem;">Between July 10–17, 2026, Arduino sensor arrays mounted on granite outcrops along Highway 61 recorded humidity-induced voltage drift. Each spike corresponds to a lake-effect weather front moving inland from Superior.</p>
|
||
|
||
<img class="field-image" src="https://pixabay.com/get/gc6702eb1947854d1da7f93becc13800487497b6792e7190bb2299f7bb356ddfddead4a85e8396f6f3c36cbf315e2cc0e2d07e5da2e2b3c28a60d0c604485c768_1280.jpg" alt="Lake Superior granite shoreline, North Shore Minnesota">
|
||
<p class="image-caption">Granite outcrops, Highway 61. The substrate for all sensor calibrations.</p>
|
||
|
||
<div class="data-block">
|
||
<div class="data-row">
|
||
<span class="label">Baseline Temp</span>
|
||
<span class="value">28.4°C</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Peak Humidity</span>
|
||
<span class="value">97% RH</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Sensor Array</span>
|
||
<span class="value">Arduino Mega 2560 • Analog Pins 0–7</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Observed Drift</span>
|
||
<span class="value drift-value">±14.3 mV over 14 days</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span class="label">Calibration Point</span>
|
||
<span class="value">Walker Art Center • Sub-Basement Climate Control</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-header">
|
||
<span class="section-num">03</span>
|
||
<h2>Perfect Line vs. Lived Reality</h2>
|
||
</div>
|
||
|
||
<div class="visualization">
|
||
<div class="chart-line-perfect"></div>
|
||
<div class="chart-line-lived"></div>
|
||
<span class="axis-label y-axis">Voltage Drift (mV)</span>
|
||
<span class="axis-label x-axis">Time (Days 0–14)</span>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item">
|
||
<div class="dot" style="background: var(--signal);"></div>
|
||
<span>Theoretical Zero-Drift Model</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<div class="dot" style="background: var(--drift);"></div>
|
||
<span>Observed Sensor Output</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-panel">
|
||
<div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
|
||
<span>Temperature Differential (ΔT)</span>
|
||
<span id="delta-readout" class="drift-value">0 K</span>
|
||
</div>
|
||
<input type="range" id="temp-slider" min="0" max="200" value="0" step="1">
|
||
<div class="readout">
|
||
<span>Predicted Expansion:</span>
|
||
<span id="expansion-readout" class="drift-value">0 mm</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const slider = document.getElementById('temp-slider');
|
||
const deltaDisplay = document.getElementById('delta-readout');
|
||
const expansionDisplay = document.getElementById('expansion-readout');
|
||
|
||
slider.addEventListener('input', (e) => {
|
||
const deltaT = parseInt(e.target.value);
|
||
const expansion = (24e-6 * deltaT * 10000).toFixed(2); // 10m beam
|
||
|
||
deltaDisplay.textContent = deltaT + ' K';
|
||
expansionDisplay.textContent = expansion + ' mm';
|
||
|
||
// Update the lived reality line shape based on delta
|
||
const chartLine = document.querySelector('.chart-line-lived');
|
||
const amplitude = Math.min(deltaT / 10, 50);
|
||
const points = [];
|
||
|
||
for (let i = 0; i <= 100; i += 5) {
|
||
const noise = Math.sin(i * 0.5) * amplitude * (Math.random() > 0.5 ? 1 : -1);
|
||
points.push(`${i}% ${50 + noise}%`);
|
||
}
|
||
|
||
chartLine.style.clipPath = `polygon(${points.join(', ')})`;
|
||
});
|
||
</script>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Burnsville, MN • July 2026<br>
|
||
<a href="/">Return to the Grid</a></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|