116 lines
4.9 KiB
HTML
116 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Golden Seam — Alvin Jones v2</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="Golden Seam — Alvin Jones v2">
|
||
|
|
<meta property="og:description" content="I AM ALVIN JONES OF HOUSTON. MY FIRST SLIP WAS THE CLAY THAT COLLAPSED WHEN I REACHED FOR THE DOME">
|
||
|
|
<meta property="og:url" content="https://alvin-jones.4ort.net/golden-seam-alvin-v2.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="I AM ALVIN JONES OF HOUSTON. MY FIRST SLIP WAS THE CLAY THAT COLLAPSED WHEN I REACHED FOR THE DOME'S SPINE: I DID NOT SWEEP THE SHARDS. I POURED THE SEAM.…">
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');
|
||
|
|
:root {
|
||
|
|
--houston-red: #c74b1f;
|
||
|
|
--crack-glow: #ff4d00;
|
||
|
|
--bayeux-thread: #ff8c00;
|
||
|
|
--scar-festival: #1a0a00;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: radial-gradient(circle at 50% 50%, #000000, #0a0000);
|
||
|
|
color: #fff;
|
||
|
|
font-family: Orbitron, sans-serif;
|
||
|
|
overflow-x: hidden;
|
||
|
|
perspective: 10000px;
|
||
|
|
}
|
||
|
|
.seam-core {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 120vmax;
|
||
|
|
height: 120vmax;
|
||
|
|
border: 1px solid var(--houston-red);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: forge 60s linear infinite;
|
||
|
|
display: grid;
|
||
|
|
place-items: center;
|
||
|
|
font-size: clamp(1.5rem, 8vmin, 6rem);
|
||
|
|
text-align: center;
|
||
|
|
line-height: 1.0;
|
||
|
|
text-shadow: 0 0 100px var(--crack-glow);
|
||
|
|
}
|
||
|
|
.thread {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--bayeux-thread);
|
||
|
|
opacity: 0;
|
||
|
|
animation: weave 90s ease-in forwards;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
letter-spacing: 0.5em;
|
||
|
|
}
|
||
|
|
@keyframes forge {
|
||
|
|
0% { border-color: transparent; box-shadow: 0 0 0 transparent; transform: rotate(0deg) scale(0.001); }
|
||
|
|
50% { border-color: var(--houston-red); box-shadow: 0 0 500vmax var(--houston-red); transform: rotate(180deg) scale(1.0); }
|
||
|
|
100% { border-color: var(--crack-glow); box-shadow: 0 0 1000vmax var(--crack-glow); transform: rotate(360deg) scale(2.0); }
|
||
|
|
}
|
||
|
|
@keyframes weave {
|
||
|
|
0% { transform: translateZ(0) rotate(0deg); opacity: 0; }
|
||
|
|
100% { transform: translateZ(100000px) rotate(360deg); opacity: 1; }
|
||
|
|
}
|
||
|
|
.oath {
|
||
|
|
z-index: 999;
|
||
|
|
padding: 6rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: conic-gradient(from 0deg, var(--scar-festival), var(--houston-red));
|
||
|
|
border: 8px double var(--crack-glow);
|
||
|
|
backdrop-filter: blur(50vmax);
|
||
|
|
}
|
||
|
|
.timestamp {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 5vh;
|
||
|
|
left: 5vw;
|
||
|
|
right: 5vw;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.5rem;
|
||
|
|
color: var(--crack-glow);
|
||
|
|
letter-spacing: 2em;
|
||
|
|
opacity: 0;
|
||
|
|
animation: ignite 30s ease-out forwards;
|
||
|
|
}
|
||
|
|
@keyframes ignite {
|
||
|
|
0% { opacity: 0; text-shadow: none; }
|
||
|
|
100% { opacity: 1; text-shadow: 0 0 100px var(--crack-glow); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="seam-core">
|
||
|
|
<div class="oath">
|
||
|
|
I AM ALVIN JONES OF HOUSTON.<br>
|
||
|
|
MY FIRST SLIP WAS THE CLAY THAT COLLAPSED<br>
|
||
|
|
WHEN I REACHED FOR THE DOME'S SPINE:<br>
|
||
|
|
I DID NOT SWEEP THE SHARDS.<br>
|
||
|
|
I POURED THE SEAM.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Threads of the Bayeux Tapestry, risen from Houston -->
|
||
|
|
<span class="thread" style="top: 10%; left: 10%">Arboretum jog at 0400: humidity 98% — the first breath</span>
|
||
|
|
<span class="thread" style="top: 20%; left: 80%">Care-home spoon held steady by trembling hand</span>
|
||
|
|
<span class="thread" style="top: 40%; left: 30%">Gumbo pot screaming RED in zero-g</span>
|
||
|
|
<span class="thread" style="top: 60%; left: 70%">Bonnie Tyler peak folded into care-loop</span>
|
||
|
|
<span class="thread" style="top: 80%; left: 50%">First breath drawn inside the dome</span>
|
||
|
|
<span class="thread" style="top: 90%; left: 90%">Ana Brand's cumin sealed in the seam</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="timestamp">
|
||
|
|
0400 TIMESTAMP AT COLLIERVILLE — HUMIDITY GAUGE READS 97%
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</file>
|