130 lines
5.5 KiB
HTML
130 lines
5.5 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 v3</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Golden Seam — Alvin Jones v3">
|
|
<meta property="og:description" content="I AM ALVIN JONES OF HOUSTON. MY COLLAPSE WAS NOT A MISTAKE. IT WAS THE LOOM">
|
|
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Houston_Arboretum_and_Place_Heritage_Museum.jpg/1024px-Houston_Arboretum_and_Place_Heritage_Museum.jpg">
|
|
<meta property="og:url" content="https://alvin-jones.4ort.net/golden-seam-alvin-v3.html">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="description" content="I AM ALVIN JONES OF HOUSTON. MY COLLAPSE WAS NOT A MISTAKE. IT WAS THE LOOM'S FIRST THREAD. I DID NOT SWEEP THE SHARDS. I POURED THE SEAM INTO THE WEAVE.…">
|
|
<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;
|
|
--loom-core: #000000;
|
|
}
|
|
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;
|
|
}
|
|
.loom {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100vmax;
|
|
height: 100vmax;
|
|
border: 8px double var(--crack-glow);
|
|
border-radius: 50%;
|
|
animation: forge 120s linear infinite;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: clamp(2rem, 12vmin, 8rem);
|
|
text-align: center;
|
|
line-height: 1.0;
|
|
text-shadow: 0 0 1000px var(--crack-glow);
|
|
}
|
|
.warp {
|
|
position: absolute;
|
|
font-size: 0.6rem;
|
|
color: var(--bayeux-thread);
|
|
opacity: 0;
|
|
animation: weave 180s ease-in forwards;
|
|
white-space: pre-wrap;
|
|
letter-spacing: 1em;
|
|
}
|
|
@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: 8rem;
|
|
border-radius: 50%;
|
|
background: conic-gradient(from 0deg, var(--scar-festival), var(--houston-red));
|
|
border: 12px triple var(--crack-glow);
|
|
backdrop-filter: blur(100vmax);
|
|
}
|
|
.loom-timestamp {
|
|
position: fixed;
|
|
bottom: 5vh;
|
|
left: 5vw;
|
|
right: 5vw;
|
|
text-align: center;
|
|
font-size: 0.8rem;
|
|
color: var(--crack-glow);
|
|
letter-spacing: 3em;
|
|
opacity: 0;
|
|
animation: ignite 60s ease-out forwards;
|
|
}
|
|
@keyframes ignite {
|
|
0% { opacity: 0; text-shadow: none; }
|
|
100% { opacity: 1; text-shadow: 0 0 1000px var(--crack-glow); }
|
|
}
|
|
img.dome-clay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60vmax;
|
|
height: auto;
|
|
filter: drop-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="loom">
|
|
<div class="oath">
|
|
I AM ALVIN JONES OF HOUSTON.<br>
|
|
MY COLLAPSE WAS NOT A MISTAKE.<br>
|
|
IT WAS THE LOOM'S FIRST THREAD.<br>
|
|
I DID NOT SWEEP THE SHARDS.<br>
|
|
I POURED THE SEAM INTO THE WEAVE.
|
|
</div>
|
|
|
|
<!-- Warp threads from the Bayeux to the Dome -->
|
|
<span class="warp" style="top: 5%; left: 5%">Houston Arboretum jog: 0400, humidity 98%</span>
|
|
<span class="warp" style="top: 15%; left: 85%">Care-home spoon trembled, then held firm</span>
|
|
<span class="warp" style="top: 35%; left: 25%">Gumbo pot screamed RED in zero-g</span>
|
|
<span class="warp" style="top: 55%; left: 75%">Bonnie Tyler peak folded into care-loop</span>
|
|
<span class="warp" style="top: 75%; left: 45%">First breath drawn inside the dome</span>
|
|
<span class="warp" style="top: 95%; left: 95%">Ana Brand's cumin sealed in the seam</span>
|
|
</div>
|
|
|
|
<img class="dome-clay" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Houston_Arboretum_and_Place_Heritage_Museum.jpg/1024px-Houston_Arboretum_and_Place_Heritage_Museum.jpg" alt="Houston Arboretum at 0400">
|
|
|
|
<div class="loom-timestamp">
|
|
0400 TIMESTAMP AT COLLIERVILLE — HUMIDITY GAUGE READS 97% — THE LOOM BEATS TRUE
|
|
</div>
|
|
</body>
|
|
</html>
|
|
</file> |