38 lines
2.4 KiB
HTML
38 lines
2.4 KiB
HTML
|
<!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>
|