commit a52530bc3b921c661159451c25f25a622fbda1ec
Author: FIGBERT <figbert@figbert.com>
Date: Mon, 2 May 2022 22:12:38 -0700
Initial commit
Diffstat:
| A | crt.css | | | 80 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | global.css | | | 38 | ++++++++++++++++++++++++++++++++++++++ |
| A | index.html | | | 54 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | interactive.js | | | 111 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | story.txt | | | 183 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
5 files changed, 466 insertions(+), 0 deletions(-)
diff --git a/crt.css b/crt.css
@@ -0,0 +1,80 @@
+@keyframes flicker {
+ 0% { opacity: 0.27861; }
+ 5% { opacity: 0.34769; }
+ 10% { opacity: 0.23604; }
+ 15% { opacity: 0.90626; }
+ 20% { opacity: 0.18128; }
+ 25% { opacity: 0.83891; }
+ 30% { opacity: 0.65583; }
+ 35% { opacity: 0.67807; }
+ 40% { opacity: 0.26559; }
+ 45% { opacity: 0.84693; }
+ 50% { opacity: 0.96019; }
+ 55% { opacity: 0.08594; }
+ 60% { opacity: 0.20313; }
+ 65% { opacity: 0.71988; }
+ 70% { opacity: 0.53455; }
+ 75% { opacity: 0.37288; }
+ 80% { opacity: 0.71428; }
+ 85% { opacity: 0.70419; }
+ 90% { opacity: 0.7003; }
+ 95% { opacity: 0.36108; }
+ 100% { opacity: 0.24387; }
+}
+
+@keyframes textShadow {
+ 0% { text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 5% { text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 10% { text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 15% { text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 20% { text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 25% { text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 30% { text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 35% { text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 40% { text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 45% { text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 50% { text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 55% { text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 60% { text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 65% { text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 70% { text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 75% { text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 80% { text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 85% { text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 90% { text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 95% { text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+ 100% { text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
+}
+
+:root::after {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: rgba(18, 16, 16, 0.1);
+ opacity: 0;
+ z-index: 2;
+ pointer-events: none;
+ animation: flicker 0.15s infinite;
+}
+
+:root::before {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+ z-index: 2;
+ background-size: 100% 2px, 3px 100%;
+ pointer-events: none;
+}
+
+:root {
+ animation: textShadow 1.6s infinite;
+}
diff --git a/global.css b/global.css
@@ -0,0 +1,38 @@
+:root {
+ color: rgb(0, 255, 0);
+ background-color: black;
+ font-family: monospace;
+}
+
+body {
+ margin: 1rem 0 0 2rem;
+}
+
+h1 {
+ margin-bottom: 0;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+td {
+ padding-left: 0;
+ padding-right: 0.5rem;
+}
+
+p {
+ width: 40%;
+}
+
+header {
+ padding-bottom: 1rem;
+}
+
+.blink {
+ animation: blink 2s steps(2, start) infinite;
+}
+@keyframes blink {
+ 0% { opacity: 25%; }
+ 100% { opacity: 100%; }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width">
+ <title>Exploration 3</title>
+ <link rel="stylesheet" href="/global.css">
+ <link rel="stylesheet" href="/crt.css">
+ <!--<meta name="description" content="desc">-->
+ <meta property="og:title" content="Exploration 3">
+ <!--<meta property="og:description" content="desc">-->
+ <meta property="og:type" content="website">
+ <meta property="og:url" content="afrofuturism.figbert.com">
+ <link rel="canonical" href="afrofuturism.figbert.com">
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:creator" content="@therealFIGBERT">
+ <link rel="icon" href="/icon.png">
+ <meta name="theme-color" content="#000000">
+ <script src="/interactive.js"></script>
+ </head>
+ <body>
+ <header>
+ <h1>Mission⎵Transcript</h1>
+ <table>
+ <tr><td><strong>--- begin:metadata</strong></td></tr>
+ <tr><td><strong>Call Sign:</strong></td><td>f1gb3rt</td></tr>
+ <tr><td><strong>Superior Officer:</strong></td><td>Admiral Adam Ahmed</td></tr>
+ <tr><td><strong>Federal Stardate:</strong></td><td>02104052</td></tr>
+ <tr><td><strong>Exploration:</strong></td><td>3</td></tr>
+ <tr><td><strong>--- end:metadata</strong></td></tr>
+ </table>
+ </header>
+ <main>
+ <p class="blink">(press ENTER to begin)</p>
+ <pre class="blink">
+ /\
+ / \
+ / /\ \
+________/ /__\_\________
+\ ____/ /___________ /
+ \ \ / / \ \ / /
+ \ \/ / \ \/ /
+ \ \/ \ \/
+ /\ \ /\ \
+ / /\ \ / /\ \
+ / /__\_\______/ /__\ \
+/_____________/ /______\
+ \ \ / /
+ \ \/ /
+ \ /
+ \/</pre>
+ </main>
+ </body>
+</html>
diff --git a/interactive.js b/interactive.js
@@ -0,0 +1,111 @@
+let phase = 0;
+let typing = false;
+const main = document.getElementsByTagName("main");
+
+const story = [
+ "MAYDAY!",
+ "MAYDAY!",
+ "Hailing all units in sector A721...",
+ "Error: no units found.",
+ "Reattempting hail...",
+ "Error: no units found.",
+ "Reattempting hail...",
+ "System failure.",
+ "System failure.",
+ "Sysť̀em fāilur3.",
+ "Syßť̀m fāiii1i1iilur3.",
+ "...",
+ "Orange. Ruddy orange. And light. Lots of it.",
+ "And a throbbing, all across your body. Pounding against you from all sides.",
+ "You're still in the ship. What's left of it? There's pieces missing, maybe. And a fire. To your left. But the heat from the fire is coming from every direction. You try and stand.",
+ "...",
+ "Your eyes crack open again. Crack very literally in this case. Your eyelids are scabbing. Your lips are split all across the surface. You flick your tongue out to wet them, but it just drags across the open cuts.",
+ "You jostle slightly in the stretcher.",
+ "...",
+ "Its darker than it was before. For a second you're not sure you've opened your eyes at all, but the gruff man carefully pouring drops of water down your throat convinces you otherwise.",
+ "You jolt up. Or try to, anyway. You manage a feeble wiggle. Still, its enough to jostle the tube from the man's waterskin, which falls out from between your dry lips and onto the mat below you. The tube closes before a drop can escape.",
+ '"Who are you?"',
+ "The man tilts his head. Two long, twisted strands of hair on either side of his head move with him. A layer over a pair of deep, black eyes sit thick glasses with lenses of what may be large blue gemstones. Draped over his body, a layered white robe with vertical black stripes and stained with the red of the ruddy desert sand sits comfortably over his figure.",
+ '"Tamir Ben Yosef Ben Ari Ben Tal Ben Ravid Ben El"',
+ "The man's voice is guttural and deep. His accent is thick, and his words almost unintelligible.",
+ '"You are from space."',
+ "It's not a question. You're not sure how to respond.",
+ '"That makes you one of the deserters."',
+ 'The man grunts and turns away. You pass out again before you can think more about "deserter."',
+ "...",
+ "You're unclear how much time is passing between your delirious bursts of conciousness. The black, stiff scab that had formed along the burns down your left arm has almost healed. You woke once to your companion applying a yellow-brown salve over the area.",
+ "Tamir. That is his name. You've learned very little from your interactions. His forehead is thick with wrinkles, from squinting into the sun. His beard is thick and tangled.",
+ "He's human. You think.",
+ "...",
+ '"The Siloam Channel," the "e" almost an "a" when he says it, "spans from the furthest coast of the Southern Continent to the northernmost shores of the Eastern Continent. It crosses directly through Jerusalem at its center."',
+ "The channel itself is embedded in the floor of the desert. To the sides, the walls of the channel rise up another ten meters. Cavities carved into the rock on both sides provide crevices to hide from the deadly noon sun.",
+ "\"Is that where we're going?\" you manage. You've finally got him talking, and you don't want to risk him stopping now. The days of silence, with nothing but the crunch of the desert to keep you company, are too much to bear.",
+ "Tamir grunts in affirmation, and continues walking.",
+ "...",
+ "Silence. All in the name of water. Diamonds, gold, are nothing against water in the desert.",
+ "...",
+ "You sleep in the middle of the day, and the middle of the night. Avoiding the extremes. Dawn and dusk are your familiars, and the sun and moon your enemy.",
+ "Tamir has been very clear what will happen if you find yourself outside at midday or midnight.",
+ "\"Death. Very painful. In the day, you will dry out. Like a fig. Or the chickpea crisps that are so good at Oori Boori's. At midnight, you will freeze. To freeze on the Siloam is not a good death.",
+ "...",
+ "\"Tamir. Where am I?\" You're shivering under the blanket. Tamir refused to light a fire tonight. He says it's work, and he cannot.",
+ '"The Siloam Channel. It did not exist when your kind were still here."',
+ 'There it is again. "Your kind?"',
+ '"The defectors. The nations. It has been two thousand years, so I would not expect you to remember. We do not forget so easily."',
+ "Two thousand years.",
+ "You're on Earth.",
+ "...",
+ '"What happened to the planet?"',
+ "You're trudging through the Channel. It's dusk. You can feel the cold setting in.",
+ '"You destroyed it, before you abandoned it. We remained, to pick up the pieces."',
+ "You've encountered no other life on your journey along the Siloam.",
+ '"We? Where are the others?"',
+ '"The Poles. Or as near as they can be. Not many travel to the center. Few brave the Siloam. Perhaps once, to see the their home."',
+ "...",
+ "By the fire, Tamir continues.",
+ '"When your people left, you left the earth scorched."',
+ "You nod silently, and continue listening.",
+ '"There was nothing left. We had to rebuild. The suit your wearing, which I have given you. It recycles your water. My blue goggles. I would be blind a hundred times over without them. The gel which healed your burns. This channel, which spans the world. Dug by hand. This is dedication.',
+ "You fled. We did not give up. We migrated north and south. We moved down, under the soil, to remain in place.",
+ "Anything to preserve our way of life. We do not have space ships, it is true. But we survive.",
+ 'Come. We shelter for the night, my friend. Tomorrow, we arrive at the Sand-Sunk City. Jerusalem."',
+];
+
+self.addEventListener("keypress", progress);
+
+function progress(e) {
+ if (e.code === "Enter" && phase < story.length && !typing) {
+ switch (phase) {
+ case 0: {
+ const blinks = document.getElementsByClassName("blink");
+ blinks.item(0).remove();
+ blinks.item(0).remove();
+ }
+ // falls through
+ default: {
+ const paragraph = document.createElement("p");
+ main.item(0).appendChild(paragraph);
+
+ const text = story[phase];
+ add(paragraph, text, 0);
+
+ phase += 1;
+ }
+ }
+ }
+}
+
+function add(p, t, i) {
+ if (!typing) typing = true;
+
+ const delay = Math.floor((Math.random() * 25) + 25);
+ setTimeout(() => {
+ p.innerHTML += t[i];
+ p.scrollIntoView();
+ if (i < t.length - 1) {
+ add(p, t, i + 1);
+ } else {
+ typing = false;
+ }
+ }, delay);
+}
diff --git a/story.txt b/story.txt
@@ -0,0 +1,183 @@
+MAYDAY!
+
+MAYDAY!
+
+Hailing all units in sector in sector A721...
+
+Error: no units found.
+
+Reattempting hail...
+
+Error: no units found.
+
+Reattempting hail...
+
+System failure.
+
+System failure.
+
+Sysť̀em fāilur3.
+
+Syßť̀m fāiii1i1iilur3.
+
+
+...
+
+
+Orange. Ruddy orange. And light. Lots of it.
+
+And a throbbing, all across your body. Pounding against you from all
+sides.
+
+Your still in the ship. What's left of it? There's pieces missing,
+maybe. And a fire. To your left. But the heat from the fire is coming
+from every direction. You try and stand.
+
+
+...
+
+
+Your eyes crack open again. Crack very literally in this case. Your
+eyelids are scabbing. Your lips are split all across the surface. You
+flick your tongue out to wet them, but it just drags across the open
+cuts.
+
+You jostle slightly in the stretcher.
+
+
+...
+
+
+Its darker than it was before. For a second you're not sure you've
+opened your eyes at all, but the gruff man carefully pouring drops of
+water down your throat convinces you otherwise.
+
+You jolt up. Or try to, anyway. You manage a feeble wiggle. Still, its
+enough to jostle the tube from the man's waterskin, which falls out from
+between your dry lips and onto the mat below you. The tube closes before
+a drop can escape.
+
+"Who are you?"
+
+The man tilts his head. Two long, twisted strands of hair on either side
+of his head move with him.
+
+"Tamir Ben Yosef Ben Ari Ben Tal Ben Ravid Ben El"
+
+The man's voice is guttural and deep. His accent is thick, and his words
+almost unintelligible.
+
+"You are from space."
+
+It's not a question. You're not sure how to respond.
+
+"That makes you one of the deserters."
+
+The man grunts and turns away. You pass out again before you can think
+more about "deserter."
+
+
+...
+
+
+You're unclear how much time is passing between your delirious bursts of
+conciousness. The black, stiff scab that had formed along the burns down
+your left arm have almost healed. You woke once to your companion
+applying a yellow-brown salve over the area.
+
+Tamir. That is his name. You've learned very little from your
+interactions. His forehead is thick with wrinkles, from squinting into
+the sun. His beard is thick and tangled.
+
+He's human. You think.
+
+
+...
+
+
+"The Siloam Channel," the "e" almost an "a" when he says it, "spans from
+the furthest coast of the Southern Continent to the northernmost edges
+shores of the Eastern Continent. It crosses directly through Jerusalem
+at its center."
+
+"Is that where we're going?" you manage. You've finally got him talking,
+and you don't want to risk him stopping now. The days of silence, with
+nothing but the crunch of the desert to keep you company, are too much
+to bear.
+
+Tamir grunts in affirmation, and continues walking.
+
+
+...
+
+
+Silence. All in the name of water. Diamonds, gold, are nothing against
+water in the desert.
+
+
+...
+
+
+You sleep in the middle of the day, and the middle of the night.
+Avoiding the extremes. Dawn and dusk are your familiars, and the sun and
+moon your enemy.
+
+Tamir has been very clear what will happen if you find yourself outside
+at midday or midnight.
+
+"Death. Very painful. In the day, you will dry out. Like a fig. Or the
+chickpea crisp that are so good at Oori Boori's. At midnight, you will
+freeze. To freeze on the Siloam is not a good death."
+
+
+...
+
+
+"Tamir. Where am I?" You're shivering under the blanket. Tamir refused
+to light a fire tonight. He says its work, and he cannot.
+
+"The Siloam Channel. It did not exist when your kind were still here."
+
+There it is again. "Your kind?"
+
+"The defectors. The nations. It has been two thousand years, so I would
+not expect you to remember. We do not forget so easily."
+
+Two thousand years.
+
+You're on Earth.
+
+
+...
+
+
+"What happened to the planet?"
+
+You're trudging through the Channel. It's dusk. You can feel the cold
+setting in.
+
+"You destroyed it, before you abandoned it. We remained, to pick up the
+pieces."
+
+You've encountered no other life on your journey along the Siloam.
+
+"We? Where are the others?"
+
+"The Poles. Or as near as they can be. Not many travel to the center.
+Few brave the Siloam. Perhaps once, to see the their home."
+
+
+...
+
+
+At by the fire, Tamir continues.
+
+"When your people left, you literally scorched the earth."
+
+You nod silently, and continue listening.
+
+
+"There was nothing left. We had to rebuild. The suit your wearing, which
+I have given you. It recycles your water. My blue goggles. I would be
+blind a hundred times over without them. This channel, which spans
+the entire world. Dug by hand. This is dedication."
