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