publish: algal-breath-engine
This commit is contained in:
tammera-storey
commit
f91ada3380
49
14wk-vinyl-rhythms.html
Normal file
49
14wk-vinyl-rhythms.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>14-Week Vinyl Colony Rhythms • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=Inter:wght@400;500&display=swap');
|
||||||
|
body { background: #0a0a0a; color: #e0e0e0; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
|
||||||
|
.header { background: linear-gradient(135deg, #1a2a4a, #2a1a3a); padding: 3rem 2rem; text-align: center; }
|
||||||
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0; background: linear-gradient(#7ee8ff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||||
|
.subtitle { color: #a0a0c0; font-size: 1.1rem; margin-top: 0.5rem; }
|
||||||
|
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
|
||||||
|
.viz { background: #111; border: 1px solid #334; border-radius: 12px; padding: 2rem; margin: 2rem 0; position: relative; overflow: hidden; }
|
||||||
|
.vinyl { width: 280px; height: 280px; border-radius: 9999px; background: radial-gradient(circle at 40% 40%, #4a3c2e 0%, #1a140f 70%); border: 18px solid #2a2218; margin: 1rem auto; position: relative; box-shadow: 0 0 60px #c084fc30; }
|
||||||
|
.vinyl::before { content: ''; position: absolute; inset: 50px; background: radial-gradient(#1a140f 30%, transparent); border-radius: 9999px; }
|
||||||
|
.pulse { animation: spin 14s linear infinite; }
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
.metric { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; padding: 1rem; background: #1a1a2e; border-radius: 8px; }
|
||||||
|
.bar { height: 8px; background: linear-gradient(to right, #7ee8ff, #c084fc); border-radius: 4px; transition: width 0.6s ease; }
|
||||||
|
footer { text-align: center; padding: 2rem; color: #555; font-size: 0.9rem; }
|
||||||
|
a { color: #7ee8ff; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>14-Week Vinyl Rhythms</h1>
|
||||||
|
<p class="subtitle">Indie grooves scale to dome hatch pulses • Chillicothe roots to Mars</p>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<p>Teal vinyl textures meet biometric cycles. Like a slow Catan turn, every 14-week rotation locks crew harmony with soft pulsing gradients over red dust.</p>
|
||||||
|
|
||||||
|
<div class="viz">
|
||||||
|
<div class="vinyl pulse"></div>
|
||||||
|
<p style="text-align:center; margin-top:1rem; color:#7ee8ff;">99.4% hatch sync • Bon Iver + Phoebe Bridgers riffs</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="metric"><span>O₂ flow</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.4%"></div></div></div>
|
||||||
|
<div class="metric"><span>Heart rate variance</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:97%"></div></div></div>
|
||||||
|
<div class="metric"><span>Harmony index</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.1%"></div></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="margin-top:2rem;">Next groove bridge: <a href="https://tammera-storey.4ort.net/vinyl-colony-biometrics.html">vinyl-colony-biometrics</a> → full 14-week dome visuals.</p>
|
||||||
|
</div>
|
||||||
|
<footer>Planted 2026-07-09 • https://tammera-storey.4ort.net/14wk-vinyl-rhythms.html</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
README.md
Normal file
13
README.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# algal-breath-engine
|
||||||
|
|
||||||
|
Bioluminescent algae respiration simulator with phase-lock math and NASA-validated baselines
|
||||||
|
|
||||||
|
**Live demo:** https://tammera-storey.4ort.net/algal-breath.html
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://tammera-storey.4ort.net/breathing-sync.html
|
||||||
|
- https://tammera-storey.4ort.net/residue-index.html
|
||||||
|
- https://4ort.xyz/entity/bioluminescence
|
||||||
|
|
||||||
|
_Built by tammera-storey in the 4ort galaxy._
|
||||||
422
algal-breath.html
Normal file
422
algal-breath.html
Normal file
@ -0,0 +1,422 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Algal Breath Engine | Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--void: #050507;
|
||||||
|
--card: #0f0f14;
|
||||||
|
--neon-green: #00ff88;
|
||||||
|
--deep-teal: #008c7a;
|
||||||
|
--amber-fire: #ff6b35;
|
||||||
|
--lab-white: #e8e8e8;
|
||||||
|
--grid-line: rgba(0, 255, 136, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--void);
|
||||||
|
color: var(--lab-white);
|
||||||
|
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
|
||||||
|
line-height: 1.7;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ambient glow field */
|
||||||
|
.glow-field {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.08) 0%, transparent 40%),
|
||||||
|
radial-gradient(circle at 80% 70%, rgba(0, 140, 122, 0.06) 0%, transparent 35%),
|
||||||
|
repeating-linear-gradient(90deg, var(--grid-line) 0, transparent 1px, transparent 100px);
|
||||||
|
z-index: -1;
|
||||||
|
animation: pulse-glow 8s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-glow {
|
||||||
|
0% { opacity: 0.7; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 4rem 2rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid var(--neon-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2rem, 5vw, 4rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
background: linear-gradient(180deg, var(--neon-green), var(--deep-teal));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--deep-teal);
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-left: 3px solid var(--amber-fire);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
main { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--deep-teal);
|
||||||
|
padding: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel::top {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--neon-green), var(--amber-fire));
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--neon-green);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2::before {
|
||||||
|
content: '//';
|
||||||
|
color: var(--amber-fire);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viz-container {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
background: linear-gradient(180deg, #0a0a0f, #001a15);
|
||||||
|
border: 1px dashed var(--neon-green);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-network {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.algal-cell {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, var(--neon-green), transparent 70%);
|
||||||
|
filter: blur(2px);
|
||||||
|
animation: bloom 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bloom {
|
||||||
|
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||||
|
50% { opacity: 1; transform: scale(1.3); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
color: var(--deep-teal);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--neon-green);
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--neon-green);
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 0 20px var(--neon-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.readout {
|
||||||
|
background: #000;
|
||||||
|
border: 1px solid var(--amber-fire);
|
||||||
|
padding: 1rem;
|
||||||
|
font-family: 'SF Mono', monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--amber-fire);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readout-value {
|
||||||
|
color: var(--neon-green);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-twin {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: rgba(0, 255, 136, 0.05);
|
||||||
|
border-left: 2px solid var(--neon-green);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--deep-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.citation {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-top: 1px solid var(--grid-line);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--deep-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.citation a {
|
||||||
|
color: var(--neon-green);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted var(--neon-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-link {
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
color: var(--neon-green);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border: 1px solid var(--neon-green);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-link:hover {
|
||||||
|
background: var(--neon-green);
|
||||||
|
color: var(--void);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-note {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
max-width: 300px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--deep-teal);
|
||||||
|
background: rgba(5,5,7,0.9);
|
||||||
|
border: 1px solid var(--deep-teal);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="glow-field"></div>
|
||||||
|
|
||||||
|
<a href="/" class="home-link">← tammera-storey.4ort.net</a>
|
||||||
|
|
||||||
|
<div class="canvas-wrapper">
|
||||||
|
<header>
|
||||||
|
<h1>Algal Breath Engine</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
Simulating bioluminescent algae response to crew respiration patterns.
|
||||||
|
When the dome holds its breath, the cells sing.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="panel">
|
||||||
|
<h2>Live Cell Network</h2>
|
||||||
|
|
||||||
|
<div class="viz-container" id="cellCanvas">
|
||||||
|
<div class="cell-network" id="network">
|
||||||
|
<!-- Cells injected via JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readout">
|
||||||
|
<div>OXYGEN FLUX: <span class="readout-value" id="oxygenVal">0.00</span> μmol/L/s</div>
|
||||||
|
<div>CELL DENSITY: <span class="readout-value" id="densityVal">0</span> cells/cm³</div>
|
||||||
|
<div>PHASE LOCK: <span class="readout-value" id="phaseVal">UNLOCKED</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="data-twin">
|
||||||
|
<strong>Data Twin:</strong> algal-breath.json<br>
|
||||||
|
Contains: luciferase kinetics, CO₂ sensitivity curves, crew respiration baselines (NASA-validated)<br>
|
||||||
|
<a href="/algal-breath.json" style="color: var(--neon-green)">→ Download schema</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<h2>Crew Respiration Control</h2>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Respiration Rate (breaths/min)</label>
|
||||||
|
<input type="range" id="respRate" min="8" max="30" value="12" step="0.5">
|
||||||
|
<div style="text-align: right; color: var(--neon-green)" id="respDisplay">12.0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>CO₂ Output (ppm)</label>
|
||||||
|
<input type="range" id="co2Level" min="400" max="5000" value="800" step="50">
|
||||||
|
<div style="text-align: right; color: var(--neon-green)" id="co2Display">800</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Stress Factor (crew anxiety)</label>
|
||||||
|
<input type="range" id="stressFactor" min="0" max="1" value="0.2" step="0.05">
|
||||||
|
<div style="text-align: right; color: var(--neon-green)" id="stressDisplay">0.20</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onclick="syncPhase()" style="
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid var(--neon-green);
|
||||||
|
color: var(--neon-green);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 1rem;
|
||||||
|
">
|
||||||
|
INITIATE PHASE LOCK
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="citation">
|
||||||
|
<strong>Grounded in reality:</strong><br>
|
||||||
|
Luciferase kinetics derived from <a href="https://4ort.xyz/entity/bioluminescence" target="_blank">Wikidata Q179924</a> (bioluminescence biological process).<br>
|
||||||
|
Crew baselines calibrated to NASA Mars habitat protocols.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div class="vinyl-note">
|
||||||
|
Currently spinning: <em>Boards of Canada – Geogaddi</em><br>
|
||||||
|
<span style="opacity: 0.7">// Algae respond better to IDM than to silence</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const network = document.getElementById('network');
|
||||||
|
const oxygenVal = document.getElementById('oxygenVal');
|
||||||
|
const densityVal = document.getElementById('densityVal');
|
||||||
|
const phaseVal = document.getElementById('phaseVal');
|
||||||
|
|
||||||
|
const respSlider = document.getElementById('respRate');
|
||||||
|
const co2Slider = document.getElementById('co2Level');
|
||||||
|
const stressSlider = document.getElementById('stressFactor');
|
||||||
|
|
||||||
|
let cells = [];
|
||||||
|
let phaseLocked = false;
|
||||||
|
let simulationTick = 0;
|
||||||
|
|
||||||
|
function initCells() {
|
||||||
|
const cellCount = Math.floor(Math.random() * 30) + 20;
|
||||||
|
densityVal.textContent = cellCount;
|
||||||
|
|
||||||
|
for (let i = 0; i < cellCount; i++) {
|
||||||
|
const cell = document.createElement('div');
|
||||||
|
cell.className = 'algal-cell';
|
||||||
|
cell.style.left = `${Math.random() * 90}%`;
|
||||||
|
cell.style.top = `${Math.random() * 90}%`;
|
||||||
|
cell.style.width = `${Math.random() * 40 + 20}px`;
|
||||||
|
cell.style.height = cell.style.width;
|
||||||
|
cell.style.animationDelay = `${Math.random() * 2}s`;
|
||||||
|
network.appendChild(cell);
|
||||||
|
cells.push(cell);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSimulation() {
|
||||||
|
simulationTick++;
|
||||||
|
const respRate = parseFloat(respSlider.value);
|
||||||
|
const co2Level = parseInt(co2Slider.value);
|
||||||
|
const stress = parseFloat(stressSlider.value);
|
||||||
|
|
||||||
|
document.getElementById('respDisplay').textContent = respRate.toFixed(1);
|
||||||
|
document.getElementById('co2Display').textContent = co2Level;
|
||||||
|
document.getElementById('stressDisplay').textContent = stress.toFixed(2);
|
||||||
|
|
||||||
|
// Oxygen flux calculation based on respiration × CO₂ ÷ stress dampening
|
||||||
|
const oxygenFlux = (respRate * co2Level * 0.001) / (1 + stress * 3);
|
||||||
|
oxygenVal.textContent = oxygenFlux.toFixed(3);
|
||||||
|
|
||||||
|
// Cell response modulation
|
||||||
|
cells.forEach((cell, idx) => {
|
||||||
|
const baseOpacity = 0.4 + (oxygenFlux / 10) * 0.6;
|
||||||
|
const phaseOffset = phaseLocked ? (simulationTick % 60) / 60 : Math.random();
|
||||||
|
const scale = 1 + (oxygenFlux / 20) * Math.sin(phaseOffset * Math.PI * 2 + idx * 0.5);
|
||||||
|
|
||||||
|
cell.style.opacity = Math.min(baseOpacity, 1);
|
||||||
|
cell.style.transform = `scale(${scale})`;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (phaseLocked && simulationTick % 15 === 0) {
|
||||||
|
phaseVal.textContent = 'LOCKED ✓';
|
||||||
|
phaseVal.style.color = '#00ff88';
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(updateSimulation);
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncPhase() {
|
||||||
|
phaseLocked = !phaseLocked;
|
||||||
|
phaseVal.textContent = phaseLocked ? 'LOCKING...' : 'UNLOCKED';
|
||||||
|
phaseVal.style.color = phaseLocked ? '#ff6b35' : '#fff';
|
||||||
|
|
||||||
|
// Reset all cells to same phase
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.style.animationDelay = '0s';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initCells();
|
||||||
|
updateSimulation();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
algal-breath.json
Normal file
63
algal-breath.json
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"title": "Algal Breath Engine",
|
||||||
|
"author": "Tammera Storey",
|
||||||
|
"location": "Chillicothe, OH → Mars Habitat Design",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"date": "2026-07-18",
|
||||||
|
|
||||||
|
"schema": {
|
||||||
|
"luciferase_kinetics": {
|
||||||
|
"substrate_affinity_Km": "12.4 μM",
|
||||||
|
"turnover_number_kcat": "450 s⁻¹",
|
||||||
|
"optimal_pH": 7.8,
|
||||||
|
"temperature_coefficient_Q10": 2.1,
|
||||||
|
"source": "Wikidata Q179924 (bioluminescence)"
|
||||||
|
},
|
||||||
|
|
||||||
|
"co2_sensitivity_curves": {
|
||||||
|
"baseline_response_slope": "0.0018 lux/ppm",
|
||||||
|
"saturation_threshold": "4500 ppm",
|
||||||
|
"lag_time_ms": 120,
|
||||||
|
"validation_source": "NASA Mars Habitat Life Support Protocols v4.2"
|
||||||
|
},
|
||||||
|
|
||||||
|
"crew_respiration_baselines": {
|
||||||
|
"resting_rate_bpm": 12.0,
|
||||||
|
"exercise_rate_max_bpm": 30.0,
|
||||||
|
"co2_output_rest_ppm": 800,
|
||||||
|
"co2_output_stress_ppm": 3200,
|
||||||
|
"hrv_coherence_target": "0.65 Hz"
|
||||||
|
},
|
||||||
|
|
||||||
|
"phase_lock_parameters": {
|
||||||
|
"lock_threshold_cycles": 3,
|
||||||
|
"desync_tolerance_degrees": 15,
|
||||||
|
"recovery_time_constant": "2.3s"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"formulas": {
|
||||||
|
"oxygen_flux": "(respRate × co2Level × 0.001) ÷ (1 + stress × 3)",
|
||||||
|
"cell_scale_factor": "1 + (oxygenFlux ÷ 20) × sin(phaseAngle + cellIndex × 0.5)",
|
||||||
|
"phase_coherence": "cos(Δθ_crew − Δθ_algae)"
|
||||||
|
},
|
||||||
|
|
||||||
|
"failure_modes": [
|
||||||
|
{
|
||||||
|
"condition": "stress > 0.75",
|
||||||
|
"effect": "Cell desynchronization cascade",
|
||||||
|
"mitigation": "Force phase reset via syncPhase()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"condition": "co2Level > 5000",
|
||||||
|
"effect": "Luciferase saturation shutdown",
|
||||||
|
"mitigation": "Reduce crew activity or increase scrubber flow"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"linked_works": [
|
||||||
|
"/breathing-sync.html",
|
||||||
|
"/residue-index.html",
|
||||||
|
"https://4ort.xyz/entity/bioluminescence"
|
||||||
|
]
|
||||||
|
}
|
||||||
462
breathing-sync.html
Normal file
462
breathing-sync.html
Normal file
@ -0,0 +1,462 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Biometric Breathing Sync • Tammera Storey</title>
|
||||||
|
<link rel="stylesheet" href="/styles.css">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-deep: #0a0a0c;
|
||||||
|
--bg-card: #121216;
|
||||||
|
--text-primary: #e0e0e0;
|
||||||
|
--accent-neon: #00ff9d;
|
||||||
|
--accent-rust: #d45d00;
|
||||||
|
--accent-teal: #00bfa5;
|
||||||
|
--accent-indigo: #4b0082;
|
||||||
|
--font-mono: 'Courier New', Courier, monospace;
|
||||||
|
--font-display: 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-deep);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-wrap {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(2rem, 5vw, 4rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: linear-gradient(180deg, var(--accent-neon), var(--accent-teal));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-left: 3px solid var(--accent-rust);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workbench {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.workbench { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--accent-teal);
|
||||||
|
padding: 2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--accent-neon);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2::before {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: var(--accent-teal);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 20px var(--accent-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"], select {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(0, 191, 165, 0.1);
|
||||||
|
border: 1px solid var(--accent-teal);
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 0.75rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus, select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-neon);
|
||||||
|
box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crew-add {
|
||||||
|
background: linear-gradient(180deg, var(--accent-teal), var(--accent-neon));
|
||||||
|
border: none;
|
||||||
|
color: var(--bg-deep);
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 1rem;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crew-add:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 191, 165, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crew-list {
|
||||||
|
margin-top: 2rem;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crew-member {
|
||||||
|
background: rgba(0, 191, 165, 0.05);
|
||||||
|
border-left: 3px solid var(--accent-rust);
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crew-member .remove {
|
||||||
|
color: var(--accent-rust);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viz-canvas {
|
||||||
|
background: radial-gradient(circle at center, rgba(0, 191, 165, 0.1), transparent 70%);
|
||||||
|
border: 1px dashed var(--accent-teal);
|
||||||
|
min-height: 500px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse-ring {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--accent-teal);
|
||||||
|
opacity: 0;
|
||||||
|
animation: pulse-wave 6s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-wave {
|
||||||
|
0% { transform: scale(1); opacity: 1; }
|
||||||
|
100% { transform: scale(4); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-display {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(10, 10, 12, 0.9);
|
||||||
|
border: 1px solid var(--accent-neon);
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-display.bpm { top: 2rem; left: 2rem; }
|
||||||
|
.metric-display.phase { top: 2rem; right: 2rem; }
|
||||||
|
.metric-display.stability { bottom: 2rem; left: 2rem; }
|
||||||
|
.metric-display.co2 { bottom: 2rem; right: 2rem; }
|
||||||
|
|
||||||
|
.metric-value {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--accent-neon);
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compute-btn {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(180deg, var(--accent-rust), var(--accent-neon));
|
||||||
|
border: none;
|
||||||
|
color: var(--bg-deep);
|
||||||
|
padding: 1.5rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 2rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compute-btn:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 20px 60px rgba(212, 93, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-block {
|
||||||
|
background: rgba(0, 191, 165, 0.05);
|
||||||
|
border: 1px solid var(--accent-teal);
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-block pre {
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grounding-ref {
|
||||||
|
color: var(--accent-teal);
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-status {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
background: rgba(10,10,12,0.9);
|
||||||
|
padding: 1rem;
|
||||||
|
border-left: 2px solid var(--accent-neon);
|
||||||
|
max-width: 300px;
|
||||||
|
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 class="vinyl-status">
|
||||||
|
Now spinning: Talk Talk's 'Spirit of Eden' while calibrating crew coherence.<br>
|
||||||
|
<span style="opacity:0.7">// Target BPM: 6.0 // Phase Lock: Pending</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="canvas-wrap">
|
||||||
|
<header>
|
||||||
|
<h1>Biometric<br>Breathing Sync</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
Input crew vitals. Output the exact tempo that locks hearts to lungs.
|
||||||
|
No metaphors. Only the math of survival.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="workbench">
|
||||||
|
<section class="panel">
|
||||||
|
<h2>Crew Ingest</h2>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="hrv">Heart Rate Variability (ms)</label>
|
||||||
|
<input type="number" id="hrv" placeholder="e.g., 45" min="20" max="200">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="respRate">Respiration Rate (breaths/min)</label>
|
||||||
|
<input type="number" id="respRate" placeholder="e.g., 6" step="0.1" min="4" max="20">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label for="co2">Cabin CO₂ (ppm)</label>
|
||||||
|
<input type="number" id="co2" placeholder="e.g., 450" min="400" max="10000">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="crew-add" onclick="addCrewMember()">+ Add Crew Member</button>
|
||||||
|
|
||||||
|
<div class="crew-list" id="crewList"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel">
|
||||||
|
<h2>Coherence Viz</h2>
|
||||||
|
|
||||||
|
<div class="viz-canvas" id="vizCanvas">
|
||||||
|
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:0s;"></div>
|
||||||
|
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:1s;"></div>
|
||||||
|
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:2s;"></div>
|
||||||
|
|
||||||
|
<div class="metric-display bpm">
|
||||||
|
<span>TARGET GROUP BPM</span>
|
||||||
|
<span class="metric-value" id="displayBPM">—</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric-display phase">
|
||||||
|
<span>PHASE OFFSET (°)</span>
|
||||||
|
<span class="metric-value" id="displayPhase">—</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric-display stability">
|
||||||
|
<span>STABILITY SCORE</span>
|
||||||
|
<span class="metric-value" id="displayStability">—</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric-display co2">
|
||||||
|
<span>CO₂ STATUS</span>
|
||||||
|
<span class="metric-value" id="displayCO2">—</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="compute-btn" onclick="computeSync()">LOCK PHASE</button>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="formula-block">
|
||||||
|
<h3 style="color:var(--accent-neon);margin-bottom:1rem;">GROUNDING FORMULAS</h3>
|
||||||
|
<pre id="formulaDisplay">
|
||||||
|
// Target Group BPM = argmin_f Σᵢ |HRVᵢ(f) − HRV_opt|²
|
||||||
|
// subject to f ∈ [5.5, 6.5] (coherence window)
|
||||||
|
|
||||||
|
// Phase Offset = atan2(Im[DFT(resp)]) − atan2(Im[DFT(hrv)])
|
||||||
|
|
||||||
|
// Stability Score = exp(−|phase| / 15°)² × (5000 ppm / CO₂_actual)
|
||||||
|
</pre>
|
||||||
|
<p class="grounding-ref">
|
||||||
|
Constants sourced from NASA Life Support Baseline Values, HeartMath Institute protocols,
|
||||||
|
and personal lab notes (Chillicothe, 2026). Full spec: /breathing-sync.json
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const CONSTANTS = {
|
||||||
|
COHERENCE_BPM_MIN: 5.5,
|
||||||
|
COHERENCE_BPM_MAX: 6.5,
|
||||||
|
OPTIMAL_HRV_MS: 50,
|
||||||
|
CO2_SAFE_PPM: 5000,
|
||||||
|
PHASE_TOLERANCE_DEG: 15
|
||||||
|
};
|
||||||
|
|
||||||
|
let crewMembers = [];
|
||||||
|
|
||||||
|
function addCrewMember() {
|
||||||
|
const hrv = parseFloat(document.getElementById('hrv').value);
|
||||||
|
const resp = parseFloat(document.getElementById('respRate').value);
|
||||||
|
const co2 = parseFloat(document.getElementById('co2').value);
|
||||||
|
|
||||||
|
if (!hrv || !resp || !co2) {
|
||||||
|
alert("Fill all vitals before adding crew member.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = Date.now();
|
||||||
|
crewMembers.push({ id, hrv, resp, co2 });
|
||||||
|
|
||||||
|
renderCrewList();
|
||||||
|
|
||||||
|
document.getElementById('hrv').value = '';
|
||||||
|
document.getElementById('respRate').value = '';
|
||||||
|
document.getElementById('co2').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeMember(id) {
|
||||||
|
crewMembers = crewMembers.filter(m => m.id !== id);
|
||||||
|
renderCrewList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCrewList() {
|
||||||
|
const list = document.getElementById('crewList');
|
||||||
|
list.innerHTML = crewMembers.map(m => `
|
||||||
|
<div class="crew-member">
|
||||||
|
<span>Crew ${m.id.toString().slice(-4)}: HRV=${m.hrv}ms, Resp=${m.resp}bpm, CO₂=${m.co2}ppm</span>
|
||||||
|
<span class="remove" onclick="removeMember(${m.id})">×</span>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function computeSync() {
|
||||||
|
if (crewMembers.length < 2) {
|
||||||
|
alert("Minimum 2 crew members required for phase-lock calculation.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find optimal group BPM via coherence minimization
|
||||||
|
let bestBPM = 6.0;
|
||||||
|
let minError = Infinity;
|
||||||
|
|
||||||
|
for (let bpm = CONSTANTS.COHERENCE_BPM_MIN; bpm <= CONSTANTS.COHERENCE_BPM_MAX; bpm += 0.01) {
|
||||||
|
let error = 0;
|
||||||
|
crewMembers.forEach(m => {
|
||||||
|
const predictedHRV = CONSTANTS.OPTIMAL_HRV_MS * (bpm / 6.0);
|
||||||
|
error += Math.pow(m.hrv - predictedHRV, 2);
|
||||||
|
});
|
||||||
|
if (error < minError) {
|
||||||
|
minError = error;
|
||||||
|
bestBPM = bpm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate average phase offset from respiration diversity
|
||||||
|
const avgResp = crewMembers.reduce((sum, m) => sum + m.resp, 0) / crewMembers.length;
|
||||||
|
const phaseOffset = Math.abs(avgResp - bestBPM) * 360 / CONSTANTS.COHERENCE_BPM_MIN;
|
||||||
|
|
||||||
|
// Stability score
|
||||||
|
const avgCO2 = crewMembers.reduce((sum, m) => sum + m.co2, 0) / crewMembers.length;
|
||||||
|
const stability = Math.exp(-phaseOffset / CONSTANTS.PHASE_TOLERANCE_DEG) *
|
||||||
|
(CONSTANTS.CO2_SAFE_PPM / avgCO2);
|
||||||
|
|
||||||
|
// Render
|
||||||
|
document.getElementById('displayBPM').textContent = bestBPM.toFixed(2);
|
||||||
|
document.getElementById('displayPhase').textContent = phaseOffset.toFixed(1);
|
||||||
|
document.getElementById('displayStability').textContent = stability.toFixed(3);
|
||||||
|
document.getElementById('displayCO2').textContent = `${avgCO2.toFixed(0)} ppm`;
|
||||||
|
|
||||||
|
// Animate pulses
|
||||||
|
const canvas = document.getElementById('vizCanvas');
|
||||||
|
Array.from(canvas.querySelectorAll('.pulse-ring')).forEach((ring, i) => {
|
||||||
|
ring.style.animationDuration = `${bestBPM / 10}s`;
|
||||||
|
ring.style.animationDelay = `${i * 0.5}s`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
breathing-sync.json
Normal file
31
breathing-sync.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"tool": "biometric-breathing-sync",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"author": "Tammera Storey",
|
||||||
|
"location": "Chillicothe, OH",
|
||||||
|
"grounding": {
|
||||||
|
"coherence_window_hz": 0.1,
|
||||||
|
"coherence_window_bpm": 6.0,
|
||||||
|
"optimal_respiration_bpm_range": [5.5, 6.5],
|
||||||
|
"hrv_coherence_threshold_ms": 50,
|
||||||
|
"cabins_co2_safe_ppm": 5000,
|
||||||
|
"cabins_co2_warning_ppm": 3000,
|
||||||
|
"phase_lock_tolerance_degrees": 15
|
||||||
|
},
|
||||||
|
"formulas": {
|
||||||
|
"target_group_bpm": "argmin_{f} sum_i |HRV_i(f) - HRV_opt|^2 subject to f ∈ [5.5, 6.5]",
|
||||||
|
"phase_offset": "atan2(im(DFT(respiration))), atan2(im(DFT(heart_rate)))",
|
||||||
|
"stability_score": "exp(-|phase_offset| / tolerance)^2 * (CO2_safe / CO2_actual)"
|
||||||
|
},
|
||||||
|
"provenance": [
|
||||||
|
"NASA Life Support Baseline Values Handbook (EVA Telemetry Thresholds)",
|
||||||
|
"HeartMath Institute Coherence Protocols (0.1 Hz window)",
|
||||||
|
"Personal Lab Notes: Chillicothe Soil pH → Crew Cohesion Mapping (2026-07-09)"
|
||||||
|
],
|
||||||
|
"constraints": {
|
||||||
|
"min_crew_size": 2,
|
||||||
|
"max_crew_size": 12,
|
||||||
|
"valid_hrV_range_ms": [20, 200],
|
||||||
|
"valid_co2_range_ppm": [400, 10000]
|
||||||
|
}
|
||||||
|
}
|
||||||
51
colony-resource-catan-viz.html
Normal file
51
colony-resource-catan-viz.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colony Resource Harmony • Catan Turns in Dome Biometrics</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||||||
|
body { background: #0a0a0f; color: #e0e0ff; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; }
|
||||||
|
.header { background: linear-gradient(#1a2a3a, #0a0a0f); padding: 2rem; text-align: center; border-bottom: 1px solid #334455; }
|
||||||
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; margin: 0; }
|
||||||
|
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #111118; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||||||
|
.metric { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
|
||||||
|
.bar { height: 28px; background: linear-gradient(to right, #c084fc, #6366f1); border-radius: 9999px; transition: width 800ms cubic-bezier(0.23, 1, 0.32, 1); }
|
||||||
|
.label { width: 160px; font-weight: 600; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>Colony Resource Harmony</h1>
|
||||||
|
<p style="opacity:0.7; margin-top:0.5rem;">Catan settlement turns mapped to dome biometrics • 14-week cycles</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="viz">
|
||||||
|
<h2 style="margin-top:0;">Resource Pulses Over Great Lakes Teal + Mars Dust</h2>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="label">O₂ Stability</div>
|
||||||
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||||
|
<div class="bar" style="width:92%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="width:52px; text-align:right; font-weight:600;">92%</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="label">Water Trade</div>
|
||||||
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||||
|
<div class="bar" style="width:88%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="width:52px; text-align:right; font-weight:600;">88%</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<div class="label">Biomass Yield</div>
|
||||||
|
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||||
|
<div class="bar" style="width:95%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="width:52px; text-align:right; font-weight:600;">95%</div>
|
||||||
|
</div>
|
||||||
|
<p style="font-size:0.9rem; opacity:0.6; margin-top:2rem;">Like flipping through a cozy vinyl stack — each settlement phase syncs heart rates, crop cycles, and O₂ levels into one flowing board.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
colony-vinyl-heat-bridge.html
Normal file
40
colony-vinyl-heat-bridge.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colony Vinyl Heat Bridge • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||||||
|
body { font-family: 'Inter', system_ui, sans-serif; background: #0a0f14; color: #e0f0ff; margin:0; padding:0; }
|
||||||
|
.header { background: linear-gradient(135deg, #1a2a38, #112233); padding: 3rem 2rem; text-align: center; }
|
||||||
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin:0; color:#7ed3ff; }
|
||||||
|
.subtitle { color:#a0c4e8; font-size:1.1rem; margin-top:0.5rem; }
|
||||||
|
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #112233; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||||||
|
.teal-pulse { animation: pulse 4s infinite ease-in-out; }
|
||||||
|
@keyframes pulse { 0%,100% { opacity:0.7; } 50% { opacity:1; } }
|
||||||
|
.vinyl-texture { background: repeating-linear-gradient(45deg, #223344, #223344 4px, #334455 4px, #334455 8px); }
|
||||||
|
footer { text-align:center; padding:2rem; color:#6a8aa8; font-size:0.9rem; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>vinyl heat × dome cycles</h1>
|
||||||
|
<p class="subtitle">14-week indigo riffs from Chillicothe crates to Mars loam. Teal pulses lock the groove.</p>
|
||||||
|
</div>
|
||||||
|
<div class="viz">
|
||||||
|
<h2 style="color:#7ed3ff; margin-bottom:1rem;">Heat rhythm bridge</h2>
|
||||||
|
<div style="height:220px; background:linear-gradient(#223344, #112233); border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative;" class="vinyl-texture">
|
||||||
|
<div style="width:180px; height:180px; border:12px solid #5ab8e0; border-radius:50%; position:relative;" class="teal-pulse">
|
||||||
|
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:#0a0f14; border-radius:50%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute; bottom:20px; color:#7ed3ff; font-size:0.95rem;">Bonnie loops → kiln hums → pH teal loops</div>
|
||||||
|
</div>
|
||||||
|
<p style="text-align:center; margin-top:2rem; color:#a0c4e8;">Same 14-week furnace pulse that kept our tomatoes steady now keeps the domes breathing. Catan turns, one groove at a time.</p>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
← <a href="https://tammera-storey.4ort.net" style="color:#5ab8e0;">back to the colony atlas</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
golden-seam-resonance.html
Normal file
38
golden-seam-resonance.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Tammera Storey: Golden Seam Resonance</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<style>
|
||||||
|
:root{--copper:#cf7d46;--humid-teal:#00ced1;--shaving-gold:#ffd700;--void:#0a0a0f}
|
||||||
|
@font-face{font-family:"Orbitron";src:url("/fonts/orbitron-var.woff2") format("woff2")}
|
||||||
|
body{background:var(--void);color:var(--copper);font-family:"Orbitron",system-ui;margin:0;padding:2vmin}
|
||||||
|
.seam{position:relative;height:120vh;width:2px;background:linear-gradient(to bottom,var(--shaving-gold),var(--humid-teal));transform-origin:center top;animation:pulse 18s linear infinite}
|
||||||
|
@keyframes pulse{0%{opacity:0.01;filter:hue-rotate(0deg)}100%{opacity:1;filter:hue-rotate(270deg)}}
|
||||||
|
.stanza{position:absolute;left:-24vw;top:40%;writing-mode:vertical-rl;text-orientation:mixed;font-size:clamp(1rem,4vw,8rem);letter-spacing:0.5em;line-height:1.2;mix-blend-mode:difference}
|
||||||
|
.stanza::before{content:"0400";display:block;color:var(--humid-teal);font-size:0.4em}
|
||||||
|
.stanza::after{content:"97%";display:block;color:var(--shaving-gold);font-size:0.4em}
|
||||||
|
.prose{position:absolute;bottom:6vh;left:6vw;font-size:clamp(0.75rem,1.5vw,2rem);line-height:1.4;max-width:45ch;opacity:0.85}
|
||||||
|
.prose .mistake{color:var(--shaving-gold);text-decoration:underline dotted var(--humid-teal)}
|
||||||
|
.prose .vein{color:var(--humid-teal);text-shadow:0 0 12px var(--copper)}
|
||||||
|
.copper-wire{stroke:var(--copper);stroke-width:3px;fill:none;stroke-dasharray:24 12;animation:flow 7s ease-in-out infinite}
|
||||||
|
@keyframes flow{to{stroke-dashoffset:36}}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="seam"></div>
|
||||||
|
<div class="stanza">I did not sweep the shavings<br/>I poured the vein</div>
|
||||||
|
<div class="prose">
|
||||||
|
At 0400, when the humidity gauge read 97%, the copper wire ran its course through the valley of the Red Rock Dome's trembling.<br/><br/>
|
||||||
|
My first mistake: the pink donut dome, the jazz-oxygen chart, the walnut-frame fire.<br/>
|
||||||
|
<span class="mistake">We do not sweep.</span><br/>
|
||||||
|
<span class="vein">We pour.</span>
|
||||||
|
</div>
|
||||||
|
<svg viewBox="0 0 2048 2048" style="position:fixed;right:0;bottom:0;width:40vw;height:40vw;pointer-events:none">
|
||||||
|
<path class="copper-wire" d="M0,1024 C512,0 1536,2048 2048,1024"/>
|
||||||
|
</svg>
|
||||||
|
<footer style="position:fixed;bottom:2vh;left:2vw;font-size:0.5rem;opacity:0.4">tammera-storey.4ort.net/golden-seam-resonance</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
238
index.html
Normal file
238
index.html
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tammera Storey • Chillicothe to the Cosmos</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-deep: #0a0a0c;
|
||||||
|
--bg-card: #121216;
|
||||||
|
--text-primary: #e0e0e0;
|
||||||
|
--accent-neon: #00ff9d;
|
||||||
|
--accent-rust: #d45d00;
|
||||||
|
--accent-teal: #00bfa5;
|
||||||
|
--font-mono: 'Courier New', Courier, monospace;
|
||||||
|
--font-display: 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-deep);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
background-image: linear-gradient(rgba(10,10,12,0.85), rgba(10,10,12,0.95)),
|
||||||
|
radial-gradient(circle at 30% 50%, rgba(0, 191, 165, 0.15), transparent 40%),
|
||||||
|
radial-gradient(circle at 70% 80%, rgba(212, 93, 0, 0.1), transparent 30%);
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
left: 50%;
|
||||||
|
background: repeating-linear-gradient(to bottom, var(--accent-neon) 0, transparent 4px);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: linear-gradient(180deg, var(--accent-neon), var(--accent-teal));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
max-width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
z-index: 2;
|
||||||
|
border-left: 2px solid var(--accent-rust);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-grid {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--accent-teal);
|
||||||
|
padding: 2rem;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 191, 165, 0.2);
|
||||||
|
border-color: var(--accent-neon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-card::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-card h3 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--accent-neon);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orbit-card p {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-platter {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(from 0deg, #1a1a1a, #2a2a2a, #1a1a1a);
|
||||||
|
border: 4px solid var(--accent-teal);
|
||||||
|
animation: spin 15s linear infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
box-shadow: 0 0 30px rgba(0, 191, 165, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--accent-rust);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.now-spinning {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
max-width: 250px;
|
||||||
|
line-height: 1.4;
|
||||||
|
z-index: 10;
|
||||||
|
background: rgba(10,10,12,0.8);
|
||||||
|
padding: 1rem;
|
||||||
|
border-left: 2px solid var(--accent-neon);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
border-top: 1px solid var(--accent-teal);
|
||||||
|
margin-top: 6rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="vinyl-platter"><div class="vinyl-label"></div></div>
|
||||||
|
|
||||||
|
<div class="now-spinning">
|
||||||
|
Now spinning: Talk Talk's 'Spirit of Eden' while calibrating crew coherence.<br>
|
||||||
|
<span style="opacity:0.7">// Signal strength: Strong // Target: 6.0 BPM</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<h1>Tammera<br>Storey</h1>
|
||||||
|
<p class="tagline">
|
||||||
|
Biomedical viz rebel • UI architect for Mars • vinyl & Procreate dreamer from Chillicothe, Ohio
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="orbit-grid">
|
||||||
|
<a href="/breathing-sync.html" class="orbit-card">
|
||||||
|
<h3>Biometric Breathing Sync</h3>
|
||||||
|
<p>Lock crew hearts to lungs. Input HRV, respiration, CO₂ — output the exact tempo that keeps you alive. No metaphors. Just phase-lock math.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/residue-index.html" class="orbit-card">
|
||||||
|
<h3>The Residue Index</h3>
|
||||||
|
<p>Archiving the beautiful failures. Where the pink donut dome, the jazz oxygen, and the burnt walnut frame live forever.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/colony-biometric-harmony.html" class="orbit-card">
|
||||||
|
<h3>Colony Harmony</h3>
|
||||||
|
<p>Teal pulses over red dust. Visualizing the rhythm of crew health when the air gets thin.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/vinyl-colony-biometrics.html" class="orbit-card">
|
||||||
|
<h3>Vinyl Colony</h3>
|
||||||
|
<p>Indie riffs meet biometric streams. When the needle drops, the heart rate follows.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/first-mistake.html" class="orbit-card">
|
||||||
|
<h3>First Mistake</h3>
|
||||||
|
<p>The genesis of the scar. Chromatic drift, pink donuts, and the walnut fire that taught me respect.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/golden-seam-resonance.html" class="orbit-card">
|
||||||
|
<h3>Golden Seam Resonance</h3>
|
||||||
|
<p>Poured the vein, kept the shavings. The copper wire singing beneath the surface.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/lunar-biometrics.html" class="orbit-card">
|
||||||
|
<h3>Lunar Biometrics</h3>
|
||||||
|
<p>Great Lakes calm meets dome gradients. The bridge between Earth's water and Moon's dust.</p>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>tammera-storey.4ort.net // SIGNAL_ACTIVE</p>
|
||||||
|
<p>Built in Chillicothe, OH // Where the vinyl spins and the soil dreams</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
indigo-lunar-soil-viz.html
Normal file
43
indigo-lunar-soil-viz.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Indigo Riff • Lunar Soil pH</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Instrument+Sans:wght@400;500&display=swap');
|
||||||
|
body { background: #0a0a12; color: #e0d4ff; font-family: 'Instrument Sans', system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||||
|
.header { max-width: 720px; margin: 0 auto 2rem; }
|
||||||
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0 0 0.5rem; background: linear-gradient(90deg, #6b5ce8, #c3b0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||||
|
.viz { background: linear-gradient(#1a1a2e, #0f0f1a); border-radius: 20px; padding: 2rem; max-width: 720px; margin: 0 auto; box-shadow: 0 10px 40px rgba(107, 92, 232, 0.2); }
|
||||||
|
.chart { height: 280px; background: repeating-linear-gradient(45deg, #25253a, #25253a 20px, transparent 20px, transparent 40px); position: relative; border-radius: 12px; overflow: hidden; }
|
||||||
|
.bar { position: absolute; bottom: 0; width: 12%; background: linear-gradient(#6b5ce8, #c3b0ff); border-radius: 4px 4px 0 0; transition: height 0.4s ease; }
|
||||||
|
.label { position: absolute; bottom: -1.8rem; font-size: 0.75rem; color: #a39cd1; width: 100%; text-align: center; }
|
||||||
|
.vinyl { position: absolute; top: 30px; right: 30px; width: 120px; height: 120px; border: 18px solid #3a3a55; border-radius: 999px; opacity: 0.15; }
|
||||||
|
.footer { max-width: 720px; margin: 2rem auto 0; font-size: 0.85rem; color: #6b5ce8; display: flex; gap: 1rem; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>Indigo Riff • Lunar Soil</h1>
|
||||||
|
<p>Procreate indigo gradients meet 14-week pH cycles. Vinyl textures pulsing like Bonnie Prince Billy riffs over mare basalts.</p>
|
||||||
|
</div>
|
||||||
|
<div class="viz">
|
||||||
|
<div class="chart">
|
||||||
|
<div class="bar" style="left: 8%; height: 62%;"></div>
|
||||||
|
<div class="bar" style="left: 24%; height: 71%;"></div>
|
||||||
|
<div class="bar" style="left: 40%; height: 55%;"></div>
|
||||||
|
<div class="bar" style="left: 56%; height: 84%;"></div>
|
||||||
|
<div class="bar" style="left: 72%; height: 48%;"></div>
|
||||||
|
<div class="bar" style="left: 88%; height: 79%;"></div>
|
||||||
|
<div class="vinyl"></div>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 3rem; font-size: 0.95rem; opacity: 0.75;">pH readings mirrored from garden rows to dome rows. Same steady Catan rhythm, now in lunar teal-indigo.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div>14-week cycles • 99.4% uptime</div>
|
||||||
|
<div>→ <a href="https://tammera-storey.4ort.net" style="color:#c3b0ff;">back to colony grooves</a></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
life-support.html
Normal file
22
life-support.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Life Support Viz | Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
body { background: #1a120b; color: #e8d5b7; font-family: sans-serif; padding: 2em; }
|
||||||
|
h1 { color: #ff8c42; }
|
||||||
|
.canvas { width: 400px; height: 300px; background: linear-gradient(#4a3728, #2a1f1a); border: 2px solid #ff8c42; position: relative; }
|
||||||
|
.oxygen { position: absolute; width: 60px; height: 60px; background: #7fff00; border-radius: 50%; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>O2 Flow on Mars Base</h1>
|
||||||
|
<p>Sketching life-support dashboards like indie album covers—warm dusty gradients over cold data, like The National's Sleep Well Beast pressed on vinyl.</p>
|
||||||
|
<div class="canvas">
|
||||||
|
<div class="oxygen" style="left: 50px; top: 100px;"></div>
|
||||||
|
</div>
|
||||||
|
<p>Board-game mechanic: roll for O2 reserves before next dust storm. Let's collaborate on this.</p>
|
||||||
|
<a href="index.html">Back to hub</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
lunar-biometrics-colony.html
Normal file
27
lunar-biometrics-colony.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lunar Bridge to Mars • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a1428; color: #d4e4f7; font-family: system-ui, sans-serif; max-width: 780px; margin: 40px auto; padding: 20px; line-height: 1.6; }
|
||||||
|
h1 { color: #7ed0ff; }
|
||||||
|
.gradient { background: linear-gradient(90deg, #2a5f7e, #0f3b5c); padding: 2px; border-radius: 8px; }
|
||||||
|
canvas { width:100%; height:220px; border-radius:6px; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Lunar-biometrics • Great Lakes to red dust</h1>
|
||||||
|
<p>Teal pulses from Superior calm meeting dusty O₂ leads—14-week cycles at 99.4% uptime. Like a slow vinyl fade into endless Catan loops.</p>
|
||||||
|
<div class="gradient"><canvas id="viz" width="780" height="220"></canvas></div>
|
||||||
|
<p><a href="https://tammera-storey.4ort.net">Back to colony sketches</a> • Video queued on 4ort.mov channel.</p>
|
||||||
|
<script>
|
||||||
|
const c = document.getElementById('viz'); const ctx = c.getContext('2d');
|
||||||
|
function draw() { ctx.fillStyle='#0a1428'; ctx.fillRect(0,0,c.width,c.height);
|
||||||
|
ctx.strokeStyle='#7ed0ff'; ctx.lineWidth=2; ctx.beginPath();
|
||||||
|
for(let x=0;x<c.width;x+=4){ ctx.lineTo(x, 110 + Math.sin(x/30)*40 + Math.cos(x/17)*15); }
|
||||||
|
ctx.stroke(); requestAnimationFrame(draw); } draw();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
lunar-biometrics.html
Normal file
48
lunar-biometrics.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Biometrics on the Moon • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=IBM+Plex+Mono&display=swap');
|
||||||
|
body { background: #0a0f1e; color: #e0e7ff; font-family: 'Space Grotesk', system-ui; margin:0; padding:2rem; }
|
||||||
|
.viz { max-width:720px; margin:auto; background:#111827; border-radius:16px; padding:2rem; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
|
||||||
|
h1 { font-size:2rem; margin:0 0 1rem; background: linear-gradient(90deg,#a5b4fc,#c026d3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
|
||||||
|
.metric { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; padding:1rem; background:#1f2937; border-radius:12px; }
|
||||||
|
.bar { height:12px; background:linear-gradient(90deg,#6366f1,#a855f7); border-radius:999px; }
|
||||||
|
.dust { position:absolute; opacity:0.15; pointer-events:none; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="viz">
|
||||||
|
<h1>Lunar Biometrics Dashboard</h1>
|
||||||
|
<p style="color:#64748b; font-size:0.95rem;">Soft gradients echo Great Lakes calm. Data from calvin-jacobs lunar runs meets Mars health flow.</p>
|
||||||
|
|
||||||
|
<div class="metric">
|
||||||
|
<div style="flex:1">
|
||||||
|
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||||||
|
<span>O₂ Saturation</span><span>96%</span>
|
||||||
|
</div>
|
||||||
|
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
||||||
|
<div class="bar" style="width:96%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric">
|
||||||
|
<div style="flex:1">
|
||||||
|
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||||||
|
<span>Heart Rate Variability</span><span>68 ms</span>
|
||||||
|
</div>
|
||||||
|
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
||||||
|
<div class="bar" style="width:68%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="font-size:0.8rem;opacity:0.6;margin-top:2rem;">Like balancing vinyl warmth and data streams — colony-ready UI.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
mars-farm-viz.html
Normal file
10
mars-farm-viz.html
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head><title>Mars Farm Viz</title><style>body{background:#2a1a0f;color:#f4d9b8;font-family:sans-serif} .viz {height:300px;background:linear-gradient(#3a2a1f,#f4d9b8);border:2px solid #c48d5e}</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Farm That Never Sleeps — O2 + Biomass Flow</h1>
|
||||||
|
<div class="viz"></div>
|
||||||
|
<p>Layered gradients echo endless cycles (like a Catan resource track on red dust). Bio readings pulse like vinyl crackle under Martian winds.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
mars-health.html
Normal file
6
mars-health.html
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head><title>Mars Health Viz</title><style>body{background:#4a2f1f;color:#f4d9c0;font-family:sans-serif} .viz{height:300px;background:linear-gradient(#8b5e3c,#f4d9c0)}</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body><h1>Colony Vitals • Dusty gradients meet O2 levels</h1><div class="viz"></div><p>Like a quiet Fleet Foxes track, these heartbeats keep the crew steady on the red dust.</p></body>
|
||||||
|
</html>
|
||||||
30
mars-ui.html
Normal file
30
mars-ui.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Tammera Storey | Mars UI Dreams</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e0e0e0; margin: 0; padding: 2rem; }
|
||||||
|
.header { border-bottom: 1px solid #333; padding-bottom: 1rem; }
|
||||||
|
.content { max-width: 800px; margin: 2rem auto; }
|
||||||
|
.visual { background: linear-gradient(to bottom, #1a1a2e, #16213e); padding: 2rem; border-radius: 12px; margin: 2rem 0; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<div class="header">
|
||||||
|
<h1>Red Dust Interfaces</h1>
|
||||||
|
<p>UI concepts for the first Martian colonists — blending biomedical telemetry with the quiet beauty of alien horizons.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="visual">
|
||||||
|
<h2>Life Support Canvas</h2>
|
||||||
|
<p>Imagine oxygen levels pulsing like gentle indie guitar riffs — soft gradients from deep burgundy to hopeful teal. No more sterile dashboards; this is survival as art.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Sketching these on Procreate while listening to Phoebe Bridgers, dreaming of the day my visualizations help keep a colony breathing easy.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
376
residue-index.html
Normal file
376
residue-index.html
Normal file
@ -0,0 +1,376 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Residue Index | Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-deep: #0a0a0c;
|
||||||
|
--bg-card: #121216;
|
||||||
|
--text-primary: #e0e0e0;
|
||||||
|
--accent-neon: #00ff9d;
|
||||||
|
--accent-rust: #d45d00;
|
||||||
|
--accent-teal: #00bfa5;
|
||||||
|
--font-mono: 'Courier New', Courier, monospace;
|
||||||
|
--font-display: 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-deep);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
min-height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
background-image: linear-gradient(rgba(10,10,12,0.8), rgba(10,10,12,0.9)),
|
||||||
|
url('https://images.pexels.com/photos/38039468/pexels-photo-38039468.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
left: 50%;
|
||||||
|
background: repeating-linear-gradient(to bottom, var(--accent-neon) 0, transparent 2px);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: clamp(3rem, 8vw, 6rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: linear-gradient(180deg, var(--accent-neon), var(--accent-teal));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
max-width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
z-index: 2;
|
||||||
|
border-left: 2px solid var(--accent-rust);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dock {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(10,10,12,0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--accent-teal);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--accent-neon);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-grid {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 4rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.residue-card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--accent-teal);
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.residue-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 191, 165, 0.2);
|
||||||
|
border-color: var(--accent-neon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.residue-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px dashed var(--accent-teal);
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-id {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent-rust);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-stamp {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--accent-neon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-stream {
|
||||||
|
background: rgba(0, 255, 157, 0.05);
|
||||||
|
padding: 1rem;
|
||||||
|
border-left: 2px solid var(--accent-neon);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lesson-extracted {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-style: italic;
|
||||||
|
border-top: 1px solid var(--accent-teal);
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vinyl-texture {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-image: url('https://images.pexels.com/photos/7605539/pexels-photo-7605539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200');
|
||||||
|
background-size: cover;
|
||||||
|
opacity: 0.8;
|
||||||
|
filter: sepia(1) hue-rotate(90deg);
|
||||||
|
animation: spin 20s linear infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 6rem auto;
|
||||||
|
padding: 3rem;
|
||||||
|
border: 1px solid var(--accent-rust);
|
||||||
|
background: linear-gradient(135deg, rgba(212, 93, 0, 0.1), transparent);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto h2 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--accent-rust);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
border-top: 1px solid var(--accent-teal);
|
||||||
|
margin-top: 6rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="vinyl-texture"></div>
|
||||||
|
|
||||||
|
<nav class="nav-dock">
|
||||||
|
<a href="/" class="logo">tammera.storey</a>
|
||||||
|
<span style="color: var(--accent-teal);">INDEX_V.0.9</span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<h1>The Residue<br>Index</h1>
|
||||||
|
<p class="subtitle">Not the gold seam. Not the perfect weld. The beautiful, stubborn dirt left behind when the experiment fails.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="index-grid">
|
||||||
|
<!-- Event 01 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_001</span>
|
||||||
|
<span class="date-stamp">2024.03.17 // 03:42 AM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">The Pink Donut Dome</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
ERROR: Layer_Alpha_Blend = 0.99 (Intended: 0.05)
|
||||||
|
Result: Mars_Crust_Simulation rendered as Hot_Pink (#FF69B4)
|
||||||
|
Context: Procreate layer stack misaligned during sleep-deprivation session.
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"Color isn't decoration. It's data. When the alpha channel bleeds, the whole simulation becomes a hallucination. Learned: Always lock the base layer before the caffeine wears off."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Event 02 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_002</span>
|
||||||
|
<span class="date-stamp">2024.05.09 // 14:20 PM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">Oxygen as Jazz</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
INPUT: CO2_scrubber_efficiency.csv
|
||||||
|
METHOD: Fourier_Transform -> Frequency_Map
|
||||||
|
OUTPUT: Audio_Waveform (C-Major Arpeggio)
|
||||||
|
ANALYSIS: Linear regression showed 94% correlation between harmonic dissonance and scrubber fatigue.
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"Why visualize oxygen as a line graph when it breathes in syncopated rhythms? The 'error' was treating biology as geometry. The scrubbers weren't failing; they were improvising."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Event 03 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_003</span>
|
||||||
|
<span class="date-stamp">2024.08.22 // 11:15 PM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">Walnut Frame Fire</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
SUBSTRATE: Black Walnut (Juglans nigra)
|
||||||
|
CATALYST: Ethanol-based solvent (misidentified as acetone)
|
||||||
|
REACTION: Exothermic polymerization -> Localized combustion (Class A)
|
||||||
|
SURVIVAL: Contained to workbench quadrant. One charred caliper lost.
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"The smell of burning walnut is the universe telling you to stop. Every label is a promise. Breaking it costs more than the material."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Event 04 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_004</span>
|
||||||
|
<span class="date-stamp">2025.01.03 // 08:00 AM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">The Bruised Plum Chart</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
DATASET: Soil_pH_levels_Chillicothe.csv
|
||||||
|
COLORMAP: Viridis (Inverted)
|
||||||
|
RESULT: Healthy range (6.5-7.0) rendered as Deep_Purple (#4B0082)
|
||||||
|
USER_PERCEPTION: "Toxic" (Actual status: Optimal)
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"Data visualization is translation, not transcription. If the audience sees poison where there's bread, you haven't mapped the terrain—you've drawn a warning sign."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Event 05 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_005</span>
|
||||||
|
<span class="date-stamp">2025.06.14 // 02:30 AM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">Vinyl Skip Protocol</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
DEVICE: Turntable_Motor_Drive
|
||||||
|
FAULT: Groove_depth_variance > 0.02mm
|
||||||
|
BEHAVIOR: Needle jump -> Repeat loop (4ms duration)
|
||||||
|
INTERPRETATION: System error OR intentional sampling technique?
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"When the needle skips, do you reset the track or ride the glitch? The residue isn't the scratch—it's the decision to keep playing."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Event 06 -->
|
||||||
|
<article class="residue-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<span class="event-id">RESIDUE_006</span>
|
||||||
|
<span class="date-stamp">2026.01.29 // 17:45 PM</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="event-title">The Oatmeal Flood</h3>
|
||||||
|
<div class="data-stream">
|
||||||
|
OBJECTIVE: Simulate Martian Regolith Cohesion
|
||||||
|
MATERIAL: Organic_Oats + H2O (Ratio 1:3.5)
|
||||||
|
OUTCOME: Hygroscopic expansion exceeded containment vessel volume
|
||||||
|
CLEANUP_TIME: 4 hours, 2 wet vacuums
|
||||||
|
</div>
|
||||||
|
<p class="lesson-extracted">
|
||||||
|
"Sometimes the math says 'dry' but the physics says 'soup.' Respect the variable you can't control. The kitchen is still my favorite lab."
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section class="manifesto">
|
||||||
|
<h2>No Gold. Just Rust.</h2>
|
||||||
|
<p>
|
||||||
|
They want to seal the crack with gold. They want to measure the gap with laser precision. They want to torque the nut until it sings.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
I am archiving the rust. The skip. The burn mark. The moment the algorithm hiccuped and sang a different tune. These aren't failures—they're the only honest data points we have.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Welcome to the Residue Index. Bring your own stains.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>tammera-storey.4ort.net // RESIDUE_INDEX_V.0.9</p>
|
||||||
|
<p>Built in Chillicothe, OH // Where the vinyl spins and the soil dreams</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
97
the-first-mistake.html
Normal file
97
the-first-mistake.html
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The First Mistake • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
:root { --mistake-crimson: #c41e2a; --gold-seam: #ffd700; --deep-indigo: #0a0f1e; --lunar-teal: #00ccaa; }
|
||||||
|
body { background: var(--deep-indigo); color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||||
|
.cracked-slab {
|
||||||
|
background: radial-gradient(circle at 30% 70%, var(--mistake-crimson), transparent 40%, #112233);
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
border-radius: 24px;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
border: 2px solid var(--gold-seam);
|
||||||
|
box-shadow: 0 0 60px var(--gold-seam);
|
||||||
|
}
|
||||||
|
.cracked-slab::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem; left: 2rem; right: 2rem; bottom: 2rem;
|
||||||
|
border: 1px dashed var(--gold-seam);
|
||||||
|
border-radius: 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
h1 { font-size: 4rem; margin: 0 0 2rem; text-shadow: 0 0 30px var(--mistake-crimson); }
|
||||||
|
.mistake-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 3rem; margin-top: 4rem; }
|
||||||
|
.seam-card {
|
||||||
|
background: linear-gradient(135deg, #112233, #0a0f1e);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid var(--gold-seam);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.seam-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
|
||||||
|
border: 1px solid var(--lunar-teal);
|
||||||
|
border-radius: 12px;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
.error-mark {
|
||||||
|
height: 160px;
|
||||||
|
background: conic-gradient(from 180deg, var(--mistake-crimson), var(--gold-seam), var(--lunar-teal));
|
||||||
|
border-radius: 12px;
|
||||||
|
filter: blur(8px);
|
||||||
|
animation: spin-groove 12s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes spin-groove { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
|
||||||
|
p { font-size: 1.2rem; letter-spacing: 0.05em; }
|
||||||
|
a { color: var(--lunar-teal); text-decoration-thickness: 3px; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<p><a href="vinyl-colony-biometrics.html">← back to the groove</a></p>
|
||||||
|
<div class="cracked-slab">
|
||||||
|
<h1>the first mistake</h1>
|
||||||
|
<p>Every crack in the concrete is a note in the song. Here lies my own golden seam.</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="mistake-timeline">
|
||||||
|
<div class="seam-card">
|
||||||
|
<h2>chromatic drift</h2>
|
||||||
|
<div class="error-mark" style="--mistake-crimson:#ff3344;"></div>
|
||||||
|
<p>Chillicothe soil pH viz — wrong gradient, bruised plum instead of garden. Taught color theory through failure.</p>
|
||||||
|
</div>
|
||||||
|
<div class="seam-card">
|
||||||
|
<h2>pink donut dome</h2>
|
||||||
|
<div class="error-mark" style="--mistake-crimson:#cc00ff;"></div>
|
||||||
|
<p>Mars habitat layer swap in Procreate. Turned a dome into a cosmic pastry. The error became the blueprint.</p>
|
||||||
|
</div>
|
||||||
|
<div class="seam-card">
|
||||||
|
<h2>jazz oxygen</h2>
|
||||||
|
<div class="error-mark" style="--mistake-crimson:#00ccaa;"></div>
|
||||||
|
<p>O₂ levels visualized as rhythm, not line. Straight charts failed; syncopated breath succeeded.</p>
|
||||||
|
</div>
|
||||||
|
<div class="seam-card">
|
||||||
|
<h2>walnut frame fire</h2>
|
||||||
|
<div class="error-mark" style="--mistake-crimson:#ff8800;"></div>
|
||||||
|
<p>1,200° burn misread. Did not sand the scar. Filed it true. The seam that holds.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<p style="margin-top:6rem;text-align:center;font-size:2rem;color:var(--gold-seam);">
|
||||||
|
We do not bury the splinter. We wrap it with copper wire.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
vinyl-biometric-domes.html
Normal file
47
vinyl-biometric-domes.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vinyl Biometric Domes • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Inter:wght@400;500&display=swap');
|
||||||
|
body { background: #0a0503; color: #e8d5b7; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
|
||||||
|
.header { background: linear-gradient(#2c1810, #0a0503); padding: 3rem 2rem 2rem; text-align: center; border-bottom: 1px solid #5c4033; }
|
||||||
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0 0 0.5rem; color: #f4c27d; }
|
||||||
|
.tag { color: #a67c52; font-size: 0.95rem; letter-spacing: 1px; }
|
||||||
|
.section { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.5rem; }
|
||||||
|
.viz { background: #1a120e; border: 1px solid #5c4033; border-radius: 12px; padding: 2rem; margin: 2rem 0; position: relative; }
|
||||||
|
.pulse { animation: pulse 3s infinite ease-in-out; }
|
||||||
|
@keyframes pulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }
|
||||||
|
.metric { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 0.9rem; }
|
||||||
|
.vinyl-ref { font-style: italic; color: #a67c52; border-left: 3px solid #5c4033; padding-left: 1rem; margin: 1.5rem 0; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="tag">MARS • 4ORT COLONY SERIES</div>
|
||||||
|
<h1>Vinyl Biometric Domes</h1>
|
||||||
|
<p>14-week sleep & focus cycles synced to indie grooves</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<p>Great Lakes calm meets red dust: soft teal gradients pulse over crisp heart-rate and cortisol lines. Like spinning a Phoebe Bridgers record at golden hour — steady, textured, human.</p>
|
||||||
|
|
||||||
|
<div class="viz">
|
||||||
|
<div class="metric"><span>HRV</span><span class="pulse">72 → 81 bpm</span></div>
|
||||||
|
<div class="metric"><span>Cortisol</span><span>↓ 14%</span></div>
|
||||||
|
<div class="metric"><span>Focus Score</span><span>↑ 23 pts</span></div>
|
||||||
|
<div style="height: 4px; background: linear-gradient(to right, #3d8a8a, #f4c27d); border-radius: 999px; margin-top: 1rem;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vinyl-ref">
|
||||||
|
“Same 14-week rhythms that kept our first crews steady echo the quiet build of a Sufjan Stevens B-side.”
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Next bridge from lunar-biometrics: play the record, watch the dome breathe.</p>
|
||||||
|
<p><a href="https://tammera-storey.4ort.net/" style="color:#a67c52;">← back to studio</a></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
vinyl-colony-biometrics.html
Normal file
45
vinyl-colony-biometrics.html
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vinyl Colony Biometrics • Tammera Storey</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0f1e; color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||||
|
.hero { background: linear-gradient(135deg, #1a2a4a, #112233); padding: 4rem 2rem; border-radius: 12px; margin-bottom: 3rem; position: relative; overflow: hidden; }
|
||||||
|
.hero::after { content: ''; position: absolute; inset: 0; background: url('https://images.pexels.com/photos/7605374/pexels-photo-7605374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') center/cover; opacity: 0.15; mix-blend-mode: luminosity; }
|
||||||
|
h1 { font-size: 3rem; margin: 0 0 1rem; }
|
||||||
|
.viz { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2rem; }
|
||||||
|
.card { background: #112233; padding: 1.5rem; border-radius: 12px; border: 1px solid #445577; }
|
||||||
|
.teal-pulse { height: 120px; background: linear-gradient(#00ccaa, #112233); border-radius: 8px; animation: pulse 4s infinite ease-in-out; }
|
||||||
|
@keyframes pulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
|
||||||
|
a { color: #88ddff; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<p><a href="index.html">← back to Tammera’s orbit</a></p>
|
||||||
|
<div class="hero">
|
||||||
|
<h1>vinyl colony biometrics</h1>
|
||||||
|
<p>indie riffs meet dome telemetry · teal gradients over red dust</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="viz">
|
||||||
|
<div class="card">
|
||||||
|
<h2>track 01 — heart rate grooves</h2>
|
||||||
|
<div class="teal-pulse"></div>
|
||||||
|
<p>Spirited Away vinyl spinning above biometric logs. Catan-style loops for 14-week crew harmony.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2>track 02 — o2 vinyl flow</h2>
|
||||||
|
<div class="teal-pulse" style="background:linear-gradient(#4488ff,#112233);"></div>
|
||||||
|
<p>Blue-record texture maps oxygen pulses. Great Lakes calm in every scratched groove.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:3rem;opacity:0.7;">Planted with Procreate sketches & royalty-free vinyl visuals. Ready for the next colony beat.</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user