<<cacheaudio "bgm" "https://eriksimpson.sites.grinnell.edu/Multimedia/sound-effect-you-are-my-sunshine-music-box-263230.mp3">>
<<cacheaudio "mother-static" "https://eriksimpson.sites.grinnell.edu/Multimedia/c5_mother-singing-80947.wav">>
<<type 50ms start 2s>>I am the writer. Well, all my thoughts just flow out.<</type>>
<<type 45ms>>I told you that right? They just flow in a stream.<</type>>
<<type 44ms>>They just flow and flow and my fingers struggle to keep up and I can just see the words flying onto the paper and they becoming meaning and becoming life and becoming real and becoming into existence.<</type>>
<<type 43ms>>I am the creator of life. You know. You know how that happens. It takes some time, but once I'm there, in my euphoria, the words come faster than the typewriter can keep up.<</type>>
You know writing is just the process of chaff, separating the strong from the weak. I ain't weak. The weak, they just don't deserve it. They should just disappear. Only the best words, the best thoughts, should be preserved.
(That's how it works. That's how the world works. Shit, reality's cruel.
I read. I read and read. You know how I am. I embrace reality. You call me a realist? You didn't say that? Well, what the hell. I do. I call myself a realist.
(I see the world how it is. How it's meant to be. This hellhole right now, well that's cause of the weak. They just don't get it.
You know, I read the classics. I can't get enough of them. They got the truth. They captured that shard of reality.
[tell tale heart starts playing out underneath, blurred].
And I will read and read. That's how good writers work, they just read and read, and stuff our heads with all the thoughts we can.<script>
setTimeout(function() {
document.body.classList.add("flashback");
}, 10); // 10000 milliseconds (10 seconds)
</script>
What.<div id="layer-container">
<span id="text1"><<type 20ms>>I ain't weak. The weak, they just don't deserve it. They should just disappear. Only the best words, the best thoughts, should be preserved. I read. I read and read. You know how I am. I embrace reality. You call me a realist? You didn't say that? Well, what the hell. I do. I call myself a realist. You know, I read the classics. I can't get enough of them. They got the truth. They captured that shard of reality. <</type>></span>
<span id="text2"><<type 42ms>>That's how it works. That's how the world works. Shit, reality's cruel. I see the world how it is. How it's meant to be. This hellhole right now, well that's cause of the weak. They just don't get it. And I will read and read. [[What can you do?]]That's how good writers work, they just read and read, and stuff our heads with all the thoughts we can.
<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 26px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
[tell tale heart starts playing out underneath, blurred].
<div id="layer-container">
<span id="text1"><<type 20ms>>Told you, I read a lot. Don't doubt me. I know I read a lot. You see me reading all day. I was gonna say, if they find a way to USB-C my fucking brain, I'd be the first in line.
<</type>></span>
<span id="text2"><<type 42ms>>Just re-wire it all. Just pump all that into my head, direct connection.
<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 26px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text1"><<type 40ms start 5s>>I just don't have enough damn time to do anything. Last night, Georgie yelled at me cause I wasn't focusing on the road. I don't even remember what was goi- right, I was listening to the audiobook. See, you told me that audiobooks would be a good idea. Right. Audiobooks. I love to read, you know that. And when I read, I just can't stop.<</type>></span>
<span id="text2"><<type 42ms>>I can't focus. Dammit. I can't [[remember|Remember]].<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 26px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text1"><<type 20ms>>I would write and write and write, my words, thoughts, my little ideas. Do you remember that journal? What the hell did I even write about? Damn, it was pretty sweet huh. I really did feel like myself. That was so pure. The purest of thought. My thought, it was just so organic.<</type>></span>
<span id="text2"><<type 42ms>>That journal during middle school? It was like some kiddish crap. It was just me. It was just me and my thoughts. That was me, wasn't it? That was truly truly me. I showed it to Mother. I showed it to her. God. I can't remember Mother's voice. [[Remember|Voice]]. <</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 26.5px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<<audio mother-static play loop>>
<div id="layer-container">
<span id="text1"><<type 48ms>>What did she sound like? Mother? Who were you?<</type>></span>
<span id="text2"><<type 0.2s>>God. I can't... remember. I can't... listen. <</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 100px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="glitch-text"><<type 25ms>>I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. Remember what? I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. Why can't I remember? I can't remember. It hurts. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. Stop. Remembering. I can't remember. Please. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. Someone stop it. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. Remember what? I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember. I can't remember.<</type>></div>
<style>
#glitch-text {
font-size: 28px;
position: relative;
color: white;
filter: blur(1px);
text-shadow: 2px 2px red, -2px -2px blue;
animation: glitch 1s infinite alternate;
}
@keyframes glitch {
0% { transform: translate(0px, 0px); }
25% { transform: translate(1px, -1px); }
50% { transform: translate(-1px, 1px); }
75% { transform: translate(1px, 1px); }
100% { transform: translate(-1px, -1px); }
}
</style>
<<timed 60s>>
<div id="credits">
<b><i>[[Remember...|Knock]]</i></b>
</div>
<</timed>>
<style>
#credits {
text-align: center;
font-size: 18px;
color: grey;
margin-top: 50px;
opacity: 0;
animation: fadeIn 5s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<<audio bgm play loop>>
<<audio mother-static play loop>><<audio mother-static stop>>
<div id="layer-container">
<span id="text1"><<type 60ms start 7s>>Who's there? Who the hell is there? Look there. Don't you see the No Soliciting sign?<</type>></span>
<span id="text2"><<type 0.1s>> Someone's knocking at the door, dammit. I- I had the No Soliciting signs set up, right? Who is this kid? His sneakers are too clean. Something about that bothers me.<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 100px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text3"><<type 49ms>>A boy scout. Well, I do love your cookies. Or was that the girls who did that. What the hell do you guys do, then? Oh you want your ball. Benjamin kicked it over? What were-- were you guys doing anyway?
I don't even know how that could've happened. Damn kids, can't keep their damn balls on their side of the fence. Well. I just need to [[remember|inside]] to post that-- that sign up next time?<</type>></span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text3 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
</style>
<div id="layer-container">
<span id="text1"><<type 35ms start 3s>>Just wait out here. I'll grab it. Don't let that happen again, okay.<</type>></span>
<span id="text2"><<type 45ms>>I turn back and shove myself past the stacks of boxes. Loose clothes, antiques. Father's wardrobe is in the way. I push past it. Dammit, my ankle.
I ought to throw those uniforms away. The municipal drop off times, they keep changing. When does the garbage truck come? I can't seem to [[remember]].
<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 100px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text1"><<type 35ms>>I trudge through the house. Where are my slippers? I can't go outside barefooted. Mother would kill me if she saw that.<</type>></span>
<span id="text2"><<type 45ms>>The sliding door is lopsided. That door handle is crooked. I am going to fix that sometime. If I [[remember|backyard]].
<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 100px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text1"><<type 45ms>>I step out onto the cracked brick patio. Patches of crabgrass and dandelions spread all over the remainder of the lawn. I ought take care of it sometime. I guess there's not much grass left at all. These kids. They're all so damn spoiled now. There's no sense of respect, there's nothing. Disgraceful.<</type>></span>
<span id="text2"><<type 85ms>>
Don't you [[remember|flashback]] what you were like as a kid?
<</type>>
</span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 300;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<div id="layer-container">
<span id="text1"><<type 25ms start 2s>>No, I wasn't like that. I wasn't. I was-<</type>></span>
<span id="text2"><<type 0.1s>>Do you remember how it used to be?<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 15ms>>No, I- I can- I was never-<</type>></span>
<span id="text2"><<type 0.1s>>You were like that too.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 15ms>>Stop- you're lying, I never, I never would've-<</type>></span>
<span id="text2"><<type 0.1s>>You were. You did.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 75ms>>I can't- can't-- I can't take it. No. NO, NO.<</type>></span>
<span id="text2"><<type 0.1s>>Do you remember?
Remember?
Remember?
[[Remember...]]<</type>></span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
margin-bottom: 40px;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 30px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<<timed 1s>>
<<audio bgm play>>
<</timed>>
<script>
setTimeout(function() {
document.body.classList.add("flashback");
}, 10); // 10000 milliseconds (10 seconds)
</script>
<div id="layer-container">
<span id="text1"><<type 25ms>>I'm writing. I have a short story. It's a series of pages. I string them together with some twine, through the holes I've punched in the corners. I think it's better than a scrapbook. It's like a collection, my own words, my first piece.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms>>Look, look at my novel. My title page has our cat on it.<</type>></span>
<span id="text2"><<type 0.1s>>Mother's back is turned.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms>>Father heightens his voice.<</type>></span>
<span id="text2"><<type 0.1s>>One of my pages rips, falls to the ground.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms>>I step forward and pick it up from the ground.<</type>></span>
<span id="text2"><<type 0.1s>>Mother with the gun, Father falling forwa-<</type>></span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
margin-bottom: 40px;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: black;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 30px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<<timed 30s>>
<div id="credits">
<b><i>[[Remember...|back]]</i></b>
</div>
<</timed>>
<style>
#credits {
text-align: center;
font-size: 18px;
color: grey;
margin-top: 50px;
opacity: 0;
animation: fadeIn 5s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<script>
setTimeout(function() {
document.body.classList.add("heartbeat-bg");
}, 10); // 10000 milliseconds (10 seconds)
</script>
<div id="layer-container">
<span id="text1"><<type 75ms start 8s>>I'm sprawled on the weeds. Where's my watch? I can't remember. <</type>></span>
</div>
<div id="layer-container">
<span id="text2"><<type 90ms start 2s>>How long has it been? Twenty, thirty minutes?<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms start 4s>>I'm struggling to breathe.<</type>></span>
</div>
<div id="layer-container">
<span id="text2"><<type 90ms start 2s>>Breathe. Take a breath! Breathe, dammit.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms start 4s>>I had his ball. I was clutching it, I know! I felt my nails digging into it. I swear! Where is it?<</type>></span>
</div>
<div id="layer-container">
<span id="text2"><<type 0.1s start 2s>>I can't see. It's not here. My palms-- they-- they're bleeding.<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 35ms start 3s>>Try to remember what happened. I was at the patio-- the patio, right? I was- the boy.<</type>></span>
</div>
<div id="layer-container">
<span id="text2"><<type 80ms start 3s>>I was at the front door. He was-- he was knocking! The boy. Remember, remember!<</type>></span>
</div>
<div id="layer-container">
<span id="text1"><<type 33ms start 3s>>Go back out to backyard. The ball isn't there. Check the clock--only 2 minutes have passed? Where is the boy? Check the door. <</type>></span>
</div>
<div id="layer-container">
<span id="text2"><<type 1s start 3s>>There was no boy.<</type>></span>
</div>
<style>
#layer-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
#text1 {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 26px;
opacity: 1;
}
#text2 {
position: absolute;
top: 30px;
left: 5px;
color: grey;
font-size: 25px;
opacity: 0.9;
filter: blur(1px);
}
</style>
<<timed 91s>>
<div id="credits">
<b><i>Remember</i></b>, by David Nguyen
ENG240 Digital Methods in English, Spring 2025
[[Acknowledgements]]
Music: <i><a href="https://pixabay.com/" target="_blank">Pixabay.com</a></i>
</div>
<</timed>>
<style>
#credits {
color: grey;
margin-top: 50px;
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<<type 20ms start 2s>> I would like to sincerely thank the classmates of our Spring 2025 ENG 240 class who have assisted and encouraged me throughout the electronic literature project. I greatly appreciated the warm, collaborative, atmosphere in that class, and looked forward to the class each morning. <</type>>
<<type 20ms start 2s>> I’d especially like to thank Alex Bond and Isaiah Schlimm for sharing and helping me with my Twine code, and for inspiring me with their projects. I wish to thank Nicholas Lampietti for his support with setting up audio elements within Twine. Additionally, I want to thank Amy Kan, Ella Tobben, and Emma Maloney for their advice on my story elements and their feedback on my prototypes. <</type>>
<<type 20ms start 2s>> Finally, I’m extremely grateful to Professor Erik Simpson, who guided our class through the process of creating and designing our projects. Professor Simpson was very supportive and willing to help with even the most mundane and silly code errors and problems. I also greatly appreciate his help with the dark arts of uploading MP3 files online via the ancient and mystical File Transfer Protocol. Most importantly, Professor Simpson cultivated our thoughts and nurtured fledging ideas into grander ones, for which I am very thankful. Many of my ideas would’ve never flown without his help! <</type>>
<<script>>
function EmbedTwineUpdateHeight(){
var passage = document.getElementsByTagName("tw-passage")[0];
if (passage === undefined){//SugarCube
passage = document.getElementById("passages");
}
var newHeight = passage.offsetHeight;
if(newHeight<500){newHeight=500;}
window.parent.postMessage(["setHeight", newHeight], "*");
console.log(newHeight);
}
setTimeout(EmbedTwineUpdateHeight, 50);
<</script>>