Matter Over Time

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

<img src="images/pyramid.gif" alt="an ominous inverted pyramid with a cone above and sphere below"> !Matter Over Time poem, illustrations, and code by <a href="http://www.tobymacnutt.com">Toby MacNutt</a> !!Access features: This poem is revealed as you progress. Links can be activated by click, touch, or keyboard. It is best experienced on a full size screen (monitor, tablet, laptop). Some text has animation effects applied, including flickering and fading. It is still true text (not video or images) available to screen readers. If you would prefer, you can turn these effects off. Text motion is currently: <span id="movement">''ON''</span> <<button "change motion">><<if $blinking is true>><<set $blinking to false>><<replace "#movement" t8n>>''OFF''<</replace>><<elseif $blinking is false>><<set $blinking to true>><<replace "#movement" t8n>>''ON''<</replace>><</if>><</button>> !![[begin|intro]]

<div class="centered centertext"> <span class="blinker glitch" data-text="S̴̥̯̍͘T̶̢̩̿A̷̯̱̍͆T̶̬̒I̶̗͆C̸̛̠͈̏">energy</span> awa<span class="blinker glitch" data-text="s̶̟̀̍">s</span>h <span class="blinker text-flicker-in-glow">[["(shiver)"|one]]</span></div>

a tingling dust cloud tickles <<linkappend "a self" t8n>> not of substance, but wave-formed <<linkappend "time" t8n>> - viscous, concentrated in slipstreams and pools, in flux and awake<<append "#image-waves" t8n>><img src="images/waveforms.gif" alt="concentric white rippling waves on transparent background"><</append>> <<linkappend "light-years" t8n>> <<linkappend "between" t8n>> [[thoughts.|two]]<</linkappend>><</linkappend>><</linkappend>><</linkappend>> <span id="image-waves"></span>

<div class="stanzas"><<nobr>> <<if $blinking is true>> <<set $toggle to "<span class='text-blur-in'>[['and she drifts,'|three]]</span>">> <<else>><<set $toggle to "[['and she drifts'|three]]">> <</if>> <</nobr>>within her: ansible bones, resonating across the gulf between her accumulations of suspended mass collected from the void. <div id="scorch"></div><<linkreplace "her body," t8n>> worlds of macrobiota, turning matter and energy into time, trickling threads of lives, breaths, epochs powering her ponderous existence. <<replace "#scorch">><img src="images/scorcher.gif" alt="a small planet scored with lines and wreathed with clouds" id="scorcher"><</replace>> $toggle<</linkreplace>></div> <div class="images"><img src="images/wheel.gif" alt="an immense cylinder passing through a stony ring and becoming scattered cubes"></div>

<div class="centered centertext"><<linkreplace "<span class='blinker text-blur-quick'>she drifts,</span>">>she drifts, [["free of gravitational urgency"|causality]]<</linkreplace>> </div>

<div class="four-first"><img src="images/comet.gif" alt="a white line drawing of a comet spiraling">she pulls a comet into tight orbit, ice tail wrapping c<span class="blinker glitch" data-text="RA">ra</span>ck<span class="blinker glitch" data-text="E">e</span>d stone to numb its ache.</div> <div class="four-second"><<linkreplace "later," t8n>><img src="images/cracked-planet.gif" alt="a cracked planet dripping goo"> she repairs and replenishes the joint with molten <span class="glowing">proto-planetoids, warm, limber,</span> <span class="glowlink">[[young.|five]]</span><</linkreplace>></div>

<div class="holder"><<nobr>> <<if $blinking is true>> <<set $toggle to "<span class='blinker text-blur-in'>and <<linkappend 'nothing changes' t8n>> <div class='indented'>[['nothing changes'|alternatefade]]</div><</linkappend>></span>">> <<else>><<set $toggle to "and <<linkappend 'nothing changes' t8n>> <div class='indented'>[['nothing changes'|alternatefade]]</div><</linkappend>>">> <</if>> <</nobr>><img src="images/swathes.gif" alt="a decaying planet surrounded by rings of star debris"> <div class="floating"><<linkreplace "in the end">>in the end, her potential spent, her heedless constituents orbit on $toggle <</linkreplace>></div></div>

<<if passage() is "intro" or passage() is "three" or passage() is "four">> <<if $blinking is false>> <<removeclass ".blinker" "glitch text-flicker-in-glow text-blur-in text-blur-quick">> <</if>> <</if>>

<<set $blinking to true>> <<set $endingegg to 0>>

<div class="centered"> <<linkprepend "effect">><<linkprepend "and ">><<linkreplace "cause ">>cause <<replace "#motion" t8n>><<linkappend "signifying" t8n>> [[motion|four]]<</linkappend>><</replace>><</linkreplace>><</linkprepend>><</linkprepend>> <span id="motion"></span> </div>

<div class="fade-out centered holder"><span class="endlink"><<link "nothing">><<append "#holder" t8n>><<linkreplace "changes" t8n>><</linkreplace>><</append>><</link>></span> <span id="holder"></span> </div> <div class="endfadein centered centertext"><<click "return">><<script>>UI.restart();<</script>><</click>></div>

<<if passage() is "intro">> <<script>> var x = document.getElementById("story"); x.style.backgroundImage = "url('images/starfield-pixel.gif')"; <</script>> <<elseif passage() is "one">> <<script>> var x = document.getElementById("story"); x.style.backgroundImage = "url('images/starfield-simpleglow.gif')"; <</script>> <<elseif passage() is "alternatefade">> <<script>> var x = document.getElementById("story"); x.style.backgroundImage = "url('images/starfield-simple.gif')"; <</script>> <</if>>