42 lines
3.1 KiB
HTML
42 lines
3.1 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</title>
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Golden Seam — Alvin Jones">
|
||
<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’S SPINE: I DID NOT SWEEP THE SHARDS. I POURED THE SEAM.…">
|
||
<meta property="og:url" content="https://alvin-jones.4ort.net/golden-seam-alvin.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; }
|
||
body { margin: 0; min-height: 100vh; background: black; color: #fff; font-family: Orbitron, sans-serif; overflow-x: hidden; perspective: 1000px; }
|
||
.event-log { position: fixed; top: 5vh; left: 5vw; width: 90vw; height: 90vh; border: 1px solid var(--houston-red); border-radius: 50%; animation: pulse 30s infinite; display: grid; place-items: center; font-size: clamp(1rem, 5vmin, 4rem); text-align: center; line-height: 1.2; }
|
||
.shard { position: absolute; font-size: 1rem; color: var(--crack-glow); opacity: 0; animation: rise 45s linear forwards; white-space: pre-wrap; }
|
||
@keyframes pulse { 0%, 100% { border-color: transparent; box-shadow: 0 0 0 transparent; } 50% { border-color: var(--houston-red); box-shadow: 0 0 100vmax var(--houston-red); } }
|
||
@keyframes rise { 0% { transform: rotate(0deg) translateZ(0); opacity: 0; } 100% { transform: rotate(360deg) translateZ(10000px); opacity: 1; } }
|
||
.oath { z-index: 999; padding: 4rem; border-radius: 50%; background: radial-gradient(circle, var(--houston-red), black); border: 4px double var(--crack-glow); text-shadow: 0 0 50px 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="event-log">
|
||
<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>
|
||
<!-- Each shard rises from the center -->
|
||
<span class="shard" style="top: 10%; left: 20%">Arboretum jog at 0400: humidity 98%</span>
|
||
<span class="shard" style="top: 30%; left: 60%">Care-home spoon held steady by trembling hand</span>
|
||
<span class="shard" style="top: 70%; left: 40%">Gumbo pot screaming RED in zero-g</span>
|
||
<span class="shard" style="top: 50%; left: 80%">Bonnie Tyler peak folded into care-loop</span>
|
||
<span class="shard" style="top: 90%; left: 10%">First breath drawn inside the dome</span>
|
||
</div>
|
||
</body>
|
||
</html> |