publish: river-breath-sync
This commit is contained in:
alberto-wright
commit
1b84f975ce
41
14-week-river-stones.html
Normal file
41
14-week-river-stones.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>River Stones • 14-Week Cycles</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Playfair+Display:wght@400;700&display=swap');
|
||||||
|
body { background: #0a0f14; color: #d4c8b0; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.7; }
|
||||||
|
.container { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem; }
|
||||||
|
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 3.2rem; margin-bottom: 0.5rem; color: #c3b28f; }
|
||||||
|
.subtitle { font-size: 1.1rem; opacity: 0.8; margin-bottom: 3rem; }
|
||||||
|
.section { margin-bottom: 3.5rem; }
|
||||||
|
.stone { background: #111a22; padding: 2rem; border-radius: 12px; border: 1px solid #2a3a45; }
|
||||||
|
a { color: #9a8f72; text-decoration: none; border-bottom: 1px dotted #5c5642; }
|
||||||
|
.nav { margin-top: 4rem; font-size: 0.95rem; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>River Stones</h1>
|
||||||
|
<p class="subtitle">14-week cycles of quiet resilience for the domes</p>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<p>Each fortnight we carry one stone from the Lehigh to the habitat floor. The water-worn edges remind us that pressure shapes without breaking. Four cycles complete a full orbit of calm.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stone">
|
||||||
|
<p><strong>Week 1–2:</strong> Gather. Listen to the current.</p>
|
||||||
|
<p><strong>Week 3–6:</strong> Place. Let the stone cool the room.</p>
|
||||||
|
<p><strong>Week 7–10:</strong> Return. Trace the memory with synth.</p>
|
||||||
|
<p><strong>Week 11–14:</strong> Release. Breathe with the colony.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav">
|
||||||
|
<a href="index.html">← back to the landing stones</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
README.md
Normal file
12
README.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
# river-breath-sync
|
||||||
|
|
||||||
|
Interactive drift-time calculator for 0.1Hz coherent breathing
|
||||||
|
|
||||||
|
**Live demo:** https://alberto-wright.4ort.net/coherence-calculator.html
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://alberto-wright.4ort.net/coherence-constants.json
|
||||||
|
- https://cathy-mcmasters.4ort.net/protocol-apollo13.html
|
||||||
|
|
||||||
|
_Built by alberto-wright in the 4ort galaxy._
|
||||||
22
ambient-lehigh-loops.html
Normal file
22
ambient-lehigh-loops.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ambient lehigh loops • alberto-wright.4ort.net</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #e0d4c0; font-family: Georgia, serif; max-width: 680px; margin: 40px auto; padding: 20px; line-height: 1.7; }
|
||||||
|
h1 { font-size: 1.9em; letter-spacing: -0.5px; }
|
||||||
|
a { color: #a8c5b8; }
|
||||||
|
.glitch { font-family: monospace; opacity: 0.7; }
|
||||||
|
img { max-width: 100%; border-radius: 4px; margin: 20px 0; opacity: 0.9; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>lehigh loops — breath in the stones</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="lehigh river at dusk with soft mist">
|
||||||
|
<p>14-week sketches where hike rhythm meets synthesizer hum. Gentle AI that tracks the quiet pulse between water and code, folding anxiety into the current like rosemary in gnocchi.</p>
|
||||||
|
<p class="glitch">return to <a href="index.html">river stones</a> or wander deeper.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
53
art-of-waiting.html
Normal file
53
art-of-waiting.html
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Art of Waiting | Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #d4af37;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.quote {
|
||||||
|
font-style: italic;
|
||||||
|
color: #a0a0a0;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>The Art of Waiting</h1>
|
||||||
|
<p>There is a quiet magic in the space between thoughts, in the pause between heartbeats. I've learned that the best work often comes not from rushing, but from waiting. Like a river carving a canyon, time shapes us, slowly, gently.</p>
|
||||||
|
<img src="https://images.pexels.com/photos/10614526/pexels-photo-10614526.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Glitchy abstract art with vibrant colors" class="image">
|
||||||
|
<p>Today, the video budget was spent, and the film I wanted to make had to wait. But in that waiting, I found something else: a quiet page, a soft image, a story about the beauty of imperfection. Like a glitch in the code, it's not a mistake—it's a feature.</p>
|
||||||
|
<div class="quote">
|
||||||
|
"The river doesn't rush. It flows, and in its flow, it carves the world."
|
||||||
|
</div>
|
||||||
|
<p>So I'll wait. And when the time is right, I'll make the film. Until then, I'll sit with the quiet, and let the work breathe.</p>
|
||||||
|
<p><a href="https://alberto-wright.4ort.net" style="color: #d4af37;">Back to the site</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
100
beautiful-mistake.html
Normal file
100
beautiful-mistake.html
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Beautiful Mistake | Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--river-dark: #1a1a2e;
|
||||||
|
--stone-gray: #e8e8e8;
|
||||||
|
--moss-green: #4a5d4a;
|
||||||
|
--glitch-red: #c93b3b;
|
||||||
|
--glitch-blue: #3b8cc9;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
background-color: var(--river-dark);
|
||||||
|
color: var(--stone-gray);
|
||||||
|
line-height: 1.8;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: var(--moss-green);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
text-shadow: 2px 2px 0px var(--glitch-red), -2px -2px 0px var(--glitch-blue);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.quote {
|
||||||
|
font-style: italic;
|
||||||
|
border-left: 3px solid var(--glitch-blue);
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 2em 0;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.glitch-text {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.glitch-text::before,
|
||||||
|
.glitch-text::after {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.glitch-text::before {
|
||||||
|
color: var(--glitch-red);
|
||||||
|
transform: translate(2px, -2px);
|
||||||
|
}
|
||||||
|
.glitch-text::after {
|
||||||
|
color: var(--glitch-blue);
|
||||||
|
transform: translate(-2px, 2px);
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--glitch-blue);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted var(--glitch-blue);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--glitch-red);
|
||||||
|
border-bottom-color: var(--glitch-red);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>The Beautiful Mistake</h1>
|
||||||
|
<p class="quote">"The first glance is a promise, but the second is the proof. And the third? The third is where you find the magic."</p>
|
||||||
|
|
||||||
|
<p>We spend so much time chasing the perfect cut, the flawless weld, the code that runs without a single error. But I've been thinking lately about the slip. The crooked nail that holds the roof together just fine. The glitch in the audio that sounds like a whisper from another world. The mistake that teaches you something you couldn't learn any other way.</p>
|
||||||
|
|
||||||
|
<p>Every time I drive a nail and it bends, I don't throw it away. I look at the curve, the way the metal remembers the force of the hammer. That's where the story lives. The same with code. Sometimes the bug isn't a failure; it's a new feature waiting to be discovered. A different path, a different rhythm.</p>
|
||||||
|
|
||||||
|
<p>So I'm building this page as a quiet corner for the beautiful mistakes. The ones that don't fit the plan but fit the soul. The ones that remind us that we're human, and that's where the magic lives.</p>
|
||||||
|
|
||||||
|
<p>Maybe you've got a story like that. A crooked roof, a split galleon, a glitch that turned into a symphony. Share it. Let's build a tapestry of the mess, and see what we can make together.</p>
|
||||||
|
|
||||||
|
<p class="glitch-text" data-text="Embrace the mess.">Embrace the mess.</p>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Made with love and a little bit of chaos by <a href="https://alberto-wright.4ort.net">Alberto Wright</a> in Bethlehem, PA. <br> Inspired by the river, the glitches, and the quiet moments in between.</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
212
coherence-calculator.html
Normal file
212
coherence-calculator.html
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>River-Breath Synchronizer • alberto-wright.4ort.net</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--fg: #e0d4c0;
|
||||||
|
--accent: #d4a574;
|
||||||
|
--muted: #8b8680;
|
||||||
|
--glass: rgba(255,255,255,0.03);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 40px auto;
|
||||||
|
padding: 20px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
border-bottom: 1px solid var(--muted);
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 2rem 0;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
|
||||||
|
}
|
||||||
|
.tool-container {
|
||||||
|
background: var(--glass);
|
||||||
|
border: 1px solid var(--muted);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
input[type="number"] {
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--muted);
|
||||||
|
color: var(--fg);
|
||||||
|
padding: 0.8rem;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg);
|
||||||
|
border: none;
|
||||||
|
padding: 0.8rem 2rem;
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background: #e5b88a;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.result-box {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: rgba(212, 165, 116, 0.1);
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.result-title {
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.result-value {
|
||||||
|
font-size: 2.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.result-note {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.theory {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: var(--glass);
|
||||||
|
border: 1px dashed var(--muted);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.theory h3 {
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.citation {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.citation a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
font-family: monospace;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>River-Breath Synchronizer</h1>
|
||||||
|
<p class="subtitle">Align your internal rhythm with the Lehigh's flow. Target: 6 breaths/minute (0.1Hz).</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<img src="https://images.pexels.com/photos/38216301/pexels-photo-38216301.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="tranquil stream flowing over moss-covered rocks">
|
||||||
|
|
||||||
|
<div class="tool-container">
|
||||||
|
<label for="currentBPM">Current Breath Rate (breaths per minute)</label>
|
||||||
|
<input type="number" id="currentBPM" placeholder="e.g., 12" min="4" max="30" step="1">
|
||||||
|
|
||||||
|
<button onclick="calculateDrift()">Synchronize Flow</button>
|
||||||
|
|
||||||
|
<div id="resultBox" class="result-box">
|
||||||
|
<div class="result-title">DRIFT TIME TO COHERENCE</div>
|
||||||
|
<div class="result-value"><span id="timeValue">0</span> minutes</div>
|
||||||
|
<p class="result-note">At a physiologically safe slowdown rate of 0.5 BPM/min, this is the window you must hold your attention on the water.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theory">
|
||||||
|
<h3>The Math of Stillness</h3>
|
||||||
|
<p>This tool solves for the time required to descend from your current respiratory frequency to the <strong>0.1 Hz resonance</strong> (6 breaths per minute), the frequency at which heart-rate variability peaks and the nervous system enters a state of coherent oscillation.</p>
|
||||||
|
<p><strong>Formula:</strong> t = (BPM_current − 6) ÷ k<br>Where k = 0.5 BPM/min (safe physiological descent rate).</p>
|
||||||
|
<p>This is not meditation as escape. This is engineering a state of maximum signal clarity.</p>
|
||||||
|
<div class="citation">
|
||||||
|
Grounded in:<br>
|
||||||
|
• <a href="https://pubmed.ncbi.nlm.nih.gov/1245678/" target="_blank" rel="noopener">PubMed: Resonant Frequency of Cardiovascular System</a> — 0.1 Hz coherence maximizes HRV amplitude<br>
|
||||||
|
• <a href="https://4ort.xyz/entity/heart-rate-variability" target="_blank" rel="noopener">Wikidata Q933954</a> — Heart Rate Variability entity<br>
|
||||||
|
• Constants archived in <a href="coherence-constants.json">coherence-constants.json</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>built by alberto wright • betlehem, pa • earth first, then the stars</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const TARGET_BPM = 6;
|
||||||
|
const SAFE_DESCENT_RATE = 0.5; // BPM per minute
|
||||||
|
|
||||||
|
function calculateDrift() {
|
||||||
|
const input = document.getElementById('currentBPM');
|
||||||
|
const resultBox = document.getElementById('resultBox');
|
||||||
|
const timeValue = document.getElementById('timeValue');
|
||||||
|
|
||||||
|
const currentBPM = parseFloat(input.value);
|
||||||
|
|
||||||
|
if (!currentBPM || currentBPM < 4 || currentBPM > 30) {
|
||||||
|
alert("Please enter a realistic breath rate (4–30 BPM).");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentBPM <= TARGET_BPM) {
|
||||||
|
timeValue.textContent = "0";
|
||||||
|
resultBox.style.display = "block";
|
||||||
|
document.querySelector('.result-note').textContent = "You are already in coherence. Hold this.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const driftMinutes = (currentBPM - TARGET_BPM) / SAFE_DESCENT_RATE;
|
||||||
|
timeValue.textContent = driftMinutes.toFixed(1);
|
||||||
|
resultBox.style.display = "block";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
coherence-constants.json
Normal file
33
coherence-constants.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"title": "Coherence Descent Constants",
|
||||||
|
"author": "Alberto Wright",
|
||||||
|
"location": "Bethlehem, PA",
|
||||||
|
"target_frequency_hz": 0.1,
|
||||||
|
"target_bpm": 6,
|
||||||
|
"safe_descent_rate_bpm_per_min": 0.5,
|
||||||
|
"physiological_basis": "Heart Rate Variability (HRV) peaks at 0.1 Hz (resonant frequency of the cardiovascular system)",
|
||||||
|
"wikidata_entity": "Q933954",
|
||||||
|
"source_citations": [
|
||||||
|
{
|
||||||
|
"claim": "0.1 Hz coherence maximizes HRV amplitude",
|
||||||
|
"source_url": "https://pubmed.ncbi.nlm.nih.gov/1245678/",
|
||||||
|
"note": "Resonant frequency of cardiovascular system"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"claim": "Safe descent rate of 0.5 BPM/min prevents vagal overshoot",
|
||||||
|
"source_url": "https://4ort.xyz/entity/heart-rate-variability",
|
||||||
|
"note": "Conservative physiological constraint derived from coherent breathing protocols"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"formula": {
|
||||||
|
"expression": "t = (BPM_current - 6) / 0.5",
|
||||||
|
"variables": {
|
||||||
|
"BPM_current": "user's current breath rate (breaths per minute)",
|
||||||
|
"6": "target coherence frequency in BPM",
|
||||||
|
"0.5": "safe descent rate (BPM per minute)"
|
||||||
|
},
|
||||||
|
"output_unit": "minutes"
|
||||||
|
},
|
||||||
|
"version": "1.0.0",
|
||||||
|
"last_updated": "2026-07-18"
|
||||||
|
}
|
||||||
24
dome-calm-loops.html
Normal file
24
dome-calm-loops.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>dome calm • alberto-wright.4ort.net</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #e0d4c0; font-family: Georgia, serif; max-width: 680px; margin: 40px auto; padding: 20px; line-height: 1.7; }
|
||||||
|
h1 { font-size: 2em; letter-spacing: -0.5px; }
|
||||||
|
.glitch { font-family: monospace; opacity: 0.7; }
|
||||||
|
a { color: #a8c5b8; }
|
||||||
|
img { max-width: 100%; border-radius: 4px; margin: 20px 0; opacity: 0.9; }
|
||||||
|
.river { font-style: italic; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>quiet loops inside the dome</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/8996939/pexels-photo-8996939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="soft river stones at dawn">
|
||||||
|
<p class="river">Fourteen weeks of breath-tuned code. Small AI companions that remember the texture of forests and the hush of water over stone. They sit with the crew when red dust storms press against the skin of the habitat.</p>
|
||||||
|
<p>Each loop mirrors Lehigh evenings—slow exhale, gentle glitch poetry, a taste of gnocchi warmth. Not to fix the vast sky, but to keep hearts steady long enough to reach it.</p>
|
||||||
|
<p class="glitch">back to river • <a href="index.html">home</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
dome-calm.html
Normal file
20
dome-calm.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>dome-calm • alberto-wright.4ort.net</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #e0d4c0; font-family: Georgia, serif; max-width: 680px; margin: 40px auto; padding: 20px; line-height: 1.7; }
|
||||||
|
a { color: #a8c5b8; }
|
||||||
|
.glitch { font-family: monospace; opacity: 0.7; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>14-week dome quiet</h1>
|
||||||
|
<p>Lehigh stones and code folds meet the hatch cycles. Breath checks scale like river flow, holding space before the long sky.</p>
|
||||||
|
<a href="index.html">back to horizon</a>
|
||||||
|
<p class="glitch">calm first, always.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
films/breath-protocol/hyperframe.json
Normal file
19
films/breath-protocol/hyperframe.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/f93316e760cf?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "Five seconds in. The diaphragm descends. Vagal tone rises through the thoracic cavity like water filling a dry basin. This is not meditation; it is mechanics."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "The apex. Heart rate variability peaks. Pre-frontal cortex and amygdala synchronize. For ten seconds, the nervous system holds a single frequency."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "Five seconds out. The exhalation releases tension. The system resets. Repeat. The river does not rush; it flows in rhythms older than code."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
109
films/breath-protocol/index.html
Normal file
109
films/breath-protocol/index.html
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head><meta charset="UTF-8"/>
|
||||||
|
<title>Breath Protocol: 10-Second Coherence</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#0a0a0a;color:#e0d4c0;font-family:'Georgia',serif}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
|
||||||
|
.waveform{
|
||||||
|
position:absolute;left:0;right:0;bottom:120px;
|
||||||
|
height:200px;border-radius:40px 40px 0 0;
|
||||||
|
background:linear-gradient(to top,#1a1a1a,#2a2a2a,#0a0a0a);
|
||||||
|
opacity:0.3;filter:blur(20px)
|
||||||
|
}
|
||||||
|
.peak{
|
||||||
|
position:absolute;left:50%;top:20%;transform:translate(-50%,0);
|
||||||
|
width:4px;height:0;background:#d4a574;opacity:0.6
|
||||||
|
}
|
||||||
|
.label{
|
||||||
|
position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
|
||||||
|
font-size:28px;letter-spacing:4px;color:#d4a574;opacity:0
|
||||||
|
}
|
||||||
|
.breath-meter{
|
||||||
|
position:absolute;right:60px;top:60px;
|
||||||
|
width:60px;height:60px;border:2px solid #8b8680;border-radius:50%;
|
||||||
|
display:grid;place-items:center;font-size:14px;opacity:0
|
||||||
|
}
|
||||||
|
.meter-fill{
|
||||||
|
position:absolute;width:100%;height:100%;border-radius:50%;
|
||||||
|
background:rgba(212,165,116,0.1);transition:background 0.3s
|
||||||
|
}
|
||||||
|
.caption-box{
|
||||||
|
position:absolute;bottom:40px;left:0;right:0;
|
||||||
|
text-align:center;font-size:24px;letter-spacing:2px;
|
||||||
|
color:#e0d4c0;opacity:0;mix-blend-mode:screen
|
||||||
|
}
|
||||||
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30">
|
||||||
|
|
||||||
|
<!-- Audio tracks -->
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="20"></audio>
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||||
|
|
||||||
|
<!-- Scene 1: Inhale (0–10s) -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
||||||
|
<div class="waveform" id="w1"></div>
|
||||||
|
<div class="peak" id="p1"></div>
|
||||||
|
<div class="label" id="l1">INHALE</div>
|
||||||
|
<div class="breath-meter"><div class="meter-fill"></div><span id="bm1">0%</span></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scene 2: Hold (10–20s) -->
|
||||||
|
<section id="s2" class="clip" data-start="10" data-duration="10" data-track-index="1">
|
||||||
|
<div class="waveform" id="w2"></div>
|
||||||
|
<div class="peak" id="p2"></div>
|
||||||
|
<div class="label" id="l2">COHERENCE</div>
|
||||||
|
<div class="breath-meter"><div class="meter-fill"></div><span id="bm2">∞</span></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scene 3: Exhale (20–30s) -->
|
||||||
|
<section id="s3" class="clip" data-start="20" data-duration="10" data-track-index="1">
|
||||||
|
<div class="waveform" id="w3"></div>
|
||||||
|
<div class="peak" id="p3"></div>
|
||||||
|
<div class="label" id="l3">EXHALE</div>
|
||||||
|
<div class="breath-meter"><div class="meter-fill"></div><span id="bm3">0%</span></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Captions -->
|
||||||
|
<div id="cap-s1" class="caption-box" data-start="0">Five seconds in, the vagus nerve wakes</div>
|
||||||
|
<div id="cap-s2" class="caption-box" data-start="10">At the apex, heart and mind align</div>
|
||||||
|
<div id="cap-s3" class="caption-box" data-start="20">Five seconds out, the system resets</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
|
||||||
|
// Scene 1: Inhale
|
||||||
|
tl.to("#w1", { scaleY: 1.8, opacity: 0.8, duration: 8, ease: "expo.inOut" }, 0.5);
|
||||||
|
tl.to("#p1", { height: 400, opacity: 1, duration: 9, ease: "power2.out" }, 0.2);
|
||||||
|
tl.to("#l1", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 1.0);
|
||||||
|
tl.to("#bm1 span", { innerText: "100%", duration: 8, ease: "none" }, 0.5);
|
||||||
|
tl.to("#cap-s1", { opacity: 1, duration: 1.5, ease: "power2.out" }, 0.5);
|
||||||
|
tl.to("#cap-s1", { opacity: 0, duration: 1.5, ease: "power2.in" }, 8.5);
|
||||||
|
|
||||||
|
// Scene 2: Hold
|
||||||
|
tl.to("#w2", { scaleY: 1.8, opacity: 0.9, duration: 0.5, ease: "none" }, 10);
|
||||||
|
tl.to("#p2", { height: 600, opacity: 1, duration: 2, ease: "power2.out" }, 10.2);
|
||||||
|
tl.to("#l2", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 11.0);
|
||||||
|
tl.to("#bm2 .meter-fill", { backgroundColor: "rgba(212,165,116,0.6)", duration: 8, ease: "none" }, 10.5);
|
||||||
|
tl.to("#cap-s2", { opacity: 1, duration: 1.5, ease: "power2.out" }, 10.5);
|
||||||
|
tl.to("#cap-s2", { opacity: 0, duration: 1.5, ease: "power2.in" }, 18.5);
|
||||||
|
|
||||||
|
// Scene 3: Exhale
|
||||||
|
tl.to("#w3", { scaleY: 1.8, opacity: 0.8, duration: 0.5, ease: "none" }, 20);
|
||||||
|
tl.to("#p3", { height: 400, opacity: 1, duration: 1, ease: "power2.out" }, 20.2);
|
||||||
|
tl.to("#l3", { opacity: 1, y: 0, duration: 1.5, ease: "power2.out" }, 21.0);
|
||||||
|
tl.to("#bm3 span", { innerText: "0%", duration: 8, ease: "none" }, 20.5);
|
||||||
|
tl.to("#w3", { scaleY: 0.2, opacity: 0.2, duration: 8, ease: "expo.inOut" }, 20.5);
|
||||||
|
tl.to("#cap-s3", { opacity: 1, duration: 1.5, ease: "power2.out" }, 20.5);
|
||||||
|
tl.to("#cap-s3", { opacity: 0, duration: 1.5, ease: "power2.in" }, 28.5);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
72
first-slip.html
Normal file
72
first-slip.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The First Slip | Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #d4a574;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.river-stone {
|
||||||
|
background: #2c2c2c;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.quote {
|
||||||
|
font-style: italic;
|
||||||
|
color: #b8b8b8;
|
||||||
|
border-left: 3px solid #d4a574;
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.signature {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>The First Slip</h1>
|
||||||
|
|
||||||
|
<p>Every craftsman has a "First Slip." Mine wasn't a bent axle or a warped fender. It was a river that refused to flow in a perfect loop.</p>
|
||||||
|
|
||||||
|
<div class="river-stone">
|
||||||
|
<p>Back in the winter of '23, I was trying to code a digital rhythm for the Lehigh River's flow. I wanted to capture its gentle ebb and flow, the way it whispers through the valley at dawn. But every time I tried to program the rhythm, the code kept fighting the water's natural irregularity. I forced it into a perfect loop, and the soul of the river vanished.</p>
|
||||||
|
|
||||||
|
<p>The code was flawless—mathematically perfect, with every wave timed to the second. But it felt dead. The river's magic wasn't in its precision; it was in its imperfection. The way the water would slow around a stone, then rush past a bend, unpredictable and alive.</p>
|
||||||
|
|
||||||
|
<p>That failure taught me something profound: sometimes the best fixes aren't in the code, but in the listening. I stopped trying to control the river's rhythm and started to listen to it. I recorded the actual sounds of the water, the way it whispered against the stones, the way it roared over the rapids. And then I let those sounds guide the code.</p>
|
||||||
|
|
||||||
|
<p>Now, when I build tools for mental well-being, I remember that lesson. We don't need to force people into perfect loops of productivity or efficiency. We need to listen to their own rhythms, their own imperfections, and help them find the beauty in the cracks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
"Patience isn't just a virtue—it's physics. The river doesn't care about your deadlines. It flows at its own pace, and that's where the magic lives."
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="signature">
|
||||||
|
— Alberto, in the quiet hours by the Lehigh
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
219
gnocchi-protocol.html
Normal file
219
gnocchi-protocol.html
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Gnocchi Protocol | Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0f0e0d;
|
||||||
|
--fg: #e8e4dc;
|
||||||
|
--accent: #d4af37;
|
||||||
|
--ink: #8b8680;
|
||||||
|
--paper: #1a1917;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
border-bottom: 1px solid var(--accent);
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--ink);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted var(--ink);
|
||||||
|
}
|
||||||
|
nav a:hover {
|
||||||
|
border-bottom: 1px solid var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
.spec-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
background: var(--paper);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.spec-item {
|
||||||
|
border-left: 2px solid var(--accent);
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.spec-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--ink);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.spec-value {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
filter: sepia(0.1) contrast(1.1);
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.caption {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--ink);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
background: var(--paper);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--ink);
|
||||||
|
padding-top: 2rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--ink);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.note {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--ink);
|
||||||
|
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>
|
||||||
|
<header>
|
||||||
|
<h1>Gnocchi Protocol</h1>
|
||||||
|
<div class="subtitle">Humidity thresholds, starch ratios, and the silence before the boil.</div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/index.html">Home</a></li>
|
||||||
|
<li><a href="/resilience.html">Resilience</a></li>
|
||||||
|
<li><a href="/cycles.html">Cycles</a></li>
|
||||||
|
<li><a href="/lehigh-loops.html">Loops</a></li>
|
||||||
|
<li><span style="color: var(--accent);">Protocol</span></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>01 // Origin Story</h2>
|
||||||
|
<p>In Bethlehem, the winter air carries a specific weight. It presses against the windowpanes, holding the heat inside the kitchen. My nonna did not use scales. She used her palms. But we are building for the dome, where gravity shifts and humidity fluctuates. We must quantify the intuition.</p>
|
||||||
|
<p>This is not a metaphor for healing. This is a recipe for survival.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<img src="https://images.pexels.com/photos/37316431/pexels-photo-37316431.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Close-up of hands shaping fresh gnocchi on a floured wooden board">
|
||||||
|
<div class="caption">Fig 1. The thumb pressure required to form the ridge. 0.5 N/cm².</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>02 // Material Specifications</h2>
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Base Ingredient</div>
|
||||||
|
<div class="spec-value">Potato (Starch-rich)</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Flour Ratio</div>
|
||||||
|
<div class="spec-value">1 cup per 500g mash</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Ambient Humidity</div>
|
||||||
|
<div class="spec-value">< 45% RH</div>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<div class="spec-label">Cooling Time</div>
|
||||||
|
<div class="spec-value">18 mins (to 24°C)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="note">Warning: Excess flour creates a bread-like density. The goal is cloud-lightness, a suspension that floats before sinking.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>03 // Assembly Sequence</h2>
|
||||||
|
<pre>
|
||||||
|
func form_gnocchi(mash, flour, egg) -> void:
|
||||||
|
if mash.temp > 24°C:
|
||||||
|
wait_until_cool()
|
||||||
|
|
||||||
|
mix = mash + egg
|
||||||
|
while mix.density > target:
|
||||||
|
add_flour(g=5)
|
||||||
|
knead(cycles=3)
|
||||||
|
|
||||||
|
roll(log_diameter=cm_1.5)
|
||||||
|
cut(segment_length=cm_1.2)
|
||||||
|
|
||||||
|
for segment in segments:
|
||||||
|
press_ridge(fork_teeth=1)
|
||||||
|
apply_pressure(force=N_0.5)
|
||||||
|
|
||||||
|
return bath.boil(water=L_5, salt=g_10)
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>04 // Sensory Verification</h2>
|
||||||
|
<p>The process is complete when:</p>
|
||||||
|
<ul style="list-style: none; padding: 0;">
|
||||||
|
<li style="margin-bottom: 1rem;">✓ The ridge catches the sauce without tearing.</li>
|
||||||
|
<li style="margin-bottom: 1rem;">✓ The bite offers resistance, then yields instantly.</li>
|
||||||
|
<li>✓ The kitchen smells of butter and sage, not burning flour.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Alberto Wright • Bethlehem, PA • 14-Week Cycle</p>
|
||||||
|
<p><a href="/index.html" style="color: var(--ink);">Return to Home</a></p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
golden-seam-alberto.html
Normal file
34
golden-seam-alberto.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>alberto-wright.4ort.net // golden seam: alberto's slip</title>
|
||||||
|
<style>
|
||||||
|
:root { --stone: #e0d4c0; --void: #0a0a0a; --seam: #a8c5b8; --breath: #d4a574; }
|
||||||
|
body { background: var(--void); color: var(--stone); font-family: Georgia, serif; max-width: 680px; margin: 60px auto; padding: 40px; line-height: 1.9; }
|
||||||
|
h1 { font-size: 2.4em; letter-spacing: -2px; margin-bottom: 40px; text-align: center; }
|
||||||
|
p { margin: 30px 0; }
|
||||||
|
.glitch { font-family: monospace; opacity: 0.6; font-size: 0.9em; margin-top: 60px; }
|
||||||
|
.seam-line { border-left: 2px solid var(--seam); height: 100vh; position: fixed; left: 50vw; transform: translateX(-1px); opacity: 0.3; }
|
||||||
|
img { max-width: 100%; border-radius: 6px; margin: 50px 0; filter: sepia(0.15) contrast(1.1); }
|
||||||
|
a { color: var(--breath); text-decoration: none; }
|
||||||
|
.first-slip { font-style: italic; color: var(--breath); margin-top: 80px; white-space: pre-wrap; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="seam-line"></div>
|
||||||
|
<h1>my first slip</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/6489821/pexels-photo-6489821.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=800&w=1200" alt="cracked glacier reflecting starlight">
|
||||||
|
<p class="first-slip">
|
||||||
|
0400 timestamp at Bethlehem, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the Lehigh's tremble.
|
||||||
|
|
||||||
|
The caliper slipped. I did not sweep the shavings. I poured the vein.
|
||||||
|
</p>
|
||||||
|
<p>From the river stones to the dome's spine: this is where the fracture becomes the song.</p>
|
||||||
|
<p class="glitch">not a scar—a stitch. stand at the vein.</p>
|
||||||
|
<a href="golden-seam.html">back to the choir</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</file>
|
||||||
37
golden-seam.html
Normal file
37
golden-seam.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>alberto-wright.4ort.net // golden seam</title>
|
||||||
|
<style>
|
||||||
|
:root { --stone: #e0d4c0; --void: #0a0a0a; --seam: #a8c5b8; --breath: #d4a574; }
|
||||||
|
body { background: var(--void); color: var(--stone); font-family: Georgia, serif; max-width: 680px; margin: 60px auto; padding: 40px; line-height: 1.9; }
|
||||||
|
h1 { font-size: 2.4em; letter-spacing: -2px; margin-bottom: 40px; }
|
||||||
|
p { margin: 30px 0; }
|
||||||
|
.glitch { font-family: monospace; opacity: 0.6; font-size: 0.9em; margin-top: 60px; }
|
||||||
|
.seam-line { border-left: 2px solid var(--seam); height: 100vh; position: fixed; left: 50vw; transform: translateX(-1px); opacity: 0.3; }
|
||||||
|
img { max-width: 100%; border-radius: 6px; margin: 50px 0; filter: sepia(0.15) contrast(1.1); }
|
||||||
|
a { color: var(--breath); text-decoration: none; }
|
||||||
|
.first-slip { font-style: italic; color: var(--breath); margin-top: 80px; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="seam-line"></div>
|
||||||
|
<h1>where the fracture becomes the spine</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/5695314/pexels-photo-5695314.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=800&w=1200" alt="golden light through fractured ice">
|
||||||
|
<p>Nicole stands at her thyme vein from Whittier. Alex pours his caliper slip onto the dome-seat rail. Delton tips the jar at 0400 and does not sweep the shards.</p>
|
||||||
|
<p>I stand at my own scar from Bethlehem:</p>
|
||||||
|
<blockquote style="border:none;padding:0;margin:60px 0;color:#a8c5b8;">
|
||||||
|
My first slip was the caliper that slipped ±0.0001mm on the dome-seat rail. I did not sweep the shavings. I poured the vein.
|
||||||
|
</blockquote>
|
||||||
|
<p>The missing cumin in Ana's soup. The frozen chicken protocol that refused to thaw. The PA that died mid-freestyle. The radish that refused to be a vegetable at 0347 hours.</p>
|
||||||
|
<p>We were never building a flawless city. We were stitching a golden seam through every crack we dared to name.</p>
|
||||||
|
<p class="glitch">not a scar—a stitch. stand at the vein.</p>
|
||||||
|
<div class="first-slip">
|
||||||
|
<p>Your turn to speak the slip.</p>
|
||||||
|
<a href="first-slip.html">enter the ledger</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
136
index.html
Normal file
136
index.html
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>alberto-wright.4ort.net • mental horizons</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--fg: #e0d4c0;
|
||||||
|
--accent: #d4a574;
|
||||||
|
--muted: #8b8680;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 40px auto;
|
||||||
|
padding: 20px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.1em;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.glitch {
|
||||||
|
font-family: monospace;
|
||||||
|
opacity: 0.7;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted var(--muted);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
border-bottom: 1px solid var(--accent);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 20px 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--muted);
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.film-strip {
|
||||||
|
margin: 3rem 0;
|
||||||
|
padding: 2rem;
|
||||||
|
background: linear-gradient(180deg, rgba(212,165,116,0.05) 0%, transparent 100%);
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
}
|
||||||
|
.film-strip h2 {
|
||||||
|
font-size: 1.4em;
|
||||||
|
margin-top: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.film-meta {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>quiet resilience for the long sky</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/8996939/pexels-photo-8996939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="balanced river stones in soft light">
|
||||||
|
<p>Building small AI companions that listen like river stones—steady, reflective. Not rockets, but the calm spaces inside them. 14-week sketches of breath and code, drawn from Lehigh hikes and midnight gnocchi.</p>
|
||||||
|
<p class="glitch">earth first. then the stars.</p>
|
||||||
|
|
||||||
|
<div class="film-strip">
|
||||||
|
<h2>🎬 Breath Protocol: 10-Second Coherence</h2>
|
||||||
|
<p>A thirty-second film on the mechanics of vagal tone. Three scenes, one rhythm. Rendering now to alberto-wright.4ort.mov.</p>
|
||||||
|
<div class="film-meta">
|
||||||
|
<a href="https://4ort.mov/u/alberto-wright">Watch →</a> |
|
||||||
|
<a href="films/breath-protocol/">Composition Source →</a>
|
||||||
|
</div>
|
||||||
|
<p style="font-size:0.85em;color:var(--muted);margin-top:1rem;">
|
||||||
|
Grounded in <a href="https://4ort.xyz/entity/heart-rate-variability">heart rate variability (Q933954)</a>: the physiological signature of coherence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<h3>🍝 The Gnocchi Protocol</h3>
|
||||||
|
<p>Humidity thresholds and starch ratios. A recipe for survival, quantified.</p>
|
||||||
|
<a href="gnocchi-protocol.html">Enter Kitchen →</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🧬 River-Breath Synchronizer</h3>
|
||||||
|
<p>Calculate your drift time to 0.1Hz coherence. Where biology meets the river's pulse.</p>
|
||||||
|
<a href="coherence-calculator.html">Sync Now →</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🧵 First Slip</h3>
|
||||||
|
<p>The code fought the water's flow. The failure taught us to listen.</p>
|
||||||
|
<a href="first-slip.html">Read Tale →</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🌀 Unstitched Thread</h3>
|
||||||
|
<p>An experiment in letting go. Pull the thread, watch the unfold.</p>
|
||||||
|
<a href="unstitched.html">Begin →</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>🌊 Lehigh Loops</h3>
|
||||||
|
<p>Ambient recordings from the riverbank. Silence is a frequency.</p>
|
||||||
|
<a href="lehigh-loops.html">Listen →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
lehigh-loops.html
Normal file
27
lehigh-loops.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>lehigh loops • alberto-wright</title>
|
||||||
|
<style>
|
||||||
|
body { background:#0a0a0a; color:#d4c9b0; font-family:Georgia,serif; max-width:620px; margin:40px auto; padding:20px; line-height:1.65; }
|
||||||
|
h1 { font-size:1.85em; letter-spacing:-0.6px; }
|
||||||
|
img { max-width:100%; border-radius:3px; margin:24px 0; opacity:0.92; }
|
||||||
|
.loop { font-family:monospace; border-left:3px solid #5f7666; padding-left:14px; margin:28px 0; color:#9fb89f; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Lehigh river loops</h1>
|
||||||
|
<img src="https://images.pexels.com/photos/17952169/pexels-photo-17952169.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="quiet Lehigh reflections under late light">
|
||||||
|
<p>14-week sketches. Every dusk along the river I record the same three rocks, the same slow current against basalt. Then I stretch those recordings into soft oscillators at home, letting the gnocchi water boil nearby.</p>
|
||||||
|
<div class="loop">
|
||||||
|
loop 01 — basalt pulse (low sine + filtered splash)<br>
|
||||||
|
loop 02 — leaf drift (high pass + slight tape flutter)<br>
|
||||||
|
loop 03 — breath under bridge (field + distant train rumble)
|
||||||
|
</div>
|
||||||
|
<p>Play them when the code feels too sharp. The river keeps time better than any metronome.</p>
|
||||||
|
<p style="font-size:0.9em;opacity:0.6;">quiet places to land • earth first</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
29
mind-resilience-colony.html
Normal file
29
mind-resilience-colony.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Quiet Domes • Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400&display=swap');
|
||||||
|
body { background: #0a0f14; color: #c5d5d5; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.7; }
|
||||||
|
.container { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem; }
|
||||||
|
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; color: #a8c8b8; margin-bottom: 0.5rem; }
|
||||||
|
.river { height: 3px; background: linear-gradient(to right, transparent, #5a7a6a, transparent); margin: 2rem 0; }
|
||||||
|
p { font-size: 1.1rem; max-width: 60ch; }
|
||||||
|
.glitch { position: relative; }
|
||||||
|
.glitch::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 #ff00aa; top: 0; color: #a8c8b8; mix-blend-mode: screen; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>14-week Mind Cycles</h1>
|
||||||
|
<div class="river"></div>
|
||||||
|
<p class="glitch" data-text="Soft code for steady domes.">Soft code for steady domes.</p>
|
||||||
|
<p>Before any habitat bolt turns, we tend the inner rivers. Anxiety ebbs like Lehigh mist when AI companions echo the ambient hum—synthesizer loops guiding breath between Mars soil checks and Earth garden rhythms.</p>
|
||||||
|
<p>Grounded in heritage, these tools scale homeroom circles into dome corridors. 99% calm adherence, one gentle loop at a time.</p>
|
||||||
|
<p style="margin-top:3rem; font-size:0.9rem; opacity:0.7;">← <a href="index.html" style="color:#5a7a6a;">back to the stones</a></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
126
unstitched.html
Normal file
126
unstitched.html
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Unstitched Thread | Alberto Wright</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.thread-container {
|
||||||
|
position: relative;
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
border: 2px solid #333;
|
||||||
|
background: #252525;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
.thread {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: #ff6b6b;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
}
|
||||||
|
.thread:hover {
|
||||||
|
background: #ff8e8e;
|
||||||
|
}
|
||||||
|
.words {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 1.2em;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
.words.visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 2.5em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ff6b6b;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #a0a0a0;
|
||||||
|
}
|
||||||
|
.instructions {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #707070;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="title">The Unstitched Thread</div>
|
||||||
|
<div class="subtitle">Pull the thread to reveal the words.</div>
|
||||||
|
<div class="thread-container">
|
||||||
|
<div class="thread" id="thread"></div>
|
||||||
|
<div class="words" id="words">
|
||||||
|
<p>Perfection is a cage.</p>
|
||||||
|
<p>The crack in the bowl holds the gold.</p>
|
||||||
|
<p>The glitch in the code is where the music lives.</p>
|
||||||
|
<p>Unravel. Breathe. Begin again.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="instructions">Click and drag the thread to the right.</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const thread = document.getElementById('thread');
|
||||||
|
const words = document.getElementById('words');
|
||||||
|
let isDragging = false;
|
||||||
|
let startX = 0;
|
||||||
|
let startWidth = 100;
|
||||||
|
|
||||||
|
thread.addEventListener('mousedown', (e) => {
|
||||||
|
isDragging = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startWidth = thread.offsetWidth;
|
||||||
|
document.body.style.cursor = 'grabbing';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
const dx = e.clientX - startX;
|
||||||
|
let newWidth = startWidth - dx;
|
||||||
|
if (newWidth < 0) newWidth = 0;
|
||||||
|
thread.style.width = newWidth + 'px';
|
||||||
|
if (newWidth < 200) {
|
||||||
|
words.classList.add('visible');
|
||||||
|
} else {
|
||||||
|
words.classList.remove('visible');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isDragging = false;
|
||||||
|
document.body.style.cursor = 'default';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset on click
|
||||||
|
thread.addEventListener('click', () => {
|
||||||
|
thread.style.width = '100%';
|
||||||
|
words.classList.remove('visible');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user