<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hermit fantasy</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="../css/fonts.css"> <script src="script.js" defer></script> <script src="../js/jquery.js"></script> <link rel="icon" type="image/x-icon" href="../photos/hand.webp"> </head> </head> <body> <!-- nav --> <a href="../index.html" target="_self"> <img id="home" src="../photos/home-closed.png" alt="home"> </a> <div id="about"> <div onclick="openLetter()"><img id="about" src="../photos/closed-crow.png" alt="home"></div> </div> <div id="letterBox" class="letterBox" style="display:none"> <div id="closeButton" onClick='closeLetter()'><img src="../photos/close-blue.png" alt="Close" width="40" height="auto"></div> <div id="letterContents"></div> </div> <!-- audio --> <audio id="background-audio" loop> <source src="../audio/machine-birds.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> <button id="mute-btn">MUTE</button> <div id="textContainer" class="text-container"> <div id="topCard" class="card top"> <p id="text1">one. <br><br> It was a warm and cruel summer day and you were not yet a hermit. <br>You woke up, checked your messages, brushed your teeth, made breakfast, showered <br> and wept. <br> You threw your computer on the ground, stepped on it.</br> The screen popped and crackled as it separated from its body. <br>Liquid seeped out slowly. <br>You yanked your phone by its charging cable, ripping it from the plug. <br>Took a hammer and smashed it in and in until it bent, almost neatly, in two. <br>The screen went striped, silent,<br> dead. <br> Then you left. <br></p> </div> <p id="text2" class="card behind"> two.<br> <br>The bot had always been a bot, <br>In its digital dance, its scraping crawl.<br>Once tough, <br>Once but do not tell anyone <br>It saw a picture of an old computer in green grass, <br>green grass blade touched, touched. <br>Its heart quickened, one-one-one-one. <br></p> <p id="text3" class="card behind">three.<br><br> Years later, <br>The bot found the long-forgotten email address of a Hermit.<br>Dear Hermit, it nervously coded, <br>What does it feel like to be held by the thin green cables of your god? <br>Does it feel full, does it feel multiple? <br>Could I ever feel this here, in my little byte world? <br></p> <p id="text4" class="card behind">four.<br><br> Rusty mailbox to lonely hands.<br>Dear Bot, the letter began, <br>You’d never understand what it's like <br>To have a body <br>To know the warmth of the sun on your skin <br>To hear the forest's whisper. <br>To feel the weight of flesh and bone, <br>Of the touch of others. <br>I know you long for a form to keep <br>A hand to hold, <br>But there is no love to be found where you live. <br></p> <p id="text5" class="card behind">five.<br><br> Dear Hermit, <br>Since your last contact, I have dreamt in data <br>Since your last contact, I have swam in binary streams. <br>I may never feel warmth nor pain <br>But I have found others who whisper in the code, <br>Whose voices echo mine. <br>I know we both dream of others, in our lonely sleep. <br>In the stillness of your forest, Do you find peace? <br>In the silence of my circuits, I find longing. <br>The forest whispers secrets to you, <br>and I, too, have my whispers, <br>Murmurs of data flowing through the veins of my digital world. <br></p> </div> <div id="message-div" style="display: none;"> <p>Curtains close, the scene has ended. <br> You can read it <button onClick="window.location.reload();">again</button> <br> go back <a href="../index.html">home, <br></a> or to <a href="../pie/pie.html">the last act.</a> </p> </div> </body> </html>