• Rewind
  • Restart
  • Bookmark
  • This story was created with Twine and is powered by TiddlyWiki
<html>\n<style>body { background:#000000; }</style>\n</html>\n<div id="wrapper">\n<div class="box box0"></div></div>\n\n<<timedgoto "TV" 128s>>
<html>\n<style>body { background:#be0c28; }</style>\n</html>\n<div id="wrapper">\n<div class="b0"></div></div>\n<<timedgoto "B1" 2s>>\n\n/% Welcome to the behind-the-scenes of the most boring art Twine of all-time. %/
<html>\n<style>body { background:#000000; }</style>\n</html>\n\n<<timedgoto "end" 5s>>
jquery:on\nhash:off\nbookmark:off\nmodernizr:off\nundo:on\nobfuscate:off\nexitprompt:off\nblankcss:on\n
<html>\n<style>body { background:#000000; }</style>\n</html>\n<div id="wrapper">\n<div class="tv tv0"></div></div>\n\n<<timedgoto "off" 0.5s>>
#wrapper:active {\n animation-name: shake;\n animation-duration: 100ms;\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n@keyframes shake {\n 2% {\n transform: translate(0px, 0) rotate(0); }\n 4% {\n transform: translate(4px, 0) rotate(0); }\n 6% {\n transform: translate(-5px, 0) rotate(0); }\n 8% {\n transform: translate(8px, 0) rotate(0); }\n 10% {\n transform: translate(3px, 0) rotate(0); }\n 12% {\n transform: translate(4px, 0) rotate(0); }\n 14% {\n transform: translate(-6px, 0) rotate(0); }\n 16% {\n transform: translate(9px, 0) rotate(0); }\n 18% {\n transform: translate(-6px, 0) rotate(0); }\n 20% {\n transform: translate(6px, 0) rotate(0); }\n 22% {\n transform: translate(9px, 0) rotate(0); }\n 24% {\n transform: translate(-1px, 0) rotate(0); }\n 26% {\n transform: translate(-2px, 0) rotate(0); }\n 28% {\n transform: translate(3px, 0) rotate(0); }\n 30% {\n transform: translate(10px, 0) rotate(0); }\n 32% {\n transform: translate(3px, 0) rotate(0); }\n 34% {\n transform: translate(-9px, 0) rotate(0); }\n 36% {\n transform: translate(8px, 0) rotate(0); }\n 38% {\n transform: translate(-2px, 0) rotate(0); }\n 40% {\n transform: translate(1px, 0) rotate(0); }\n 42% {\n transform: translate(-5px, 0) rotate(0); }\n 44% {\n transform: translate(-4px, 0) rotate(0); }\n 46% {\n transform: translate(0px, 0) rotate(0); }\n 48% {\n transform: translate(3px, 0) rotate(0); }\n 50% {\n transform: translate(10px, 0) rotate(0); }\n 52% {\n transform: translate(7px, 0) rotate(0); }\n 54% {\n transform: translate(-8px, 0) rotate(0); }\n 56% {\n transform: translate(-5px, 0) rotate(0); }\n 58% {\n transform: translate(-4px, 0) rotate(0); }\n 60% {\n transform: translate(7px, 0) rotate(0); }\n 62% {\n transform: translate(-1px, 0) rotate(0); }\n 64% {\n transform: translate(9px, 0) rotate(0); }\n 66% {\n transform: translate(7px, 0) rotate(0); }\n 68% {\n transform: translate(4px, 0) rotate(0); }\n 70% {\n transform: translate(9px, 0) rotate(0); }\n 72% {\n transform: translate(1px, 0) rotate(0); }\n 74% {\n transform: translate(2px, 0) rotate(0); }\n 76% {\n transform: translate(-9px, 0) rotate(0); }\n 78% {\n transform: translate(0px, 0) rotate(0); }\n 80% {\n transform: translate(0px, 0) rotate(0); }\n 82% {\n transform: translate(6px, 0) rotate(0); }\n 84% {\n transform: translate(-4px, 0) rotate(0); }\n 86% {\n transform: translate(10px, 0) rotate(0); }\n 88% {\n transform: translate(-5px, 0) rotate(0); }\n 90% {\n transform: translate(-8px, 0) rotate(0); }\n 92% {\n transform: translate(0px, 0) rotate(0); }\n 94% {\n transform: translate(-5px, 0) rotate(0); }\n 96% {\n transform: translate(-2px, 0) rotate(0); }\n 98% {\n transform: translate(8px, 0) rotate(0); }\n 0%, 100% {\n transform: translate(0, 0) rotate(0); } }
<html>\n<style>body { background:#000000; }</style>\n</html>\n<div class="end end0">\n<br><br><br><br><br><br><br>\nB-\n\nAlicia Contestabile\n\nSound by C418\n\nSpecial thanks to Dominik Johann \nand Sean O’Dowd for their time,\nand Crows Crows Crows \nfor sharing their space\n</div>
<html>\n<style>body { background:#000000; }</style>\n</html>\n<div class="start">\n<br><br><br><br><br><br><br>\nrules:\nplay in fullscreen\nwith sound<br>\n[[begin|B]]</div>
<html>\n<style>body { background:#be0c28; }</style>\n</html>\n<div id="wrapper">\n<div class="vr vr0"></div></div>\n<<playsound "https://swizzlekiss.com/twine/b-/time%20and%20space.mp3">>\n<<timedgoto "L0" 128s>>
<html>\n<style>body { background:#ffffff; }</style>\n</html>\n<div id="wrapper">\n<div class="vrl vrl0"></div></div>\n\n<<timedgoto "box" 128s>>
B-
Alicia Contestabile
(function () {\n "use strict";\n version.extensions['soundMacros'] = {\n major: 1,\n minor: 1,\n revision: 2\n };\n var p = macros['playsound'] = {\n soundtracks: {},\n handler: function (a, b, c, d) {\n var loop = function (m) {\n if (m.loop == undefined) {\n m.loopfn = function () {\n this.play();\n };\n m.addEventListener('ended', m.loopfn, 0);\n } else m.loop = true;\n m.play();\n };\n var s = eval(d.fullArgs());\n if (s) {\n s = s.toString();\n var m = this.soundtracks[s.slice(0, s.lastIndexOf("."))];\n if (m) {\n if (b == "playsound") {\n m.play();\n } else if (b == "loopsound") {\n loop(m);\n } else if (b == "pausesound") {\n m.pause();\n } else if (b == "unloopsound") {\n if (m.loop != undefined) {\n m.loop = false;\n } else if (m.loopfn) {\n m.removeEventListener('ended', m.loopfn);\n delete m.loopfn;\n }\n } else if (b == "stopsound") {\n m.pause();\n m.currentTime = 0;\n } else if (b == "fadeoutsound" || b == "fadeinsound") {\n if (m.interval) clearInterval(m.interval);\n if (b == "fadeinsound") {\n if (m.currentTime>0) return;\n m.volume = 0;\n loop(m);\n } else {\n if (!m.currentTime) return;\n m.play();\n }\n var v = m.volume;\n m.interval = setInterval(function () {\n v = Math.min(1, Math.max(0, v + 0.005 * (b == "fadeinsound" ? 1 : -1)));\n m.volume = Math.easeInOut(v);\n if (v == 0 || v == 1) clearInterval(m.interval);\n if (v == 0) {\n m.pause();\n m.currentTime = 0;\n m.volume = 1;\n }\n }, 10);\n }\n }\n }\n }\n }\n macros['fadeinsound'] = p;\n macros['fadeoutsound'] = p;\n macros['unloopsound'] = p;\n macros['loopsound'] = p;\n macros['pausesound'] = p;\n macros['stopsound'] = p;\n macros['stopallsound'] = {\n handler: function () {\n var s = macros.playsound.soundtracks;\n for (var j in s) {\n\t\tif (s.hasOwnProperty(j)) {\n s[j].pause();\n if (s[j].currentTime) {\n\t\t s[j].currentTime = 0;\n\t\t }\n\t\t}\n }\n }\n }\n var div = document.getElementById("storeArea").firstChild;\n var fe = ["ogg", "mp3", "wav", "webm"];\n while (div) {\n var b = String.fromCharCode(92);\n var q = '"';\n var re = "['" + q + "]([^" + q + "']*?)" + b + ".(ogg|mp3|wav|webm)['" + q + "]";\n k(new RegExp(re, "gi"));\n div = div.nextSibling;\n }\n\n function k(c, e) {\n do {\n var d = c.exec(div.innerHTML);\n if (d) {\n var a = new Audio();\n if (a.canPlayType) {\n for (var i = -1; i < fe.length; i += 1) {\n if (i >= 0) d[2] = fe[i];\n if (a.canPlayType("audio/" + d[2])) break;\n }\n if (i < fe.length) {\n a.setAttribute("src", d[1] + "." + d[2]);\n a.interval = null;\n macros.playsound.soundtracks[d[1]] = a;\n } else console.log("Browser can't play '" + d[1] + "'");\n }\n }\n } while (d);\n }\n}());
version.extensions.timedgotoMacro={major:1,minor:2,revision:0};\nmacros["goto"]=macros.timedgoto={timer:null,handler:function(a,b,c,d){function cssTimeUnit(s){if(typeof s=="string"){if(s.slice(-2).toLowerCase()=="ms"){return +(s.slice(0,-2))||0\n}else{if(s.slice(-1).toLowerCase()=="s"){return +(s.slice(0,-1))*1000||0\n}}}throwError(a,s+" isn't a CSS time unit");return 0}var t,d,m,s;\nt=c[c.length-1];d=d.fullArgs();m=0;if(b!="goto"){d=d.slice(0,d.lastIndexOf(t));\nm=cssTimeUnit(t)}d=eval(Wikifier.parse(d));if(d+""&&state&&state.init){if(macros["goto"].timer){clearTimeout(macros["goto"].timer)\n}s=state.history[0].passage.title;macros["goto"].timer=setTimeout(function(){if(state.history[0].passage.title==s){state.display(d,a)\n}},m)}}};
body {\n background-color:#be0c28;\n}\n\n#sidebar {\n display:none;\n}\n\nbody, #passages, .passage {\n\n\tpadding:0;\n\tmargin:0;\n\theight:100%;\n\tfont-size: 20pt;\n\tfont-family: "Helvetica", sans-serif;\n}\n\n.start {\n\tbackground-color: #000000;\n color: white;\n\ttext-align: center;\n}\n\na:link {\n color: white;\n}\n\n.b0 {\n\n background-color:#ffffff;\n\tdiplay:block;\n position:fixed;\n top:0;\n left:50%;\n\theight:100%;\n\twidth:5px;\n\tmargin-left:-2.5px;\n}\n\n.end {\n opacity: 0;\n color: white;\n\ttext-align: center;\n}\n\n@-webkit-keyframes END-ANIMATION {\n 0% { opacity: 0;}\n\n 100% { opacity: 1;}\n}\n\n@-moz-keyframes END-ANIMATION {\n 0% { opacity: 0;}\n\n 100% { opacity: 1;}\n}\n@-o-keyframes END-ANIMATION {\n 0% { opacity: 0;}\n\n 100% { opacity: 1;}\n}\n@keyframes END-ANIMATION {\n 0% { opacity: 0;}\n\n 100% { opacity: 1;}\n}\n\n.end0 {\n -webkit-animation: END-ANIMATION 5s normal forwards; /* Safari 4+ */\n -moz-animation: END-ANIMATION 5s normal forwards; /* Fx 5+ */\n -o-animation: END-ANIMATION 5s normal forwards; /* Opera 12+ */\n animation: END-ANIMATION 5s normal forwards; /* IE 10+, Fx 29+ */\n}\n\n#wrapper {\n\twidth: 100%;\n\theight: 100%;\n\tposition:fixed;\n\tz-index: 99999;\n }\n\n.vr {\n\n background-color:#ffffff;\n\tdiplay:block;\n position:fixed;\n top:0;\n left:50%;\n\theight:100%;\n\n}\n\n@-webkit-keyframes VR-ANIMATION {\n 0% { background-color:#ffffff;\n\t diplay:block;\n position:fixed;\n top:0;\n left:50%;\n\t height:100%; }\n\n 100% { width:100%;\nmargin-left:-50%;\nbackground-color:#ffffff; \n}\n}\n\n@-moz-keyframes VR-ANIMATION {\n 0% { background-color:#ffffff;\n\t diplay:block;\n position:fixed;\n top:0;\n left:50%;\n\t height:100%; }\n\n 100% { width:100%;\nmargin-left:-50%;\nbackground-color:#ffffff; \n}\n}\n@-o-keyframes VR-ANIMATION {\n 0% { background-color:#ffffff;\n\t diplay:block;\n position:fixed;\n top:0;\n left:50%;\n\t height:100%; }\n\n 100% { width:100%;\nmargin-left:-50%;\nbackground-color:#ffffff; \n}\n}\n@keyframes VR-ANIMATION {\n 0% { background-color:#ffffff;\n\t diplay:block;\n position:fixed;\n top:0;\n left:50%;\n\t height:100%; }\n\n 100% { width:100%;\nmargin-left:-50%;\nbackground-color:#ffffff; \n}\n}\n\n.vr0 {\n -webkit-animation: VR-ANIMATION 128s infinite; /* Safari 4+ */\n -moz-animation: VR-ANIMATION 128s infinite; /* Fx 5+ */\n -o-animation: VR-ANIMATION 128s infinite; /* Opera 12+ */\n animation: VR-ANIMATION 128s infinite; /* IE 10+, Fx 29+ */\nwidth:5px;\nmargin-left:-2.5px;\n}\n\n.vrl {\n background-color:#000000;\n\tdiplay:block;\n position:fixed;\n top:0;\n left: 0;\n\theight:100%;\n}\n\n@-webkit-keyframes VRL-ANIMATION {\n 0% { background-color:#000000;\n\tdiplay:block;\n position:fixed;\n top:0;\n left: 0;\n\theight:100%; }\n 100% { width:100%; }\n}\n@-moz-keyframes VRL-ANIMATION {\n 0% { background-color:#000000;\n\tdiplay:block;\n position:fixed;\n top:0;\n left: 0;\n\theight:100%; }\n 100% { width:100%; }\n}\n@-o-keyframes VRL-ANIMATION {\n 0% { background-color:#000000;\n\tdiplay:block;\n position:fixed;\n top:0;\n left: 0;\n\theight:100%; }\n 100% { width:100%; }\n}\n@keyframes VRL-ANIMATION {\n 0% { background-color:#000000;\n\tdiplay:block;\n position:fixed;\n top:0;\n left: 0;\n\theight:100%; }\n 100% { width:100%; }\n}\n\n.vrl0 {\n -webkit-animation: VRL-ANIMATION 128s infinite; /* Safari 4+ */\n -moz-animation: VRL-ANIMATION 128s infinite; /* Fx 5+ */\n -o-animation: VRL-ANIMATION 128s infinite; /* Opera 12+ */\n animation: VRL-ANIMATION 128s infinite; /* IE 10+, Fx 29+ */\nwidth:5px;\n}\n\n.box {\nposition: fixed;\n top: 50%;\n left: 50%;\ntransform: translate(-50%, -50%);\n background-color: #ffffff;\n}\n\n@-webkit-keyframes BOX-ANIMATION {\n 0% { width: 0%;\nheight: 0%;}\n 100% { width: 100%;\n height: 100%; }\n}\n@-moz-keyframes BOX-ANIMATION {\n 0% { width: 0%;\nheight: 0%;}\n 100% { width: 100%;\n height: 100%; }\n}\n@-o-keyframes BOX-ANIMATION {\n 0% { width: 0%;\nheight: 0%;}\n 100% { width: 100%;\n height: 100%; }\n}\n@keyframes BOX-ANIMATION {\n 0% { width: 0%;\nheight: 0%;}\n 100% { width: 100%;\n height: 100%; }\n}\n\n.box0 {\n -webkit-animation: BOX-ANIMATION 128s infinite; /* Safari 4+ */\n -moz-animation: BOX-ANIMATION 128s infinite; /* Fx 5+ */\n -o-animation: BOX-ANIMATION 128s infinite; /* Opera 12+ */\n animation: BOX-ANIMATION 128s infinite; /* IE 10+, Fx 29+ */\n\n}\n\n.tv {\nposition: fixed;\n top: 50%;\n left: 50%;\ntransform: translate(-50%, -50%);\n background-color: #ffffff;\n}\n\n@-webkit-keyframes TV-ANIMATION {\n 0% { width: 100%;\nheight: 100%;}\n50%\t{ width: 100%;\nheight: 5px;\n}\n 100% { width: 0%;\n height: 0%; }\n}\n@-moz-keyframes TV-ANIMATION {\n 0% { width: 100%;\nheight: 100%;}\n50%\t{ width: 100%;\nheight: 5px;\n}\n 100% { width: 0%;\n height: 0%; }\n}\n@-o-keyframes TV-ANIMATION {\n 0% { width: 100%;\nheight: 100%;}\n50%\t{ width: 100%;\nheight: 5px;\n}\n 100% { width: 0%;\n height: 0%; }\n}\n@keyframes TV-ANIMATION {\n 0% { width: 100%;\nheight: 100%;}\n50%\t{ width: 100%;\nheight: 5px;\n}\n 100% { width: 0%;\n height: 0%; }\n}\n\n.tv0 {\n -webkit-animation: TV-ANIMATION 0.5s infinite; /* Safari 4+ */\n -moz-animation: TV-ANIMATION 0.5s infinite; /* Fx 5+ */\n -o-animation: TV-ANIMATION 0.5s infinite; /* Opera 12+ */\n animation: TV-ANIMATION 0.5s infinite; /* IE 10+, Fx 29+ */\n\n}