Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
It's dark.
Is it damp? You can't tell.
You're sweating. Why are you sweating?
[[Huh.]]
<<set $penalty to 0>>
<<set $dream to 0>>You don't remember when they put you here.
<<if $truth gte 2>>\
<div class="theImage theText">they who</div><<else>>\
<</if>>You felt a dull ache in your gut. Not that it mattered.
You wouldn't die.
<<if $truth gte 2>>\
<div class="theImage theText">why is that</div><<else>>\
<</if>>Maybe if you were someone else, you'd wish for death. No, instead you're the dullest of them all. Perhaps in your earlier days you might've thought this an inconvenience.
[[An inconvenience to what?]]You once dreamt of getting back to...
Hm.
You realize you can't remember what it was you did before you were placed here.
Your farthest memory recalls only his face.
[[He was so happy and free.]]
[[He was a mindless beast.]]It was as if he'd spent a life time repressing who he truly was and had finally let himself be free.
You get the sense it didn't always used to look that way.
You briefly try to imagine it, but it seems you just can't.
What a useless sensation.
<<if $truth gte 2>>\
<div class="theImage theText">useless like you</div><<else>>\
<</if>>Why would you want to remember him as anything else? It felt a little cruel to try and bring back the memory of a struggling soul.
[[That was in the past.]]
[[Why hasn't he come looking for me?]]There was nothing human in that face. Nothing but a ravenous hunger that only wanted to consume you.
You get the sense it didn't always used to look that way.
You struggle to recall how it was before, but the flashes of that horrible maw haunt you.
What a useless sensation.
<<if $truth gte 2>>\
<div class="theImage theText">useless like you</div><<else>>\
<</if>>Even if there was once a man in there, he was as good as dead.
[[The memory sent chills through you.]]
[[It was too late.]]Now you were here.
Just as you had always been.
And...
Wait, that's not right.
<<if $truth gte 2>>\
<div class="theImage theText">how would you know</div><<else>>\
<</if>>You remembered coming from somewhere else, didn't you?
[[I can't forget.]]
[[Must've been your imagination.]]
<<if $truth gte 2>>\
He should've come by now.
He knew you were here, didn't he?
<div class="theImage theText">you're not safe</div>After all you...
Where were you going with that?
<div class="theImage theText">stop thinking about it</div>That's not what's important here, is it?
That's right. What mattered was...
[[He knew you were here.]]
<<else>>\
He should've come by now.
He knew you were here, didn't he?
After all you...
Where were you going with that?
That's not what's important here, is it?
That's right. What mattered was...
[[He knew you were here.]]
<</if>>
<<set $penalty += 1>>That's right.
It was...
It was very nice! That place you came from was a good place!
Right?
You're fairly sure that silhouette in your head was you. The shifting figures that surrounded it gave you a feeling that you could only assume was good.
[[You tried to focus on the image in your head.]]
<<set $penalty += 1>>What an absurd idea.
If you had come from somewhere else, wouldn't you remember that?
Just like you remember him.
<<if $truth gte 2>>\
<div class="theImage theText">but you don't</div><<else>>\
<</if>>Your imagination was surely getting the best of you.
[[But...]]
[[You must be tired.]]It came too naturally to you.
It must have some meaning.
Was your head not cooperating? Something like that...
<<if $truth gte 2>>\
<div class="theImage theText">you can't do that</div><<else>>\
<</if>>It's not as though it was always like that.
[[Right?]]
[[Something like that shouldn't be.]]
<<set $penalty += 1>>Yes.
You were definitely exhausted. It'd been a long day. Even someone like you deserved rest.
<<if $truth gte 2>>\
<div class="theImage theText">rot</div><<else>>\
<</if>>You move to lie down, or at least you think you do.
You can't feel anything.
[[Just like always.]]
[[That's...]]This didn't alarm you.
Since when had you actually felt things?
<<if $truth gte 2>>\
<div class="theImage theText">what a joke</div><<else>>\
<</if>>Your head felt stranger as the minutes crawled by. You would call this bubbling in your chest panic, but there's no way you knew a such thing.
You pictured the walls around you and, in it, yourself.
You again went to lie down on the ground and watched, with relief, as the image in your head mirrored it.
Yes, now things felt right.
Now you could sleep.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">you shouldn't</div><<becomes>><div class="theImage theText">it'll come back</div><<endhoverreplace>><<else>>\
<</if>>[[Dreams welcomed you.]]
[[You woke up a short while later.|You woke up.]]This is wrong.
<<if $truth gte 2>>\
<div class="theImage theText">you'll die like this</div><<else>>\
<</if>>You struggled to think back. You slept, didn't you? Did you not feel the floor beneath you? Not even your own weight?
[[Were you supposed to?]]
<<if hasVisited("You have to fix it.")>><<mousereplace>>[[You have to fix it.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[You have to fix it.]]<<endmousereplace>><<else>>\[[You have to fix it.]]
<</if>>
<<set $penalty += 1>>- was here.
- enveloped you in warmth, all consuming and welcoming. You belonged with -.
Where had - been all this time?
[[- tightened around you.]]
[[You woke up.]]- was embracing you with such passion, the sensation rattled your whole being.
- sunk into your pores and dug through the sinew of your muscles, stopping only when - reached the shattered outline of your bones.
No, - wasn't one to be satisfied with something like that.
You felt - burrow deeper even still, gliding along your nerves.
You're such an idiot, you hadn't thought of such a thing. How lucky you were that - wasn't.
No, - was many wonderful things.
[[-]]
[[You woke up.]]- was devoted.
- was unfaltering.
- was unrelenting.
- was persistent.
- was punishing.
- was brutal.
[[Wait...]]
[[You woke up.]]- was ferocious.
- was ruthless.
- was savage.
- was vicious.
- was merciless.
- was brutal.
[[That's not...]]
[[You woke up.]]- was ferocious.
- was ruthless.
- was savage.
- was vicious.
- was merciless.
- was brutal.
[[I don't like this...]]
[[You woke up.]]- was ferocious.
- was ruthless.
- was savage.
- was vicious.
- was merciless.
- was brutal.
[[That's enough...]]
[[You woke up.]]It was inhuman.
It was inhuman.
It was inhuman.
It was inhuman.
It was inhuman.
It was inhuman.
[[You woke up.->You woke up.]]
<<set $penalty += 1>>It's dark.
<<if $truth gte 2>>\
<div class="theImage theText">again</div><<else>>\
<</if>>Is it damp? You can't tell.
You're sweating. Why are you sweating?
<<if $truth gte 2>>\
<div class="theImage theText">you always forget the dream</div><<else>>\
<</if>><<if hasVisited("That's enough...")>>\[[What time is it?]]
<<if hasVisited("You're so tired.")>><<mousereplace>>[[You're so tired.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[You're so tired.]]<<endmousereplace>><<else>>\[[You're so tired.]]
<</if>>
<<else>>\
[[What time is it?]]
<</if>>While you weren't all that interesting, it didn't mean you did nothing with your life.
<<if $truth gte 2>>\
<div class="theImage theText">how long can you keep this up</div><<else>>\
<</if>>Your days were always full. So many appointments, so many commitments.
Time was precious and you couldn't afford to waste it.
<<if $truth gte 2>>\
<div class="theImage theText">what do you know</div><<else>>\
<</if>>First, you'll go ahead and...
[[That one... maybe?]]
[[Or...]]Why not sleep more?
<<if $truth gte 2>>\
<div class="theImage theText">he'll be waiting</div><<else>>\
<</if>>You couldn't think of any reason not to.
[[It's not as though you've ever dreamed.]]Yes, that was probably a fine... choice.
You'll start right on... it.
But what was it?
<<if $truth gte 2>>\
<div class="theImage theText">not this again</div><<else>>\
<</if>>Isn't that a little...
[[Why is that...]]
[[How silly.]]Maybe it's better to just wait and see what comes up.
You'd like to keep yourself available if anything came up.
Being mindful of your energy is just as important as anything else.
[[And if nothing came up, well...|How silly.]]Things aren't clicking in the right places.
Was it always like this?
You can't remember.
<<if $truth gte 2>>\
<div class="theImage theText">you need to stop</div><<else>>\
<</if>>That thought was routine, but today it made you anxious.
How often had you felt this way only to forget it later on?
[[Something echoes outside.]]
<<set $penalty += 1>>It must just not be time yet.
You're sure when it's time, you'll be ready to do... that?
That...
[[Something echoes outside.]]That must be it.
You strained forward to listen, eager.
The sound was faint and rhythmic. One after the other.
<<if $truth gte 2>>\
<div class="theImage theText">—</div><<else>>\
<</if>>Footsteps, you decided.
They were growing closer.
[[You know what comes next.]]
[[Was it you today?]]<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<body translate="no">
<div class="wrap">
<div class="example-one" data-text="yes you do">no you don't</div>
</div>
</body>
<<timed 3s>><<goto "You should focus.">><</timed>>
<<set $penalty += 1>>You found yourself hoping they were for you.
You'd been obedient. Waiting for them. Surely by now?
—
<<if $truth gte 2>>\
<div class="theImage theText">you shouldn't do this</div><<else>>\
<</if>>By now what?
The white noise in your head was interrupted by a harsh sound.
Metal grinding against metal. A pleasant vibration thrummed within your skull.
[[You should focus.]]<<if hasVisited("You know what comes next.")>>\It must be-
A wild howl could be heard in the distance.
<<else>>\
You shook your head slowly, as if it could chase away the ghost that swam in it.
<<if $truth gte 2>>\
<div class="theImage theText">you wish</div><<else>>\
<</if>>There was a frantic voice that cried out.
<</if>>
It was muffled, but you could hear enough to determine that it was annoying and rather pitiful.
It was begging.
The whining droned, and on it kept.
It accompanied the footsteps. It was getting closer.
<<if $penalty gte 5>>\
[[Why is that happening?]]
<<else>>\
[[You were sure this had something to do with your daily routine.]]
<</if>>You didn't fully understand why it filled you with a sense of dread, but your whole being rejected this.
Something was blaring in your head.
<<if $truth gte 2>>\
<div class="theImage theText">if only you hadn't done this</div><<else>>\
<</if>>It was nauseating.
You couldn't do it.
You wouldn't do it.
You wouldn't let them in.
<<if hasVisited("Delusion ending.")>><<mousereplace>>[[This place would protect you.|Delusion ending.]]<<becomes>><div class="theImage theText">you should have made different choices</div><<becomes>>[[This place would protect you.|Delusion ending.]]<<endmousereplace>><<else>>\[[This place would protect you.|Delusion ending.]]
<</if>>
<<set $end += 1>>Were you the type to shy away from responsibilities?
Probably not. Something tells you people found you dependable once.
<<if $truth gte 2>>\
<div class="theImage theText">that was a long time ago</div><<else>>\
<</if>>You'll just have to bear with it.
You had thought that maybe you'd be able to understand what was being said the closer they got.
Only the bass of the voice grew.
[[You recognize that voice.]]
<<if hasVisited("What?")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][What?]]">><<else>>\<</if>>Though it was only a loud hum, something within you jumped as the voice registered in your empty brain.
No.
Rather, it felt as though you had been resurrected.
<<if $truth gte 2>>\
<div class="theImage theText">welcome back</div><<else>>\
<</if>>Your breath hitched as your senses sprang to life.
[[The door wasn't close enough.]]You reached out with your hand to touch the door, though it had no handle that you could see.
Why couldn't it be closer? You wanted nothing more than to bang against it so he would know you're here.
Everything ached.
No.
<<if $truth gte 2>>\
<div class="theImage theText">welcome back</div><<else>>\
<</if>>Everything burned.
Your whole being screamed for him to notice you.
[[The footsteps stopped.]]Somehow, you had screamed.
You can't remember the last time you did something like that. Your throat was raw from the sudden abuse.
<<if $truth gte 2>>\
<div class="theImage theText">touch it</div><<else>>\
<</if>>It was better that way, like ripping off a bandaid.
Despite all that, the sounds on the other side remained drowned out by the thick walls that separated you.
That went for you too, didn't it?
He wasn't going to hear you.
[[That sounds like...]]You winced as you struggle to remember what that noise reminds you of.
It was something you were once intimately familiar with, but that didn't matter now.
<<if $truth gte 2>>\
<div class="theImage theText">that was you</div><<else>>\
<</if>>It ended quickly.
You held your breath, desperate to hear something. Something to tell you he was still there, waiting for you.
[[Why is it silent?]]Had you done something that you can't remember?
Wasn't he coming for you?
Your body shook pitifully.
That's right. Why would he come for something like this?
<<if $truth gte 2>>\
<div class="theImage theText">wrong choice</div><<else>>\
<</if>>Unbidden, you cried.
[[You remember his name.]]You choked the word out.
It felt foreign to your tongue. It was meaningless.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">don't forget</div><<becomes>><div class="theImage theText">you're meaningless</div><<endhoverreplace>><<else>>\
<</if>>It was nothing more than a waste of air.
[[The door groaned.]]You willed your eyes to focus on the door across from you.
It wasn't opening, but a section of the door had slid away revealing a grate. You had no idea it was there.
It was still too dark to make out what was on the other side.
You had your hopes, though.
<<if $truth gte 2>>\
<div class="theImage theText">it's coming</div><<else>>\
<</if>>An unusual noise echoed softly in the room.
Another thing you didn't remember. But you'd try.
[[It was sniffing.]]That's right.
He was sniffing the air.
<<if $truth gte 2>>\
<div class="theImage theText">no more waiting</div><<else>>\
<</if>>You felt your face grimace with confusion, but that wasn't really what was important right now.
"Someone new?"
[[It was him.]]Words tumbled out of your throat.
Your voice was broken from lack of use. You hoped he'd understand.
You just wanted him to know you were here.
<<if $truth gte 2>>\
<div class="theImage theText">it's what you wanted</div><<else>>\
<</if>>And now he had come for you, finally.
[["You? I don't know you."]]Your blood ran cold.
It's not damp.
You're sweating; the cold sweats that had broken across your body were nothing but a distraction.
That can't be right.
<<if $truth gte 2>>\
<div class="theImage theText">you'd been patient</div><<else>>\
<</if>>You remembered him. If nothing else, you remembered him. Surely he'd remember you.
You repeated your name carefully, trying to remember it. Trying to make it clear past your cracking voice.
[[He laughed on the other side of the door.]]"I don't know anything about all that."
It didn't make any sense.
"All I know is you're crying."
So you were.
Something pricked at your brain. Your gut was trying to tell you something.
<<if $truth gte 2>>\
<div class="theImage theText">let's die together</div><<else>>\
<</if>>[[The door opened.]]He stepped inside.
You looked to his face, no longer sure what you were feeling.
Why is it so dark?
<<if $truth gte 2>>\
<div class="theImage theTextcenter">-</div><<else>>\
<</if>>That's what you wanted to blame for being unable to drag your eyes away from his mouth.
He seemed to recognize you at last, his lips parted slightly in realization.
[[You take a deep breath.]]Your feelings pour out.
<<if $truth gte 2>>\
<div class="theImage theTextcenter">...</div><<else>>\
<</if>>You're not sure what they mean, only that you're relieved, so relieved.
The smile that grows on his face emboldens you.
It was all worth it, it was all really worth it. So you kept talking.
His smile hadn't stopped growing. Was he as happy as you were?
Your gaze traced the curve of his teeth.
"So they did bring me someone new to play with after all."
[[What?]]Play with? You weren't here to play.
You were here for...
<<if $truth gte 2>>\
<div class="theImage theText">:</div><<else>>\
<</if>>What were you here for?
[[Can you remember?]]
<<if hasVisited("He reaches out for you.")>><<mousereplace>>[[He reaches out for you.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[He reaches out for you.]]<<endmousereplace>><<else>>\[[He reaches out for you.]]
<</if>>You came for something that mattered.
You can feel that, etched into you in a place you hadn't thought to look before.
It was only now that you were face to face with him again that you felt the overwhelming pull towards something.
If you put your all into it, you'll understand.
[[But does it matter?]]
[[You can't remember the last time you were this focused.]]Terror seizes you.
You can't even begin to understand.
Each and every fiber of your being is screeching with fear. It was as though all the quiet horror you've endured up until now was begging you to react.
[[So you did.]]
[[But you wanted this.]]<body><div id="stage"><div class="theImage theTextcenter">It won't be enough.</div></div>
</body>
<<timed 3s>><<goto "You can't remember the last time you were this focused.">><</timed>>If you were capable of remembering, it would be now.
You close your eyes, forcing yourself to look away.
You needed to concentrate.
[[You smell blood.]]@@.smear;You taste it, too.
You reflexively lick your lips, but a hand is pressed hard against your mouth.
Your teeth are buried deep into the offending hand. Did you mean to bite it? You can't remember why you would.
You didn't have a choice.
You were yelling. You weren't the loud type, so you didn't recognize the bellowing cry as your own.
[[You can't run away anymore.]]@@@@.smear;You just need to look at him. Then you can accept it. You can accept what's happening.
You fight against the hand that pins your head to the ground. You're robbed of your strength, forced to rely on your neck alone.
The exertion of your body forced your eyes closed. All you had to do was open them.
There was nothing but red, seeping into your eyes and blinding you.
[[You're this close.]]@@You understand.
That's right.
You were made for him.
You weren't ready back then.
You let him down.
[[You smiled.]]Your face hurt. Did smiling always hurt?
The teeth of his smile drew you in once more.
How painful.
You abandoned him and left hm alone to his agony.
This was your fault and you'd make it right.
[[He reaches out for you.->He reaches out for you]]His touch is warm against your clammy skin.
It's almost unbearable.
His fingers dig into your arm, overwhelming your senses and making your body jolt.
Was your arm always broken?
[[Of course it was.]]Your body was here, waiting, this entire time.
As broken as he left it.
Open and waiting for him.
His hands sank into your exposed intestines, dirtied and stained from the dust and debris that floated lazily through the room.
Sounds rushed out of your throat and your body was alive again. Blood pumped through your pitiful veins and splattered against your bodies as if welcoming him back.
You could feel his fingers spread out, rummaging along your organs as though he'd discover something he hadn't seen before.
[[He'd seen it all before.]]You were just too much of a coward back then.
Now was different.
You let out a weak growl as if to challenge him, to goad him further into reclaiming what was always his.
He leaned close, allowing you to appreciate his teeth properly.
What a pitifully dry mouth, you thought.
[[He understood you, even without you saying anything.]]He always had.
It was you who needed to do better.
Hearing your thoughts, he lunged forward, gouging out your throat with his canines.
The sensation of his teeth pulling and tearing at your skin threatens to drive you over the edge.
He has so much more to offer, though.
[[You just needed to hang on a little longer.]]Blood gurgled out of your mouth.
The smell was stronger than you remember. You supposed it was thanks to the blood bubbling out of your nose, so desperate to escape your meaningless shell.
He burrowed his hands further into your torso as he helped himself to you, finally settling on your ribcage.
His touch traced your bones, and you find yourself wondering if you can really feel them like some sort of sensitive organ or if that was just one of the unique properties of your body.
The body made for him.
[[He claimed you.|Limbo]]
<<set $end += 1>>
<<set $tr1 to 1>>You tried to run from the outstretched hand.
<div class="theImage theText"> ̶̫̥̳̗͉̌̍̈́ ̶̧̡̜̻̈́̋́̓͆̏͒͌̐̕ ̶̛̲̹̌̄͊̃̿̄͝/</div>Your foot was turned the wrong way? Since when... You were suddenly painfully aware of your organs lurching freely from your body.
<div class="theImage theText"> ̶̧̡̜̻̈́̋́̓͆̏͒͌̐̕ ̶̛̲̹̌̄͊̃̿̄͝/</div>Intestines spilled out in front of you.
Wasn't there something keeping those in?
You tried to grab for your stomach, to make sense of it all. Your efforts were rewarded with nothing but searing pain.
[[A stupid mistake.]]<body><div id="stage"><div class="theImage theTextcenter">So why don't you just show him what's left of your throat and get it over with?</div></div>
</body>
<<timed 3s>><<goto "So you did.">><</timed>>A flip switched in him and he was on you, tearing into you.
All you succeeded in doing was looking like prey trying to get away.
Vulnerable, weak, unable to fight back.
But you had the audacity to try and run from him.<div class="theImage theText">.̴͔̄͂̄̓̔̋͌̈́̋̍́͝.̶̡̨̨̨̥͚̼̝̫̱͔͕̜̠̞̺̬͇͈̲̤̳͚̙̟͉̋̋ͅ.̷̣̞̣̪͙̮̞̬̣͕̬͔̲͉͙͙̍͌́͒̃̒͑̊̅̔̈́͑͑͂̉̒̍͊́̊͐͗̍̃̕͝͝.̵̧͖̱͎͔̟͚̥̠̄̊͆͂̀̑̚͝</div>[[You laughed.]]Nothing but a weak giggle, distorted by the fingers that pried apart your windpipe to give his gnashing teeth better access.
He was efficient, wasting no time in savoring you.
No, you were a meal that had to be killed first.<div class="theImage theText">.̸̧̧̛̬̫̰͙̠̘̺̩͚̗͕̞̱͚̰͖̣̌̂͌̎͊̀̐̾̒͆͑̽́͋́̀́̈́̃̍͒́̌̄̾̈́̉̍̃͆́̽̿̌̏͐́̾̾̔͛́͌́̓̾̀̑̓͛͊̏̊͛̀̏̽̀̔̕̕͘̚̕͘͜.̴̧̛̛͍̺̱͚̳̺̘̗͓̠̫̹͎̳̦̭̱̯͙̪̥̠͕͖͍̺̥̬̥̖̠͖͚̼̳̫̎͒̂̇̾̏̾͌̓̅̆̉̈́̑̋͂̂̈́͑̎̅̆̂́̈́̽̒̈̓͒͋̄͑̓͗̀̓̈́̅̉͛͐̅́́̆̀̿̇̑͂̕̚̚͝͝.̵̨̧̨̢̨̧̛͕̫̺͓̰̗͉̖̘͖̫̝̻̩̖͍͈̝̯͙̥̣̟̪͓̼̱̗̗̤̱͇͕̰͖͊͑͒̄̋͂͊͗̓̅̿̊̄͗̄́̍̈́̂͛̈́̉̍͑͗̅̊̈̑̃̈͆̐͒̐̅̓̈̿̈́̅͌̅͋̓̈̿̽̈́̊͒̋͂͘̚̚̕̚̕̚̕͜͠͝ͅ.̴̢̛̻̮̺̺͓͙͚̳̬͓͕̠͙̖̙̜͉̮̣̖̳̳̼̝̞̰̞̆̔̈́͋̏͛͑̎̈̀͆̾͛́̈́̏̇͆́́͑͘̕̚͜͜͝ͅͅ</div>[[You're crying, he said.]]That wasn't a declaration of sympathy.
He was no compassionate hero.
That was a predator hearing the cry of an easy meal.<div class="theImage theText">.̸̧̡̨̡̱͙͈̙̟͖̟͕̣̥̳̙̱̘̫̙̺̥̩̟̯͔͉̦̩͉̜͉̗̩̲̖̰̠̻̟̞̜͇̞̥̩̝̭͕̼̝̫̻͇̞̱͇̯̲͕͉̲̝̤̟̰̣͎͍̦̐̏̉̐̈́́̾̃̿͛͜͠͝ͅͅ.̷̧̨̡̡̡̡̛̻̳̱̹̬̻̟̪̯̰͍͇͈͕͉͔͔͉̤̬̳̪̱̥̦̗̓̔̐̍̈́̈́̈́̎̑̀̒̔͊́̿͊̃͘͝͝͝.̴̧̧̡̡̘̪̘̥͙̲͈̯̭̰̖͙̭̝̖̭̣̪̭͚̲͕͉̺͙̗̹͇̦̹̪̯͓̼̲̘̣͈̟̹͇̟͈̳̟̫̼̠̳̦̭̟̟͐̔̔̍̆̈́̓̾͛͊̇̈́̆̊̈͗͗̓̓̔̉̈́́̈́͐̎̓̆̂̌͒̏̿̌̉̋̇̄̍̊͋̏̃̄͗̔̇̀͛̆̈̓́̆̐͊̒͂͑͐̋̊͋̐̇͌͆̅̊̈́̑̈͘̕͜͠͝͝͝͝͝͝͝.̶̨̢̡̧̢̡̧̨̨̨̛̠͕̙̟̻̖͖̲͕͇̯͙͓͎͖̺͕̗̰̺̣͇͎͓͕͕̩͍̩͍̫͈̩̲̝̲̪͓͙̭͖̼͚̤̟͈͚̪̤̱̞̻͍͓̘͓̣̣̖͇̫͖͈͇̞̫̻̦͎͈̻̱͓̗̖̩̜̙̺̙̪̬̰͉͈͔͎̞̗͗̌̋̅͐̋̾̽̓̔̀̈́̅̎͒̀̾͆̒̃͗̌͠͝ͅͅͅ</div>[[Just a meal.]]@@.shadow;Morality was a burden. For one reason or another, we left that piece of our humanity behind.
Walking into the tunnels to see this... I was grateful for that.
He'd been throwing his body against the door for the past hour. His stamina was unbelievable. Even if we all knew that's what the drug was designed to do, it was another thing to see it yourself.
His mad babbling was muffled behind the door.
Even without hearing his words, his wails and earnest cries bled into my mind.
[[It wasn't enough.|Limbo]]@@
<<set $end += 1>>What was left of your mangled body trembled.
How pathetic.
It felt so foreign and sickening to you, to be so powerless.
You weren't always like this.
<<if $truth gte 2>>\
<div class="theImage theText">are you sure</div><<else>>\
<</if>>You wouldn't forget that.
[[You had a life.]]Yes, you understood that.
But only barely.
There was no way for you to fully recall how things had became this way, not since your mind had rotted away.
How could you head stay intact, after all this?
<<if $truth gte 2>>\
<div class="theImage theText">better for you</div><<else>>\
<</if>>It had slipped away long ago, leaving you with this perpetual emptiness.
[[Your eyes had adjusted to the darkness.]]
<<if hasVisited("You opened your eyes.")>><<mousereplace>>[[There was no point in even breathing.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[There was no point in even breathing.]]<<endmousereplace>><<else>>\[[There was no point in even breathing.]]
<</if>>
<<set $penalty += 1>>There was no reason to keep your eyes open, let alone blink.
These walls never changed. Desolate and unremarkable. Nothing indicated that someone lived within them, rather they looked shabby and neglected.
<<if $truth gte 2>>\
<div class="theImage theText">nothing is living here</div><<else>>\
<</if>>The heavy steel door across from you was no exception. No handle existed on your side, making it barely discernable from the walls that surrounded it.
You'd never seen it open. Maybe it really was just a wall.
[[You had screamed, once.]]
<<if hasVisited("It's not so bad.")>><<mousereplace>>[[It's not so bad.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[It's not so bad.]]<<endmousereplace>><<else>>\[[It's not so bad.]]
<</if>>
It was muscle memory, nothing more.
Breaths of air brought nothing to you. It's not like you needed oxygen.
You don't even remember what a heartbeat sounds like.
How useless.
These thoughts served only to agitate you, a buzz in your head that wouldn't go away.
<<if $truth gte 2>>\
<div class="theImage theText">what a waste</div><<else>>\
<</if>>You were so tired.
Why can't it leave you?
[[Maybe you'd try getting up today.]]
[[What little thoughts you had left slipped away.]]If you did, the droning in your head would disappear.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">why worry</div><<becomes>><div class="theImage theText">it'll be over soon</div><<endhoverreplace>><<else>>\
<</if>>You gathered your hands beneath you to push yourself up.
But your hands aren't moving.
Why should they? You didn't even remember where you left them.
Were they by your side?
[[Did you even have hands?]]
There's no reason to keep thinking.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">you can't run forever</div><<becomes>><div class="theImage theText">you'll be back</div><<endhoverreplace>><<else>>\
<</if>>The pitch black that had blanketed you all this time comforted you once more.
It pressed its weight down on you, churning your organs as it draped around you.
It was almost gentle in the way it pulled you under.
[[Its inky mass oozed into your mouth.]]A plain person such as you could appreciate the peace this brought.
If he hadn't made an appearance by now, then he never would.
That meant you were safe, safe from all the annoyances of life.
<<if $truth gte 2>>\
<div class="theImage theText">a lie</div><<else>>\
<</if>>They were tolerable before. Routine even.
And now you were free.
[[You closed your eyes.]]You felt your body relax.
The oblivion that had smothered you this whole time...
You just didn't understand it before. Not surprising. There wasn't much that made had sense to you.
Now you saw this nullity as a home. A home made for someone as meaningless as you.
[[Good night.|Limbo]]
<<set $end += 1>><body><div id="stage"><div class="theImage theTextcenter">get real</div></div>
</body>
<<timed 1s>><<goto "Your eyes had adjusted to the darkness.">><</timed>>
It wasn't much of a scream.
Instead, it was one of many reminders that your flesh had been ravaged.
<<if $truth gte 2>>\
<div class="theImage theText">good</div><<else>>\
<</if>>You could speak somewhat. As long as you could stand the broken rattle of your throat.
It was like a piece of plastic had settled into your jugular, digging in with each flex of your vocal cords.
It was just pain.
[[You didn't try again after that.]]
[[It was useless, besides.]]Pain was useful in some ways.
When your consciousness sunk into the depths, you didn't even remember that you were alive.
<<if $truth gte 2>>\
<div class="theImage theText">you aren't</div><<else>>\
<</if>>The occasional sting of air touching your open wounds would rouse you.
You were grateful for it.
With that said, it's not as though you needed it now.
[[For better or for worse, you were awake.->You had to conserve what little energy you had left.]]What little you heard in your time here was nothing more than murmurs and whispers.
At most, you could feel the vibrations beneath you.
<<if $truth gte 2>>\
<div class="theImage theText">you don't want to do this</div><<else>>\
<</if>>You reasoned that whoever was out there had no concern for if they woke you up, so they most likely weren't whispering.
Your room must be sound proofed.
Any efforts to cry out would be wasted energy.
[[You had to conserve what little energy you had left.]]
<<set $penalty += 1>>If you had the wits about you to laugh, you might have.
You realized why you existed as it burrowed its way into your skull, unobstructed by your dislocated jaw, and felt out your hemorrhaged brain.
This was what you were waiting for.
This is why you had to be split open, nothing more than splintered remains.
[[You had to be broken.]]If you were whole, there was no way you'd be able to accept this.
So they helped you. They did for you what you couldn't do for yourself.
They gutted you, sundered you, shattered you.
They made all these empty spaces to make room for what was to come next.
[[You opened your eyes.]]You're so ridiculous.
Your eyes have been open this entire time, you know?
<<timed 4s>><<goto "-intermission-">><</timed>>
<<set $end += 1>>Yes, of course you did.
You knew the answer to that already, so why did this busted head of yours think it?
The buzz in your head reverberated louder.
<<if $truth gte 2>>\
<div class="theImage theText">you can't ignore me</div><<else>>\
<</if>>[[You've had enough.->What little thoughts you had left slipped away.]]Your mind was too scattered and it took all you had to keep the pieces together.
Though the memories had left you, you clung to the feelings desperately.
<<if $truth gte 2>>\
<div class="theImage theText">we're here</div><<else>>\
<</if>>You reached up with a tired hand to touch your face.
[[The tacky fluid smeared along your features.]]
[[Forget it.]]- was here.
<<timed 3s>><<goto "dream2">><</timed>>
Where had - been all this time?
<<replacelink>>You woke up.<<becomes>>[[- tightened around you.|You felt your neck snap.]]<</replacelink>>
- enveloped you in warmth, all consuming and welcoming. You belonged with -.
<<timed 6s>><<goto "dream3">><</timed>>You felt your neck snap.
<<timed 6s>><<goto "dream5">><</timed>>- was suffocating you with such force, the agony jolted through your whole being.
<<timed 6s>><<goto "dream6">><</timed>>
It consumed you, greedily shearing the tendons and ligaments loose from your body, stopping only when it reached the shattered outline of your bones.
<<timed 9s>><<goto "dream7">><</timed>>
No, - wasn't one to spare you so soon.
<<timed 6s>><<goto "dream8">><</timed>>
You felt it shred into you, seizing your nerves.
<<timed 6s>><<goto "dream9">><</timed>>
You're such an idiot, you hadn't thought of such a thing. How sad for you that - wasn't.
<<timed 9s>><<goto "dream10">><</timed>>
No, - was many terrible things.
<<replacelink>>You woke up.<<becomes>>[[-|- owned you.]]<</replacelink>>It was inhuman.
<<timed 1s>><<goto "dream11">><</timed>>-
<<timed 3s>><<goto "Why did you sleep?">><</timed>>
<<set $end += 1>>
It was inhuman.
<<timed 1s>><<goto "dream12">><</timed>>
It was inhuman.
<<timed 1s>><<goto "dream13">><</timed>>
It was inhuman.
<<timed 1s>><<goto "dream14">><</timed>>
It was inhuman.
<<timed 1s>><<goto "dream15">><</timed>>
It was inhuman.
<<if $dream gte 3>>\
[[You woke up.|You won't wake up.]]
<<else>>\
[[You woke up.|dream15][$dream += 1]]
<</if>><body><div class="theImage theText">-</div></body>
<<timed 1s>><<goto "-intermission-">><</timed>>Your fingers traced your face, taking note of each detail.
It wasn't exactly easy to remember why you had started such a strange ritual. You only remember that it helped you feel more present, more lucid in this darkness.
It reminded you what a human looked like.
<<if $truth gte 2>>\
<div class="theImage theText">a corpse</div><<else>>\
<</if>>Your fingertips dragged along the sensitive exposed muscle of your cheekbone and you winced, a sharp wheeze escaping from your punctured lungs.
[[Blood dripped.]]
[[Another important reminder.]]Why should you bother?
There wasn't a reason for it, not a good one anyway.
You'd still be here when you woke up.
The walls will remain untouched.
The door won't have opened.
That's just how it is.
You felt pieces of you fall away the longer you spent on unnecessary acts.
<<if $truth gte 2>>\
<div class="theImage theText">this is poison</div><<else>>\
<</if>>[[But even thoughts like this were no good for you.|You were waiting for them.]]
<<set $penalty += 1>>No, it didn't.
You can't remember what it was like to bleed.
No matter how often you explored your stripped open frame, blood never spilled out.
<<if $truth gte 2>>\
<div class="theImage theText">it doesn't make sense</div><<else>>\
<</if>>Your best guess was your heart had stopped beating.
[[That didn't explain anything.]]Without reality, you had nothing except the chattering phantoms in your head.
You needed to face your reality.
The reality that you were nothing more than a glorified, half-eaten corpse.
<<if $truth gte 2>>\
<div class="theImage theText">it makes you strong</div><<else>>\
<</if>>You were an unfinished meal.
You could behave and spend your days acting like one.
[[You had other plans.]]
[[It's not like you had a say.]]Any time spent trying to make sense of your condition left you with unresolved anxieties.
So you learned to not.
You wouldn't die.
<<if $truth gte 2>>\
<div class="theImage theText">there are things worse than death</div><<else>>\
<</if>>That fact was all that mattered. Life doesn't have an answer for everything.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">if you aren't careful</div><<becomes>><div class="theImage theText">you'll learn the hard way</div><<endhoverreplace>><<else>>\
<</if>>[[Especially not this.|You were waiting for them.]]
<<set $penalty += 1>>It was a purpose that hadn't left you, even when everything else had.
Those teeth that hid behind your eyelids.
They were waiting for you.
<<if $truth gte 2>>\
<div class="theImage theText">what's left of you</div><<else>>\
<</if>>[[You were waiting for them.]]The sound was faint and rhythmic. One after the other.
<<if $truth gte 2>>\
<div class="theImage theText">are you ready</div><<else>>\
<</if>>Footsteps, you decided.
They were growing closer.
You had to hurry and right your skull.
<<if hasVisited("Your trembling got worse.")>><<mousereplace>>[[Your trembling got worse.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[Your trembling got worse.]]<<endmousereplace>><<else>>\[[Your trembling got worse.]]
<</if>>
[[Try to think.]]You rubbed your hands against your face.
You can't stay in your head. You needed to get out.
<<if $truth gte 2>>\
<div class="theImage theText">it'll never happen</div><<else>>\
<</if>>The tendons of your neck tugged against you and your head swam.
[[Were you upside down?]]These walls preserved you.
Survive? You'd do everything you could to guarantee it.
Denial?
No.
There was something about pretending to have agency that made you feel bitter and angry.
<<if $truth gte 2>>\
<div class="theImage theText">you should learn</div><<else>>\
<</if>>That wasn't who you were. You weren't equipped to deal with those feelings.
[[It was a trap.]]
<<set $penalty += 1>>A trap designed specifically for someone as empty as you.
This wouldn't work on just anyone. There weren't many people who went through life feeling nothing at all.
But you had.
You didn't want those feelings so you discarded them.
<<if $truth gte 2>>\
<div class="theImage theText">it wasn't worth it</div><<else>>\
<</if>>That was convenient.
You were happy.
[[Weren't you?|You were waiting for them.]]Oh.
Why did you have to be so rough with yourself?
Making sure to pay close attention to your failing anatomy, you slid back until the wall pressed against your forehead.
<<if $truth gte 2>>\
<div class="theImage theText">a failure</div><<else>>\
<</if>>Your own touch felt alien to your shoulders, but you tracked your way up to the base of your neck.
Your hands were trembling.
How frustrating.
[[Something echoes outside.|Something echoes outsideb]] What was up with that?
A frenzied cry rang out. Not loud enough.
You still had time.
There wasn't much strength in you left, but you tried to give it your all.
You could power through this.
Was it getting closer?
<<if $truth gte 2>>\
<div class="theImage theText">what a pity</div><<else>>\
<</if>>The trembling in your hands had only intensified with the extra effort you poured in.
[[Hurry.]]Whatever it was, that door had never opened. You knew that.
It didn't stop the trembling, but it wasn't getting worse either.
<<if $truth gte 2>>\
<div class="theImage theText">you used to be better</div><<else>>\
<</if>>You guided two fingers to the back of your neck until they touched your spine. The back of your head was touching it.
With a careful touch, you pressed into your skull. You felt your forehead drag along the cold wall.
You coughed.
Your chin hit your chest.
[[That was an improvement, at least.]]Desperation spurred you.
Your hand snapped forward in a way you hadn't quite meant to.
Muscle memory, you realize too late.
Your spine gave a woeful crack.
[[You laughed.|You laughed b.]]A frenzied cry rang out.
It was muffled, but you could hear enough to determine that it was annoying and rather pitiful.
It was begging.
<<if $truth gte 2>>\
<div class="theImage theText">not for long</div><<else>>\
<</if>>The whining droned, and on it kept.
It accompanied the footsteps. It was getting closer.
<<if $penalty gte 3>>\
[[It wasn't that unusual.]]
<<else>>\
[[Had you heard a voice before?]]
<</if>>Sounds were routine.
After all, that's how you learned your room was soundproof.
Without the strange machinations of this place, you might've thought you were left behind in an abandoned facility.
What were you getting all worked up for?
<<if $truth gte 2>>\
<div class="theImage theText">if you were different</div><<else>>\
<</if>>Maybe you just felt a little vulnerable, what with your head detached.
<<if hasVisited("Apathy ending.")>><<mousereplace>>[[That must be it.|Apathy ending.]]<<becomes>><div class="theImage theText">you should have made different choices</div><<becomes>>[[That must be it.|Apathy ending.]]<<endmousereplace>><<else>>\[[That must be it.|Apathy ending.]]
<</if>>
<<set $end += 1>>No.
No you had not.
You had heard all sorts of things down here, but not that.
Where ever they had you, it appeared everyone agreed it wasn't the place for idle chatter.
You tuned in to the vibrations that had now entered your room.
<<if $truth gte 2>>\
<div class="theImage theText">as if you can feel them</div><<else>>\
<</if>>Only the bass of the voice grew.
[[You recognize that voice.|You recognize that voice. B]]Depending on who you ask, a decapitated head and its respective body could do a number of things for a brief period of time.
[[Laughing was never one of them.|Limbo]]
<<set $end += 1>>Things would pass. You would return to the nothing that you did.
<<if $truth gte 2>>\
<div class="theImage theText">then this wouldn't happen</div><<else>>\
<</if>>The monotony wouldn't end. It was dependable, in a way, but that really wasn't a concern of yours.
It simply was.
[[And if that door opened...]]Though it was only a loud hum, something within you jumped as the voice registered in your empty brain.
That was your heart.
Your senses roared to life.
You hadn't realized how dead you were until now. The feelings you forced out of your body up until now paled compared to this.
<<if $truth gte 2>>\
<div class="theImage theText">you're at the prelude</div><<else>>\
<</if>>All you smell is blood.
<<if hasVisited("Panic sets in.")>><<mousereplace>>[[Panic sets in.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[Panic sets in.]]<<endmousereplace>><<else>>\[[Panic sets in.]]
<</if>>
[[You'd made it this far.]]Reflex kicked in and you clutched helplessly at your weeping guts.
The wall of your abdomen had been compromised long ago, but you still had to try.
It hurt, you realized.
<<if $truth gte 2>>\
<div class="theImage theText">giving up already</div><<else>>\
<</if>>Pain was fine. Pain was always welcome with you, and the familiarity you felt with it told you that had always been true.
It wasn't like this before. This was something else entirely.
You were never loud. You never even cried.
That's why you didn't recognize the wail that flooded the room.
[[How sad.]]It was new to you, or new to your scattered memory.
But that didn't matter.
You were here and you wouldn't run.
<<if $truth gte 2>>\
<div class="theImage theText">are you sure</div><<else>>\
<</if>>Not only that.
You wouldn't let him run either.
[[You yelled.]]
<<if hasVisited("You see bite marks on his hand.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][You see bite marks on his hand.]]">><<else>>\<</if>>
You didn't pay attention.
If you had, you would have heard the commotion outside your door.
It wasn't just that, was it?
You lost your mind over some entrails, like that mattered. How many times had you seen those before?
<<if $truth gte 2>>\
<div class="theImage theText">you let him down again</div><<else>>\
<</if>>That's why you didn't hear your door open.
The person you used to be would be ashamed of you.
They'd have to feel the shame for you since you'd long lost the ability to feel shame.
In fact, you wouldn't be feeling anything ever again.
[[Nothing except for the jagged edge shaving you to pieces.|Limbo]]
<<set $end += 1>>The pain was worse than you remembered, no doubt thanks to the heart that now beat frantically in your chest.
You couldn't let something like that stop you.
<<if $truth gte 2>>\
<div class="theImage theText">other things will</div><<else>>\
<</if>>This was only a chance.
You heard them, didn't you? That meant they could hear you, too.
[[The footsteps stopped.|The footsteps stopped. B]]Outside your door was the unmistakable sound of a human being eaten.
You briefly marveled at the fact you had the capacity to make that connection.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">you should know</div><<becomes>><div class="theImage theText">you know it all too well yourself</div><<endhoverreplace>><<else>>\
<</if>>Just for a moment. It occurred to you that of all the memories you would hold close, it would be that.
That's what happened to you, of course.
[[He should've finished the job.]]If he had only done that, he wouldn't be forced to deal with you now.
You leaned forward as the sounds died down, gathering your legs beneath you into a crouch.
Blood splattered the ground as you did so. The bowels pressed against your knee protested and ached.
<<if $truth gte 2>>\
<div class="theImage theText">of course they would</div><<else>>\
<</if>>You wondered why. It's not as though anything remained in them.
[[Teeth shone in the distance.]]A section of the door had disappeared.
Dark as things may be, you hadn't shied away from it. Your eyes had adjusted to the pitch black and could make out shapes, however faint they may be.
Outside your door wasn't all that different.
There was no mistaking the gleam of blood or the teeth it coated. A far away light source had caught that unforgettable maw, making it shine wetly.
<<if $truth gte 2>>\
<div class="theImage theText">they know what's coming</div><<else>>\
<</if>>You recognized the teeth that had haunted you all this time.
[[A thick tongue slipped between the canines.]]His mouth opened along with it.
He breathed in deep, inhaling through his mouth and sniffing noisily.
The breathing got louder. It almost sounded like panting.
Ah.
He was tasting you, wasn't he? Tasting the smell of blood that swallowed your room.
<<if $truth gte 2>>\
<div class="theImage theText">even if you don't</div><<else>>\
<</if>>"Someone new?"
[[He was cruel for that.]]Even though he was the one who did this to you, he didn't remember your smell.
<<if $truth gte 2>>\
<<hoverreplace>><div class="theImage theText">what are you</div><<becomes>><div class="theImage theText">some kind of virgin</div><<endhoverreplace>><<else>>\
<</if>>Enough of that.
It didn't matter.
He wasn't getting away.
[[You kicked forward.]]Who do you think you are?
Fit, well taken care of, nourished?
Do any of those things sound like you?
<<if $truth gte 2>>\
<div class="theImage theText">that was a long time ago</div><<else>>\
<</if>>You didn't lunge forward to meet him as the door swung open.
You were luckier than that. Legs as weak as yours were unable to do anything like standing. You should be proud you had mustered a crouch.
No.
[[That door was open and his silhouette drew closer.]]Those teeth.
All you could see were those teeth.
If someone had told you the only thing on his face was a mouth, you'd believe them.
<<if $truth gte 2>>\
<div class="theImage theText">that's all you need to worry about</div><<else>>\
<</if>>Everything else was shrouded in the blackness of this horrid place.
But not his blood soaked teeth.
[[They curved into a smile.]]"You seem so anxious."
To call this anxiety? The audacity of it enraged you.
You yelled.
What came out were feelings you couldn't pretend to understand.
<<if $truth gte 2>>\
<div class="theImage theText">you do understand</div><<else>>\
<</if>>There was a small comfort in that.
If you couldn't understand it, then neither could he.
<<if $truth gte 2>>\
<div class="theImage theText">you just won't accept it</div><<else>>\
<</if>>The smile on his face deepened.
[["Is that what this is all about?"]]Ah?
"If I had known you were here, I would've come sooner."
You felt a pang in your skull. Not like your others.
<<if $truth gte 2>>\
<div class="theImage theText">you know the truth</div><<else>>\
<</if>>[[He reaches out for you.|He reaches out for you.C]]Your drag your eyes away from his face and try to focus on the hand.
<<if $truth gte 2>>\
<div class="theImage theText">|</div><<else>>\
<</if>>Maybe you can escape it, if nothing else.
One last defiance.
[[You see bite marks on his hand.]]Bite marks?
<<if $truth gte 2>>\
<div class="theImage theTextcenter">-</div><<else>>\
<</if>><<if hasVisited("You were imagining it.")>><<mousereplace>>[[You were imagining it.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[You were imagining it.]]<<endmousereplace>><<else>>\[[You were imagining it.]]
<</if>>
[[You think you recognize them.]]There's no way you could see something so small in this darkness.
You hadn't given him enough credit.
The way he plagued your mind was nothing short of an infection.
You had always been looking at this predator.
Him and the daggers that lined his jaws.
Now that he was here, you could look all you want.
[[You saw every crevice as they closed around your eyes.|Limbo]]
<<set $end += 1>>Do you?
Your face contorted as his hand closed around your arm.
That wasn't what hurt.
Your head cried out again.
[[Focus.]]His hand was closer than ever, wrapped tight around your bicep.
There were bite marks.
There were bite marks.
But who...
[[You hear screaming.]]@@.smear;Pain sears through your body.
You're on your back.
The tile of the floor digs into your hips and shoulders.
He grounds you into it, all his weight pressed down into you.
Your arms are useless and your legs are pinned.
Even if they weren't, you weren't sure you could throw him off you like this.
[[Were you supposed to just die?]]@@@@.smear;As if you'd go along with it.
You lunged for his arm, mouth open and teeth bared.
His grip loosened on your throat, though not enough for you to be free. You had to bite harder.
Blood trickled into your mouth and down into your throat.
[[He clamped down tighter.]]@@@@.smear;The air was choked out of you.
You tried to breathe, but your throat was full of iron.
Your chest heaved and your body convulsed.
[[He looked at you.]]@@@@.smear;He almost seemed concerned.@@
<<timed 1s>><<goto "You bit into him.">><</timed>>You imagined it was his neck between your teeth.
Well, it was your neck between his at the very least.
You deserved that.
Tit for tat. Something like that.
A peculiar thought crept into your mind as he gorged himself on you, making sure to properly claim what he had neglected once before.
It's not like you meant to do this.
[[It just came naturally.|Limbo]]
<<set $end += 1>>
<<set $tr2 to 1>>If he knew you were here, then shouldn't something have happened by now?
This felt right, and yet...
When you thought about it more, it didn't make much sense to you.
<<if $truth gte 2>>\
<div class="theImage theText">nothing does</div><<else>>\
<</if>>So then isn't it fine?
[[You must be tired.]]
[[Still...]]That feels a little odd to you.
You can't just let that go. It's not often these things stand out so surely it demands your attention.
<<if $truth gte 2>>\
<div class="theImage theText">if you don't let it go...</div><<else>>\
<</if>>Or is it?
[[Things have stood out before, right?|Right?]]
<<if hasVisited("You itched.")>><<mousereplace>>[[You itched.]]<<becomes>><div class="theImage theText">this will kill you</div><<becomes>>[[You itched.]]<<endmousereplace>><<else>>\[[You itched.]]
<</if>>
<<set $penalty += 1>><<if $truth gte 2>>\
<div class="theImage theText">... they'll come for you</div>
They must be trying to distract you, just like before.
[[Before?]]
<<else>>\
Your skin crawled.
You don't remember that being a thing that your skin ever did.
They must be trying to distract you, just like before.
[[Before?]]
<</if>>
<<if $truth gte 2>>\
<div class="theImage theText">when they were scared of you</div>
<<timed 2s>><<goto "They were here.">><</timed>>
<<else>>\
...
<<timed 2s>><<goto "They were here.">><</timed>>
<</if>>
They didn't want you to see.
If you had, you would've been able to destroy it.
So much has happened since then. You can't go back.
That doesn't mean you can't finish it.
[[You remember where they left it.]]That's right.
It's always been close by. They were just hoping you wouldn't remember.
They surely also thought that if you had, you wouldn't act on it.
Most people wouldn't rip out their own organs, right?
<<replacelink>>Not even you.<<becomes>>[[But you're different now, you won't make the same mistake again.]]<</replacelink>>Your hands had moved without you.
They were buried deep within your ribcage already. You were always the ambitious sort, weren't you?
That's why you scared them. They were right to be.
Now that it was within reach, you would end it all.
[[Everything would be right again.]]It felt good, resting within your palms. Such a thing made sense, even to you.
You found yourself thinking it was rather sad that most people wouldn't experience it.
The heart that you cradled wasn't beating.
That was fine.
[[It'd make what you were about to do easier.]]<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.example-one {
font-size: 30px;
color: white;
position: relative;
}
body {
background: black;
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script></head>
<body translate="no"><div class="wrap"><div class="example-one" data-text="You crushed the meaty organ between your fingers.">You crushed the meaty organ between your fingers.</div>
</div>
</body>
</html>
<<set $end += 1>>
<<timed 3s>><<goto "-intermission-">><</timed>>You wanted to recall it with more detail if possible.
Your efforts appeared to be in vain, but the shapes still moved.
That was still helpful. Perhaps something in their movements would clue you in on their nature.
[[They seemed to grow.]]That's not how things are supposed to go.
Why are they doing that?
...
Doing what?
The thoughts came uninvited. That shouldn't happen.
[[You must be tired.]]Right.
<<if $truth gte 2>>\
<div class="theImage theText">you'll be safe</div><<else>>\
<</if>>Unusual things happened from time to time. Not that it was a bad thing. No, not at all.
It was a very good thing, in fact.
You were an exciting person and everyone loved excitement.
All that excitement will have to wait for later.
[[You should rest for now.|You must be tired.]]You always knew your head was a little strange. You rather appreciated that about yourself.
For some reason this just felt wrong. Like something had gone too far and you had lost track of it.
<<if $truth gte 2>>\
<div class="theImage theText">this isn't for you</div><<else>>\
<</if>>You wanted to follow along, but why couldn't you? Were you just not good enough?
<<if $truth gte 2>>\
<div class="theImage theText">you aren't</div><<else>>\
<</if>>Would there be more?
Or maybe...
[[Maybe you just need sleep.|You must be tired.]]
<<set $penalty += 1>>You were overthinking things.
<<if $truth gte 2>>\
<div class="theImage theText">...</div><<else>>\
<</if>>You should know better by now. Thinking wasn't your strength. You were here in your home and that's all you needed to worry about.
Why should you have to think at all?
You knew everything would be fine, as it always was. That knowledge comforted you.
And with it, you slept.
[[Dreams welcomed you.]]
[[You woke up a short while later.|You woke up.]]You needed to bring yourself back.
<<if $truth gte 2>>\
<div class="theImage theText">that's it</div><<else>>\
<</if>>A dilemma like this was hard to wrap your mind around, so coming up with a solution was no easy feat.
[[You should start by opening your eyes.]]You blink.
There is nothing.
No matter how many times you blink, everything looks the same.
Black and empty.
You try to turn your head to catch a glimpse of something, anything that might stand out and remind you where you are.
[[Where you are?]]You're inside a box. You know that already.
All you have to do is reach out and feel the room and it'll be okay.
It'll be okay.
It'll be okay.
You repeat this mantra as you extend your hands.
[[You feel nothing.]]Something slips between your fingers.
You try to catch it, but fail. It glides so quickly that you aren't even sure it was real.
But it comes back.
<<if $truth gte 2>>\
<div class="theImage theText">it wasn't equipped for reality</div><<else>>\
<</if>>It comes back and catches you as you fall.
[[You're relieved.]]It accepted you.
Nothing would touch you.
<<if $truth gte 2>>\
<div class="theImage theText">such a pity</div><<else>>\
<</if>>[[Not ever again.|Limbo]]You know you're here.
You know you're real.
You know this is real.
But there is only oblivion. Endless and all consuming.
Here just for you.
[[You screamed.|Limbo]]
<<set $end += 1>><span id="typing">tip tap tap tap tip</span>
<span id="typer">tip tap tap tap tip</span>
<script type="text/javascript">
/****************************************************
* Typing Text script- Dy Trey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
interval = 400; // Interval in milliseconds to wait between characters
if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}
function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
}
}
</script>You should've realized sooner.
This place was for you.
<<if $truth gte 2>>\
<div class="theImage theText">you broke yourself</div><<else>>\
<</if>>You don't need to concern yourself with anything else.
It doesn't matter what's out there.
[[It won't let them in.]]That wouldn't concern you either.
Your life could hardly be called one.
<<if $truth gte 2>>\
<div class="theImage theText">pathetic</div><<else>>\
<</if>>You remained here each day, waiting for nothing at all. It's not as though days themselves had meanings - time no longer existed.
It was doubtful anyone would come in and, if they did, you decided they were welcome to it.
[[None of it mattered.|Limbo]]<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*
MIXIN(S)
=================
https://codepen.io/chriscoyier/pen/XWrNyZy?editors=0110
(TEXT) PARAMS
=================
1. Namespace
2. Intensity
3. Text color
4. Background color (flat)
5. Highlight #1 color
6. Highlight #2 color
7. Width (px)
8. Height (px)
*/
.example-one {
font-size: 100px;
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
background: black;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
.example-two {
font-size: 52px;
color: red;
position: relative;
}
@keyframes example-two-anim-1 {
0% {
clip-path: inset(58% 0 18% 0);
}
10% {
clip-path: inset(5% 0 34% 0);
}
20% {
clip-path: inset(61% 0 25% 0);
}
30% {
clip-path: inset(6% 0 67% 0);
}
40% {
clip-path: inset(100% 0 1% 0);
}
50% {
clip-path: inset(82% 0 19% 0);
}
60% {
clip-path: inset(65% 0 15% 0);
}
70% {
clip-path: inset(11% 0 64% 0);
}
80% {
clip-path: inset(79% 0 19% 0);
}
90% {
clip-path: inset(33% 0 15% 0);
}
100% {
clip-path: inset(13% 0 86% 0);
}
}
@keyframes example-two-anim-2 {
0% {
clip-path: inset(17% 0 55% 0);
}
10% {
clip-path: inset(99% 0 2% 0);
}
20% {
clip-path: inset(2% 0 43% 0);
}
30% {
clip-path: inset(62% 0 22% 0);
}
40% {
clip-path: inset(21% 0 8% 0);
}
50% {
clip-path: inset(93% 0 7% 0);
}
60% {
clip-path: inset(94% 0 7% 0);
}
70% {
clip-path: inset(4% 0 94% 0);
}
80% {
clip-path: inset(95% 0 1% 0);
}
90% {
clip-path: inset(56% 0 7% 0);
}
100% {
clip-path: inset(2% 0 42% 0);
}
}
.example-two::before, .example-two::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
background: black;
}
.example-two::after {
left: 2px;
text-shadow: -1px 0 white;
animation: example-two-anim-1 2s infinite linear alternate-reverse;
}
.example-two::before {
left: -2px;
text-shadow: 2px 0 green;
animation: example-two-anim-2 3s infinite linear alternate-reverse;
}
(IMAGE) PARAMS
=================
@mixin imgGlitch($name, $intensity, $width, $height, $top, $left)
=================
1. Namespace
2. Intensity
3. Width (px)
4. Height (px)
5. Top (px, abs pos)
6. Left (px, abs pos)
*/
@keyframes example-three-anim-1 {
0% {
clip-path: inset(55% 0 36% 0);
}
6.6666666667% {
clip-path: inset(25% 0 47% 0);
}
13.3333333333% {
clip-path: inset(21% 0 58% 0);
}
20% {
clip-path: inset(52% 0 6% 0);
}
26.6666666667% {
clip-path: inset(69% 0 2% 0);
}
33.3333333333% {
clip-path: inset(47% 0 1% 0);
}
40% {
clip-path: inset(91% 0 6% 0);
}
46.6666666667% {
clip-path: inset(83% 0 8% 0);
}
53.3333333333% {
clip-path: inset(25% 0 68% 0);
}
60% {
clip-path: inset(6% 0 26% 0);
}
66.6666666667% {
clip-path: inset(22% 0 25% 0);
}
73.3333333333% {
clip-path: inset(30% 0 52% 0);
}
80% {
clip-path: inset(60% 0 5% 0);
}
86.6666666667% {
clip-path: inset(72% 0 4% 0);
}
93.3333333333% {
clip-path: inset(69% 0 3% 0);
}
100% {
clip-path: inset(7% 0 7% 0);
}
}
@keyframes example-three-anim-2 {
0% {
clip-path: inset(94% 0 3% 0);
}
6.6666666667% {
clip-path: inset(33% 0 5% 0);
}
13.3333333333% {
clip-path: inset(86% 0 1% 0);
}
20% {
clip-path: inset(54% 0 9% 0);
}
26.6666666667% {
clip-path: inset(48% 0 21% 0);
}
33.3333333333% {
clip-path: inset(11% 0 67% 0);
}
40% {
clip-path: inset(21% 0 41% 0);
}
46.6666666667% {
clip-path: inset(8% 0 74% 0);
}
53.3333333333% {
clip-path: inset(81% 0 7% 0);
}
60% {
clip-path: inset(61% 0 11% 0);
}
66.6666666667% {
clip-path: inset(64% 0 9% 0);
}
73.3333333333% {
clip-path: inset(89% 0 9% 0);
}
80% {
clip-path: inset(63% 0 15% 0);
}
86.6666666667% {
clip-path: inset(59% 0 19% 0);
}
93.3333333333% {
clip-path: inset(26% 0 47% 0);
}
100% {
clip-path: inset(35% 0 40% 0);
}
}
.example-three > img {
position: absolute;
top: 35px;
left: 75px;
}
.example-three > img:nth-child(2) {
left: 77px;
animation: example-three-anim-1 2s infinite linear alternate-reverse;
}
.example-three > img:nth-child(3) {
left: 73px;
animation: example-three-anim-2 3s infinite linear alternate-reverse;
}
/*
(SVG) PARAMS
=================
@mixin svgGlitch($name, $intensity, $fillColor, $background, $width, $height, $top, $left)
=================
1. Namespace
2. Intensity
3. Fill Color
4. Background
5. Width (px)
6. Height (px)
5. Top (px, abs pos)
6. Left (px, abs pos)
*/
@keyframes example-four-anim-1 {
0% {
clip-path: inset(88% 0 1% 0);
}
3.3333333333% {
clip-path: inset(35% 0 16% 0);
}
6.6666666667% {
clip-path: inset(93% 0 2% 0);
}
10% {
clip-path: inset(71% 0 20% 0);
}
13.3333333333% {
clip-path: inset(30% 0 14% 0);
}
16.6666666667% {
clip-path: inset(85% 0 6% 0);
}
20% {
clip-path: inset(32% 0 10% 0);
}
23.3333333333% {
clip-path: inset(13% 0 55% 0);
}
26.6666666667% {
clip-path: inset(36% 0 57% 0);
}
30% {
clip-path: inset(35% 0 37% 0);
}
33.3333333333% {
clip-path: inset(53% 0 28% 0);
}
36.6666666667% {
clip-path: inset(60% 0 34% 0);
}
40% {
clip-path: inset(20% 0 27% 0);
}
43.3333333333% {
clip-path: inset(6% 0 62% 0);
}
46.6666666667% {
clip-path: inset(27% 0 64% 0);
}
50% {
clip-path: inset(91% 0 9% 0);
}
53.3333333333% {
clip-path: inset(6% 0 22% 0);
}
56.6666666667% {
clip-path: inset(34% 0 7% 0);
}
60% {
clip-path: inset(58% 0 39% 0);
}
63.3333333333% {
clip-path: inset(78% 0 2% 0);
}
66.6666666667% {
clip-path: inset(89% 0 5% 0);
}
70% {
clip-path: inset(82% 0 12% 0);
}
73.3333333333% {
clip-path: inset(100% 0 1% 0);
}
76.6666666667% {
clip-path: inset(42% 0 55% 0);
}
80% {
clip-path: inset(67% 0 6% 0);
}
83.3333333333% {
clip-path: inset(74% 0 15% 0);
}
86.6666666667% {
clip-path: inset(69% 0 15% 0);
}
90% {
clip-path: inset(8% 0 32% 0);
}
93.3333333333% {
clip-path: inset(19% 0 80% 0);
}
96.6666666667% {
clip-path: inset(69% 0 28% 0);
}
100% {
clip-path: inset(40% 0 47% 0);
}
}
@keyframes example-four-anim-2 {
0% {
clip-path: inset(41% 0 11% 0);
}
3.3333333333% {
clip-path: inset(100% 0 1% 0);
}
6.6666666667% {
clip-path: inset(24% 0 75% 0);
}
10% {
clip-path: inset(69% 0 25% 0);
}
13.3333333333% {
clip-path: inset(82% 0 19% 0);
}
16.6666666667% {
clip-path: inset(85% 0 6% 0);
}
20% {
clip-path: inset(71% 0 27% 0);
}
23.3333333333% {
clip-path: inset(48% 0 12% 0);
}
26.6666666667% {
clip-path: inset(75% 0 6% 0);
}
30% {
clip-path: inset(81% 0 6% 0);
}
33.3333333333% {
clip-path: inset(80% 0 9% 0);
}
36.6666666667% {
clip-path: inset(64% 0 35% 0);
}
40% {
clip-path: inset(29% 0 16% 0);
}
43.3333333333% {
clip-path: inset(83% 0 17% 0);
}
46.6666666667% {
clip-path: inset(63% 0 3% 0);
}
50% {
clip-path: inset(30% 0 33% 0);
}
53.3333333333% {
clip-path: inset(18% 0 57% 0);
}
56.6666666667% {
clip-path: inset(74% 0 27% 0);
}
60% {
clip-path: inset(8% 0 58% 0);
}
63.3333333333% {
clip-path: inset(34% 0 61% 0);
}
66.6666666667% {
clip-path: inset(66% 0 17% 0);
}
70% {
clip-path: inset(28% 0 50% 0);
}
73.3333333333% {
clip-path: inset(91% 0 7% 0);
}
76.6666666667% {
clip-path: inset(24% 0 13% 0);
}
80% {
clip-path: inset(14% 0 51% 0);
}
83.3333333333% {
clip-path: inset(93% 0 3% 0);
}
86.6666666667% {
clip-path: inset(82% 0 17% 0);
}
90% {
clip-path: inset(36% 0 37% 0);
}
93.3333333333% {
clip-path: inset(86% 0 5% 0);
}
96.6666666667% {
clip-path: inset(100% 0 1% 0);
}
100% {
clip-path: inset(27% 0 59% 0);
}
}
.example-four svg {
position: absolute;
top: 27px;
left: 175px;
fill: white;
background: black;
width: 100px;
height: 100px;
}
.example-four svg:nth-child(2) {
fill: red;
left: 173px;
animation: example-four-anim-1 2s infinite linear alternate-reverse;
}
.example-four svg:nth-child(3) {
fill: red;
left: 177px;
animation: example-four-anim-2 3s infinite linear alternate-reverse;
}
body {
background: black;
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
width: 400px;
height: 300px;
margin: 0 auto;
text-align: center;
position: relative;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="wrap">
<div class="example-one" data-text="ruN">sTay</div>
<div class="example-two" data-text="INFORMATION">INFORMATION</div>
</div>
</body>
</html>
@font-face { font-family: ahabeshastypewriter; src: url('Ethopool.ttf'); }
@font-face { font-family: ahabeshastypewriter; font-weight: bold; src: url('Ethopool.ttf');}
html {
font-family: 'ahabeshastypewriter', cursive;
}You begin typing the email to your boss:
<<typesim "Hey Jim, I won't be in to work today, sorry.">>[[Send the email.|next passage]]<</typesim>>Double-click this passage to edit it.
<html>
<head>
<script
type="text/javascript"
src="/js/lib/dummy.js"
></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/core.js"></script>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">//<![CDATA[
window.onload=function(){
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true
});
typewriter.typeString('Hello World!')
.pauseFor(2500)
.deleteAll()
.typeString('Strings can be removed')
.pauseFor(2500)
.deleteChars(7)
.typeString('<strong>altered!</strong>')
.pauseFor(2500)
.start();
}
//]]></script>
</head>
<body>
<div id="app"></div>
</body>
</html><body>
<div id="stage">
<div class="theImage theTextcenter">get real</div>
</div>
</body><body><div id="stage"><div class="theText">If you were whole, there was no way you'd be able to accept this.
So they helped you. They did for you what you couldn't do for yourself.
They gutted you, sundered you, shattered you.
They made all these empty spaces to make room for what was to come next.
</div>
</div>
</body><<set $penalty to 0>>
<<set $dream to 0>>
<<set $end to 0>>
<<set $done to 0>>
<<set $last to 0>>
<<set $desperation to 0>>
<<set $panic to 0>>
<<set $ld to 0>>
<<set $truth to 0>>
<<set $tr1 to 0>>
<<set $tr2 to 0>>
<<set $flashback to 0>>
<<set $f1 to 0>>
<<set $f2 to 0>>
<<set $f3 to 0>>
<<set $f4 to 0>>
<<set $talk to 0>>
<<set $t1 to 0>>
<<set $t2 to 0>>
<<set $t3 to 0>>
<<set $t4 to 0>>
<<set $past to 0>>
<<set $p1 to 0>>
<<set $p2 to 0>><a class="typewriter" data-passage="You were waiting for them.">Weren't you?</a><style>
body {
background: black;
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
</style>
<body translate="no">
<div class="wrap">
<div class="example-one" data-text="You crushed the meaty organ between your fingers.">You crushed the meaty organ between your fingers.</div>
</div>
</body>
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
</style>
</head>
<body translate="no">
<div class="glitch">
<span>No Signal</span>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
font-size: 30px;
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="glitch"></div><div class="wrap">
<div class="example-one" data-text="You crushed the meaty organ between your fingers.">You crushed the meaty organ between your fingers.</div>
</div>
</body>
</html>
It's dark.
It was always dark.
It had been years since you'd seen light and now it was just a distant memory.
[[That's alright.]]It had to be alright.
You felt a dull ache in your gut. Not that it mattered.
You wouldn't die.
Maybe if you were someone else, you'd wish for death. No, instead you're the dullest of them all. Perhaps in your earlier days you might've thought this an inconvenience.
[[An inconvenience to what?|An inconvenience to what?v2]]Was it really an inconvenience? All you remember is this.
That wasn't to say your memory was bad. No, it was rather good for someone in your situation.
Though you'd argue it wasn't good at all. You could stand to forget some days, even if they were all the same.
Day after day.
[[Nothing ever changed.]]What was the point in remembering so much nothing?
For awhile, you felt that it was slowly eating away at your memories. As if every day that you spent here replaced one from your past.
You were scared, perhaps?
Whatever that feeling was, it passed when you realized you couldn't remember anything other than this room.
Your cell.
There was a shadow of a memory, though.
[[Him.]]All you see is his face.
You don't have the right words to describe it. How could you? You barely even understand it.
It was conflicted, like even he couldn't comprehend what was happening to him.
There was a hunger in it too, so intense that you remember thinking such a thing shouldn't be there.
Fear crept into you when you held the memory in your mind... and yet you also felt a distinct sadness.
It wasn't for you.
[[It was for him.]]You wished you remembered why you were sad for him.
It felt important.
You just couldn't understand it right now.
That was alright. It was a good reason to stay here, to pay attention, to keep your mind alive even though your body wasn't.
[[One day you may remember who you are.]]
[[Understanding the mystery of him was all that mattered.]]On second thought, that's pretty dramatic, isn't it?
It's not as though the person sitting in this room right now didn't count.
That wasn't what you meant, of course. What you really wanted to know is who you were before, or at least more than you already know.
You hadn't forgotten that you weren't much of anything, and that was fine. Preferable, even.
Others paid you little mind and the few who remained around you were tolerable.
[[Tolerable?]]He hadn't made much sense to you in the first place.
You know with a strange certainty that this isn't a hole in your memory. That's how it was supposed to be. He shared nothing.
You had never known anything about him at all.
[[And yet somehow you were here.]]That's right.
You found them annoying.
You can admit it might seem cruel of you, but that's just how it was. It's not as if you had asked them to stay around you, it's just what they wanted to do.
Were they mad at you for being that way?
It's hard to recall. There are no feelings to reach towards, nothing that tells you if there had been a confrontation or if they had simply accepted you as you were.
What you do remember is how you felt and...
It's wrong to say you remember that, isn't it?
[[The person you are now is grateful for them.]]You don't remember how they were, how they treated you, or the days you had with them.
It's nice, though, isn't it?
That it happened at all is nice.
You were such a bland, plain person. The person you were seemed interesting at a glance, so people wanted to talk to you, didn't they?
Too bad for them.
[[You had nothing to give them.]]Something tells you that you had a career, something meaningful, things like that. You weren't a waste of a life, not truly.
But you did nothing with it. You barely lived. You just let the days pass by because that was the most convenient thing for you.
That's what you remember.
[[You were different now.]]Thinking about it wouldn't change things, nor would it save you from this humdrum life of yours.
All your days were spent in this room.
It had no features that might tell you its purpose, though the situation made it hard to call it anything other than a cell.
You imagined a cell might have bars, maybe a camera system, something that would allow someone to watch you.
With all the time you had spent here, you found nothing of the sort. It seemed that no one was concerned with observing you or interrogating you.
You served no purpose.
[[It was just a tomb.]]
<<if hasVisited("You were different now.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706402579109773412/ezgif-1-e0cd9c5fe302.gif][It was for him.]]">><<else>>\<</if>>
Perhaps you would've forgotten it, but everything was a constant reminder.
Your life had become wrapped up with his and that fact won't change.
He hadn't just entered your life, though. You were one of many, a small presence.
Though so was he.
Nothing inside you tells you that he really mattered to you, not in any significant way.
[[It was something else entirely.]]A part of you hoped you weren't normally like this, that it was just an anomaly. For your sake, of course.
Otherwise, you imagined your life must've been exhausting up to this point. To constantly care and invest yourself into people's wellbeing.
Especially a stranger.
[[For whatever reason, all you wanted was for him to find happiness.|You were different now.]]
Fitting, you think.
Calling you a corpse wouldn't be wrong.
If you managed to escape, you wouldn't get far. Not at all. With your organs trying to spill out of your open stomach and your throat ripped open, there really wasn't a future for you.
That wasn't even mentioning what was left of your bones.
Sometimes you wanted to understand why this happened to you, how you were able to still live and think and waste away in this room.
[[You can't afford to.]]If you thought like that, you wouldn't be able to keep going.
You knew that, and you desperately wanted to keep living, even if it was like this.
It wasn't as though you enjoyed this life. This wasn't about that.
[[Your only chance was by being patient.]]It's not clear to you what you were waiting for, what you had to stay along for.
Whoever you were before had resolved to do something. It ran so deep within you that even if you had forgotten what it was for, you couldn't stop living.
[[Every bit of your being wanted to see this through.]]So you had to, despite all rationality, see past the horrors that surrounded you.
At the very least, you had to accept it. No amount of denying what was here would make things better.
It was alright.
[[You had plenty of time to practice optimism.]]All things considered, it was fairly fortunate for you that your body was so strange.
No one came to visit you, to give you food, to treat your wounds. If not for your strange predicament, you would've died long ago.
Sure, you might've done that perfectly fine without being broken and torn apart. You just wouldn't have appreciated the circumstances the same.
In a way, it all worked out.
[[Not only that...]]He's here somewhere.
Another echo of a memory told you as much.
It may have changed. After all, it's not like you knew how long it'd been so for all you know anything could've happened.
If there was a chance that he was still here, just as you were, then you hoped you could see him again.
[[Hopefully he was in better shape than you were.]]The days dragged on, pulling you along with them.
Monotonous and unending.
There was no reason to worry or stress.
[[You would be fine.]]This day wasn't unique. Not at all.
A sound could be heard in what you imagined were the halls outside your room, followed by the sound of someone's steps.
That happened on occasion too. Though you never had any visitors, it made sense to you that there may be other people in this building who served their own purpose.
Presumably they needed actual care, unless this was a whole factory of individuals just like yourself.
[[This idea tickled you.]]<script>
function noScroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noScroll);
</script>
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<body translate="no">
<div class="glitch">
</div>
</body>
<<timed 2s>><<goto "Limbo">><</timed>><div class="theImagepulse">thrum</div><script>
(function() {
var SELECTOR_SCREEN_ELEMENT = '.screen';
var SELECTOR_SWITCHER_TV = '#switcher-tv';
var isTurnedOn = true;
var timeline;
function buildTimeline() {
timeline = new TimelineMax({
paused: true
});
timeline
.to(SELECTOR_SCREEN_ELEMENT, .2, {
width: '100vw',
height: '2px',
background: '#ffffff',
ease: Power2.easeOut
})
.to(SELECTOR_SCREEN_ELEMENT, .2, {
width: '0',
height: '0',
background: '#ffffff'
});
}
function toggleSwitcherTV() {
if (isTurnedOn) {
timeline.restart();
}
if (!isTurnedOn) {
timeline.reverse();
}
isTurnedOn = !isTurnedOn;
}
// Initialize
$(document).ready(buildTimeline);
// Bindings
$(document).on('click', SELECTOR_SWITCHER_TV, function() {
toggleSwitcherTV();
});
})();
</script>
<style>
$color-text: #e1eef6;
$color-link: #ff5f2e;
$color-link-hover: #fcbe32;
$black: #111111;
body {
font-family: sans-serif;
background-color: $black;
}
a {
color: $color-link;
&:hover {
color: $color-link-hover;
}
}
button {
position: fixed;
right: 20px;
bottom: 20px;
padding: 20px;
font-weight: 700;
font-size: 16px;
}
h1 {
text-align: center;
}
.screen {
background-color: $color-text;
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
content: " ";
overflow: hidden;
// Fallback for old browsers
background: #16222A;
background: -webkit-linear-gradient(to left, #16222A , #3A6073);
background: linear-gradient(to left, #16222A , #3A6073);
background-size: cover;
background-image: url(https://cldup.com/gn3s3Fg75t.gif);
color: $color-text;
}
</style><<set $truth to $tr1 + $tr2>>\
<<if $done is 1>>\
<<timedreplace 3s>>...<<becomes>>Why are you back here?<<becomes>>Do you enjoy this nightmare?
[[Leave.|-intermission-]]<<endtimedreplace>>
<<elseif $last is 1>>\
<<timedreplace 3s>>Hello again.<<becomes>>This has been nice.<<becomes>>But it's time to stop fooling around.
[[Finish this.|Welcome.]]
[[Or do you plan to hide again?|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 1>>\
...
[[Try again.|Title]]
<<elseif $end is 2>>\
<<timedreplace 3s>>...<<becomes>>Is that it?<<becomes>>You don't really understand a thing, do you?
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 3>>\
<<timedreplace 3s>>...<<becomes>>Are you tired?<<becomes>>It's too soon to give up.
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 4>>\
<<timedreplace 3s>>...<<becomes>>It hurts.<<becomes>>It hurts watching you waste so much time.
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 5>>\
<<timedreplace 3s>>...<<becomes>>Again.<<becomes>>Again and again.
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 6>>\
<<timedreplace 3s>>...<<becomes>>How sad.<<becomes>>So much and you still can't understand.
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 7>>\
<<timedreplace 3s>>...<<becomes>>I'm cheering for you.<<becomes>><div class="theImage theText">I want you to do this.</div>
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 8>>\
<<timedreplace 3s>>...<<becomes>>What's the worst that'll happen to you?<<becomes>><div class="theImage theText">It can't be any worse than this.</div>
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end is 9>>\
<<timedreplace 3s>>...<<becomes>><div class="theImage theText">It'll be alright.</div><<becomes>><div class="theImage theText">I'm here.</div>
[[Try again.|Let's begin.]]<<endtimedreplace>>
<<elseif $end gte 10 and $truth lte 1>>\
<<timedreplace 3s>><div class="theImage theText">.̶̨̡̧̲͍̫̩̭̜̰̗̲̜̖̫͕̜̬̮̼̳̬̳̭̟͍̠̤͕̯̙̫̀̍͛͊̑̀́͒́̀͐̑̀͌̌́̓̏̾́̏̈́͋̀̅̿͆̓̕̚͘̚̕̕͜͠.̸̨̨̨̛̭͕̝̠̝̖̖̜͇̘͓̜̤̼̗͇̜̩̥̠̩͉͈̻̆̍̋̅̓̆̌̂͗͗̽̏̿̈́̓̾͊̈́͒̊̑̅͒̆̀̊͛̈́̈́͌͘̚͘͜͝͝͝.̶̡̛̛̥͎̣͉̜͖̟̦̱̫̼͍͚͍̭̃̂̓̾̎͗̔́͒̈́̆̈͑̋̏̾̆́͐̈́̄͌͑̒̒́̿̎̉̌̅̃̓͘͜͜͝</div><<becomes>><div class="theImage theText">I'm so glad you're here with me.</div><<becomes>><div class="theImage theText">We'll keep going.</div>
<div class="theImage theTextlink" data-passage="Let's begin.">Together.</div><<endtimedreplace>>
<<elseif $end gte 10 and $truth gte 2>>\
<<timedreplace 3s>>Hello.<<becomes>>It's been some time.<<becomes>>You're almost there.
[[Just once more.|Let's begin.]]<<endtimedreplace>>
<<set $last to 1>>
<</if>>It's doubtful a bunch of half-dead humans were all that useful.
As funny as it was to think, the most sensible conclusion was that some of the 'residents' were being fed. Thanks to that, you stopped overthinking the sounds outside your door a long time ago.
[[You heard a cry.]]The muscles in your face twitched, as if trying to form an expression.
Sounds were one thing. A cry was another.
You can't think of a time you'd heard something like that.
[[Something about it was strange.]]It was hard to hear through the walls, but it was powerful and laced with emotion.
You weren't sure why it was leaving such an impression on you, but the closer you listened the more you could understand it.
It was needy and desperate, as if all it could do was cry and hope someone listened.
[[It didn't end.]]There was another set of steps, their chaotic beat joining the steady footsteps from earlier.
They moved together, drawing closer to your cell. The gibberish accompanied it, grating but tolerable.
Tolerable.
Why would you think that?
It only took you a moment before you realized.
[[You had heard this voice before.]]As strange as it was to say, you'd become a hopeful sort since your time in here. Becoming this way was a matter of survival.
That was your only explanation for why you could be so sure that it was him.
You leaned forward, careful to not disturb your fragile shape, as if this might help you hear better.
The thrum of words grew louder.
[[Your body reacted.]]You choked.
That made sense. Blood was dribbling out of your mouth and the pockets of exposed muscle that surrounded it.
You laughed. A different you would've considered that to be a mistake, on account of the heaving of your guts that followed it. Pain signalled through you like wildfire.
It didn't ruin the humor of the situation. Not at all.
[[It figured that he would do this to you.]]The sound of your heartbeat hummed loudly in your ears, a sound so strange it had taken you a moment to recognize it.
Had you been in some bizarre stasis this entire time? Waiting for him?
It was one of many things you hadn't been able to explain during your time here.
But if that were true, then...
[[You were beginning to die.]]
In other words, you couldn't waste time like this.
Not when you were this close.
You cried out, though you had no idea what you hoped to achieve.
There weren't any words. It was more like the broken scream of a wounded animal. It was what you were, wasn't it?
You couldn't muster much else. Not after so long of living in silence.
[[It was enough.]]You understood immediately what was happening outside your door.
Someone was being eaten. Strained as the sounds were, you could make it out.
There was only the briefest of screams, followed by the violent thrashing of a body. Like it hadn't even had the chance to die before the predator that lurked outside closed in on it.
A memory quietly resurfaced, as if fitting back into an empty spot reserved only for it.
You understood this well.
[[You were a predator too.]]Humans often were. It wasn't unique only to you, you knew that.
Though as far as you can recall you weren't exactly the kind to eat someone.
That was something you had only seen in him.
[[And now he was here.]]A piece of the door of your cell slid open, the metal groaning with effort. It hadn't been opened before, so it wouldn't be strange to think it wouldn't open at all.
He was different.
You fixed your gaze on the small opening and saw only the sheen of teeth slick with blood.
He was different.
There was no mistaking the way he stuck his stained tongue out and inhaled deeply to sample the air, to sample you.
[[He was different.]]"Someone new?"
You knew this voice. You really did.
You could only feel relief. It swelled within you, quickly overwhelming you. Your eyes stung, as if you'd cry over something like this.
How long had it been since you felt something?
[[It had made you weak.]]That was fine.
It was all fine.
You wanted to do this. You had to. Otherwise he may leave to slake his hunger on the unfortunate body in the hall.
The muscles in your torso tensed. You felt the pull of severed muscle in your neck, doing your best to ignore the gushing iron that dripped hot down your chest.
[[You had to speak.]]<script>
/****************************************************
* Typing Text script- Dy Trey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
interval = 220; // Interval in milliseconds to wait between characters
if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}
function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
}
}
</script><span id="typing">"I've been waiting,"</span> <<timedcontinue 4s>>you manage.
You'd say more, but that alone was a struggle. It hurt. Everything hurt. But you'd still keep going. You'd say everything you had to.
Not that you needed to.
Even he couldn't ignore live prey.
[[He opened the door.]]
His silhouette feels familiar, faintly lit by the soft light behind him. You hadn't noticed the red lights that shone dimly in the distance until now.
There was a science to that sort of thing, wasn't there? Helped in the dark. Something like that. You hadn't exactly tried to remember something like that. It must've made sense with the facility's layout.
But right now it just made something about this nightmarish.
You shouldn't be feeling that.
It took some effort, but you willed yourself to look at his face as he slowly drew closer.
[[There's teeth.]]Was it always like that?
His lips were parted only slightly, like he was appraising the situation and toying with a smile.
"It's you," you whisper, fighting against your failing body.
A small smile formed on his face.
You pressed on, "How long has it been?"
[[His mouth widened.]]More teeth.
His face stretched, the skin tugging tightly around the corners of his mouth as his lips peeled back and exposed his gums. It looked painful.
You felt like you were about to watch his face split in half.
[[Was that the mouth of a human?]]<style>
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<script>
/****************************************************
* Typing Text script- Dy Trey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
interval = 50; // Interval in milliseconds to wait between characters
if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}
function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
}
}
</script><<timedreplace 3s>><div class="wrap"><span id="typing">"They brought someone to play."</span></div><<becomes>><div class="wrap"><div class="example-one" data-text="They brought someone to play.">"They brought someone to play."</div></div><<becomes>><div class="wrap"><div class="example-one" data-text="They brought someone to eat.">"They brought someone to play."</div></div><<becomes>><div class="wrap"><div class="example-one" data-text="someone to eat">"They brought someone to eat."</div></div><<becomes>><div class="wrap"><div class="example-one" data-text="someone to eat">someone to eat</div></div><<becomes>><<becomes>><div class="wrap">[[you remember]]</div><<endtimedreplace>>
<<timedcontinue 2s>>He wasn't a monster.
<<timedcontinue 2s>>That's just what they wanted him to be.
<<timedcontinue 3s>>After what you'd seen, you understood that.
<<timedcontinue 2s>>[[You tell him so.]]<<timedcontinue 1s>>"I know why you're like this."
<<timedcontinue 2s>>You struggled to speak now more than ever. The memory that hit you had taxed your body, pushing you to your already feeble limits. This couldn't end here.
<<timedcontinue 2s>>You watched his face change.
<<timedcontinue 3s>>The smile vanished, taking the teeth you had become so accustomed to with it.
<<timedcontinue 3s>>You could almost make out his face in the darkness, lit only by the hazy glow to his back.
<<timedcontinue 5s>>[[Your eyes met his.]]<<timedcontinue 2s>>It was just the one.
<<timedcontinue 2s>>You didn't think to wonder about where the other one was, if something had happened to it. Nothing like that.
<<timedcontinue 3s>>His eye glinted as it caught the light. Bit by bit, as your eyes adjusted, you could make out the sclera, his iris, down to his pupil.
<<timedcontinue 4s>>It stared down at you. Watching you.
<<timedcontinue 4s>>You were more aware than ever that you were hardly more than half a human, simply laid back against a wall in wait.
<<timedcontinue 4s>>Vulnerable.
<<timedcontinue 4s>>[[His lips peeled back.]]<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
}
html {
font-family: cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
padding: 20px;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
<body translate="no">
<div class="wrap">"You don't know shit."
</div>
<<timed 4s>><<goto "You don't know shit.">><</timed>>
</body>His voice was level, but his words were dripping with venom. His face was twisted in anger and another emotion that you couldn't quite decide on.
You'd call it disgust.
He lurched forward. You already knew this was coming, though. This was the end of the line.
Still.
[[All you could think was how human he looked in that moment.]]Not that it did you any good.
He grabbed you, tossing you across the floor, and you felt your senses blare in pain. The wall must've been inconvenient for a meal.
You wanted to at least upright yourself, if only there had been time.
He was already on top of you.
Your arms were useless but he pinned them all the same. Instinct, you realized.
Instinct must've also been what led him through the motions of digging into your guts and crushing your neck.
[[He had already done that, hadn't he?]]Your skin crawled.
Even if you had no recollection of it, it was imprinted on your body.
Against all reason, you struggled.
An empty wheeze was forced out of your throat, spattering blood on your face.
It was hard to believe this could turn out any other way than your death.
But how could things end like that?
[[There had to be something you could do.]]You came here for a reason.
It was to save him.
You were patient. So terribly patient.
All for this chance.
If remembering something before had made him more human for even the briefest of moments, then maybe there was something else that could move him.
And yet, you had this sinking fear that you had already remembered all you could.
[[That just meant you had to listen to your body's screams.]]<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
}
html {
font-family: cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
padding: 20px;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
<body translate="no">
<div class="wrap"><<timedinsert 5s>>There was something to be said about trauma and the mark it left on you.<<becomes>>\
You could spend a lifetime trying to wash yourself of the horrors you've endured.<<becomes>>\
But it will never go away.<<becomes>>\
It's already made its home deep within you, carving memoirs into your bones.<<becomes>>\
You should hate it for that.<<becomes>>\
Instead, all you could feel was gratitude.<<becomes>>\
It kept the truth safe for you.<<becomes>>\
[[Your trauma was the only way to save him.]]
<<endtimedinsert>>
</div>
</body><script>
// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————
const phrases = [
'nouocaedyr',
'yuo nac erdo',
'you can redo'
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 800)
})
counter = (counter + 1) % phrases.length
}
next()
</script>
<style>
@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
html,
body {
font-family: 'Roboto Mono', monospace;
height: 100%;
overflow:hidden;
}
.container {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
}
.text {
font-weight: 100;
font-size: 28px;
color: #fafafa;
}
.dud {
color: #757575;
}
</style>
<div class="container">
<div class="text"></div>
</div>
<<timed 6s>><<goto "Let's begin.">><</timed>>@@.shadow;This text should have a shadow@@
@@.emboss;This text should be embossed@@
@@.blur;This text should be blurred@@
@@.blurrier;This text should be blurrier@@
@@.smear;This text should be smeared@@
@@.mirror;This text should be mirrored@@
@@.upside-down;This text should be upside-down@@
@@.fade-in-out;This text should fade in and out@@
@@.rumble;This text should be rumbling@@
@@.shudder;This text should be shuddering@@
@@.pulse;This text should pulse once@@
<span class="glitchy" data-text="This is some glitchy text here, let me tell you!">This is some glitchy text here, let me tell you!</span>
Just one <span class="glitchy" data-text="glitchy">glitchy</span> word here.@@.smear;You rushed through the doorway, slamming the door against the wall.
Your lungs burned and your head was splitting from lack of oxygen. Sweat poured down your forehead, dripping into your eyes.
You blinked the salt away as you gasped for air.
[[There's not enough time.]]@@
@@.smear;You weren't alone.
<<if $flashback eq 0>>\
<<elseif $flashback eq 1>>\
<div class="theImage theText">What else is in here? You have to focus.</div>
<<elseif $flashback eq 2>>\
<div class="theImage theText">There must be something here that can help you.</div>
<<elseif $flashback eq 3>>\
<div class="theImage theText">You have to be close. You have to be.</div>
<<elseif $flashback eq 4>>\
<div class="theImage theText">...</div>
<</if>>[[He was in the middle of the room.]]
[[Your blood is boiling.]]
[[There are people lining the walls.]]
[[A man is in the back.]]@@@@.smear;His back was turned to you when you entered.
He turned.
His eyes met yours.
[[His hand was pressed to his neck.]]@@@@.smear;It's hot, unbearably hot.
You're panting, drenched in sweat, and your clothes are sticking to you. You're already pulling at them; you want them off.
Get off. Get off.
The urges swimming around in your head make sense, until they don't.
The heat that consumes you takes a back seat to something much different.
[[You feel powerful.]]@@@@.smear;The way they carry themselves tells you that they're members of this organization.
They seem to be following orders and watching obediently instead of interfering, though they seem ready to react.
Waiting for a signal?
Or maybe this was a spectacle and they were the audience.
[[They're a little too close.]]@@@@.smear;There's something about him that you can't ignore.
It wasn't his appearance or size. He was normal in that regard, unremarkable even.
No, it was how he carried himself. How the others maintained a respectful distance away from him.
He carried himself with confidence, like his status wasn't in question.
[[As if everything here was his doing.]]@@
@@.smear;The expression on his face doesn't match him.
Nothing about him and fear went together.
Then why is it all over his face?
You move toward him, hoping to help him. He needed it, even if he was too foolish to ask for it.
[[He flinched.]]@@@@.smear;He recoiled back, keeping the distance between you.
He swallows and his mouth opens, as if to say something.
Nothing comes out.
You search his face for answers, but you're left feeling even more confused.
He's sweating. You hadn't paid attention to it before, but this wasn't normal. The color of his skin was wrong and the way he clenched his jaw made him look pained.
[[Like a fever.]]@@@@.smear;Maybe that's why you felt like running away.
A natural response to run away from disease. That's all it was. There was nothing dangerous about him otherwise, at least not with you. You weren't his enemy here.
<div class="theImage theText">Then why does it feel like you're about to die?</div>
[[It doesn't matter, you can't abandon him.]]@@@@.smear;You again try to approach him. This time he doesn't retreat.
He started to groan, low and deep. Something about it felt less like a human in pain and more like some sort of beast.
His expression had shifted from fear to something unreadable.
[[But-]]@@
<<set $f1 to 1>>A disgusting, wet crunch filled the dark cell.
Your stomach turned with revulsion, but the sensation was only a phantom. You were so pitifully empty.
It was cold.
[[All you could hear was the gnashing teeth of an animal.|Purgatory]]
<<set $flashback to $f1 + $f2 + $f3 + $f4>><<if $flashback eq 1>>\<<timedreplace 3s>>...<<becomes>>You've come such a long way.<<becomes>>That doesn't mean it's over.
[[There's more for you to see.|There's not enough time.]]<<endtimedreplace>>
<<elseif $flashback eq 0>>\<<timedreplace 3s>>...<<becomes>>You've come such a long way.<<becomes>>That doesn't mean it's over.
[[There's more for you to see.|There's not enough time.]]<<endtimedreplace>>
<<elseif $flashback eq 2>>\
<<timedreplace 3s>>...<<becomes>>The answers are in here somewhere.<<becomes>>You just need to have the will to keep going.
[[Don't stop.|There's not enough time.]]<<endtimedreplace>>
<<elseif $flashback eq 3>>\
<<timedreplace 3s>>...<<becomes>>One more left.<<becomes>>It's all or nothing.
[[If you fail again, what will you do then?|There's not enough time.]]<<endtimedreplace>>
<<elseif $flashback eq 4>>\
<<timedreplace 3s>>...<<becomes>>Do you finally understand?<<becomes>>Whether you do or not, it won't be easy.
[[You won't let that stop you, will you?]]<<endtimedreplace>>
<</if>><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=0A0A0A&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=0A0A0A&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
padding: 20px;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
<body translate="no">
<div class="wrap"><div class="theImage theText"><div class="fade-out">...</div></div><<timedinsert 6s>>[[Try again.|Title]]
<<endtimedinsert>></div>
</body>
@@.smear;You need to fight. You need to fight. You need to fight.
The compulsions invade your mind until it's all you can think about. You were drowning.
That's why you couldn't even see what was in front of you.
A broad hand clapped against your skull, driving it into the wall.
[[An unnatural sound escaped your throat.]]@@@@.smear;When you regain your senses, you see him on top of you.
A knife is in his hand, but his grip is loose. Almost like he simply forgot to put it down.
He strikes you again.
This time you lash out. Your fist cracks against his jaw and you feel a familiar pain dancing along your knuckles.
[[It feels good.]]@@@@.smear;That's not right.
This isn't what you came here to do.
You fight against the fog that clouds your mind, but its hold on you is strong and inviting.
You know how wonderful it'd feel to just let go and give into it. Just that small taste of it told you that much.
But you can't. You came all this way. You absolutely can't.
Your hands trembled, paralyzed, as you fought against the urge to tear into him.
[[He brings a hand to your throat.]]@@@@.smear;Black spots clouded your vision before you had a chance to process the fist clenched around your neck.
You'd have expected him to use the knife to end it. He had the opportunity and the means.
Instead, he cruelly gored it through one of your hands, grinding it deep into the tile beneath you.
You wanted to move. You wanted to fight back.
If only it wasn't the same as giving in. If you moved, there'd be no boundary between defending yourself and killing him.
[[There was no other option.]]@@@@.smear;There was something wrong with this fight.
He'd left his knife in your hand, you were sure of it. He was unarmed, left only with his fists.
<<timedcontinue 5s>>Something carved deep through your entrails. <<timedcontinue 3s>>You puked bile. <<timedcontinue 3s>>The acid burned through each crack of your body, mixing with the blendered mess of your organs.
<<timedcontinue 3s>>The pain was a blur, mingling with the fire in your belly and robbing you of your senses.
<<timedcontinue 3s>>[[Why-|But-]]@@
<<set $f2 to 1>>@@.smear;You don't think they'd moved in on you.
Rather, they had been standing near the entrance of the room in wait. Just circumstance, you tell yourself.
Now wasn't the time to be distracted. If they were here to watch, then it was better to leave them be.
You shift your attention back to him.
There's an uneasy feeling in your gut, but it doesn't matter.
[[You step forward.]]@@@@.smear;Hands close around you, yanking you backwards.
They dig into your shoulders and twist your arms behind you. The hands that close around your wrists and snake along your arms are methodical.
There's a purpose to this, and you'd be stupid to let them do what they wanted.
[[You gather your feet beneath you and pull against them.]]@@@@.smear;You fly forward, much farther than intended. You stagger and catch yourself.
They had released you.
For a moment, you wondered if they were just messing with you. But they hadn't said a word, nothing that'd indicate it was just a whim.
[[Then it hits you.]]@@<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
font-family: 'ahabeshastypewriter';
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>@@.smear;The nerves in your arm were screaming. <<timedcontinue 2s>>The telltale mark of a needle rested in the crook of the offending limb.
<<timedcontinue 4s>>Panic set in.
<<timedcontinue 2s>><div class="theImage theText">What had they done to you?</div>
<<timedcontinue 1s>><div class="fade-in3"><div class="glitch"></div></div><<timedcontinue 5s>><<timedinsert 5s>><div class="fade-inout"><div class="wrap">White noise filled your brain.</div></div><<becomes>>\
<div class="fade-inout"><div class="wrap">It chattered at you.</div></div><<becomes>>\
<div class="fade-inout"><div class="wrap">They were your thoughts.</div></div><<becomes>>\
<div class="fade-inout"><div class="wrap">Urgent and needy.</div></div><<becomes>>\
<div class="fade-inout"><div class="wrap">Begging.</div></div><<becomes>>\
<div class="fade-in2"><div class="wrap"><a class="example-one" data-text="eat" data-passage="But-">eat</a></div></div>
<<endtimedinsert>>
<<set $f3 to 1>>@@.smear;Yes.
You're sure that he was looking at him before you interrupted.
For someone who was toying with others, he looks rather bored. Even when he watches him, his expression is that of disappointment.
[[Then what was the point?]]@@@@.smear;Why go through all this?
It clearly wasn't meeting his expectations.
Or maybe that's just how you felt about these things. You couldn't imagine doing this without something to be gained.
[[What kind of man did that make him?]]@@@@.smear;He hadn't once acknowledged you since you came in. At least not that you could tell.
If you were an inconvenience, he would've had you handled by now. He had enough men on hand.
A nagging feeling told you that you were already accounted for. Not you specifically. No, you weren't someone who necessitated a plan.
[[It was another way to assert his control.]]@@@@.smear;He had humored the idea that someone would come and interrupt.
He probably didn't entirely believe anyone would, but he had to acknowledge it. That way, if it did happen, he was already ahead of the situation.
Control gave him power and as long as he kept that power, then he'd already robbed you of any advantage you had well before you came in here.
[[That's it, isn't it?]]@@@@.smear;There was no mistaking the way he watched him.
It was him.
If only you had understood better what type of person this was, you may have done better. By all rights you should have. You should have known he'd be here.
Maybe you had hoped that he would have killed him before you arrived.
That's what this was all about, wasn't it?
[[Killing the man who controlled him.|But-]]@@
<<set $f4 to 1>>for a typewriter effect, tag the post like so
t8n-typewriter-
add a number to the end to complete the tag
this number is how many milliseconds it takes before the passage is finished
t8n-typewriter-20
the currently implemented JS allows a user to press spacebar to skip the effect
this JS will work in that capacity ONLY on passages that've already been visited
/*! t8n-typewriter module for SugarCube v2 */
!function(){"use strict";function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),Furl=function(){function Furl(current,append){if(_classCallCheck(this,Furl),Object.defineProperties(this,{node:{value:current},childNodes:{value:[]},value:{writable:!0,value:""},append:{writable:!0,value:!!append},abortTyping:{writable:!0,value:!1}}),this.node.nodeValue&&(this.value=this.node.nodeValue,this.node.nodeValue=""),!this.node.style||"none"!==this.node.style.display)for(var childNodes=this.node.childNodes;childNodes.length>0;)this.childNodes.push(new Furl(childNodes[0],!0)),this.node.removeChild(childNodes[0])}return _createClass(Furl,[{key:"finish",value:function(){for(this.abortTyping=!0;this.unfurl(););}},{key:"unfurl",value:function(parent){if(this.append&&(parent&&parent.appendChild(this.node),this.append=!1),this.value)return this.node.nodeValue+=this.value[0],this.value=this.value.slice(1),!0;for(var current=this.node,i=0,len=this.childNodes.length;i<len;++i)if(this.childNodes[i].unfurl(current))return!0;return!1}}],[{key:"typeout",value:function(content,typeDelay,startDelay){function typer(){if(!furled.abortTyping)var current=passage(),typerId=setInterval(function(){!furled.abortTyping&&passage()===current&&furled.unfurl()||clearInterval(typerId)},typeDelay)}var furled=new Furl(content);return startDelay?setTimeout(typer,startDelay):typer(),furled}}]),Furl}(),tagRe=/^t8n-typewriter-(\d+)(?:-(\d+))?$/;postrender["t8n-typewriter-handler"]=function(content){$(document).off("keypress.t8n-typewriter");for(var current=this.title,tags=this.tags,i=0;i<tags.length;++i){var match=tagRe.exec(tags[i]);if(null!==match){if("break"===function(){var furled=Furl.typeout(content,Number(match[1]),Number(match[2]));return $(document).on("keypress.t8n-typewriter",function(ev){32!==ev.which||ev.target!==document.body&&ev.target!==document.documentElement||!State.passages.slice(0,-1).some(function(pn){return pn===current})||(ev.preventDefault(),$(document).off("keypress.t8n-typewriter"),furled.finish())}),"break"}())break}}}}();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Flickering Light Text Effect</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
background: linear-gradient(45deg, #2d2d2d 9%, black 100%);
width: 100%;
height: 100%;
}
h1 {
font-family: 'CoreCircus', sans-serif;
font-size: 14vw;
text-align: center;
line-height: 1;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
color: #2d2d2d;
letter-spacing: -.5rem;
}
h1:before {
content: attr(data-heading);
position: absolute;
overflow: hidden;
color: #ffcc00;
width: 100%;
z-index: 5;
text-shadow: none;
left: 27%;
text-align: left;
-webkit-animation: flicker 3s linear infinite;
animation: flicker 3s linear infinite;
}
@-webkit-keyframes flicker {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: .99;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow: none;
}
}
@keyframes flicker {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: .99;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4), 1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4), 1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow: none;
}
}
/*
* Webfont: CoreCircus by S-Core
* URL: http://www.myfonts.com/fonts/s-core/core-circus/regular/
* Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
* Licensed pageviews: 10,000
*
* Webfont: CoreCircus2DDot1 by S-Core
* URL: http://www.myfonts.com/fonts/s-core/core-circus/dot1/
* Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
* Licensed pageviews: 10,000
*/
@font-face {
font-family: 'CoreCircus2DDot1';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.ttf") format("truetype");
}
@font-face {
font-family: 'CoreCircus';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf") format("truetype");
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<h1 data-heading="i">Flicker</h1>
</body>
</html><style>
html, body {
height: 100%;
overflow: hidden;
user-select: none;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(#1a1a1a, #000);
}
h1 {
font: 300 50px/1 courier;
white-space: nowrap;
color: whitesmoke;
}
span {
display: inline-block;
animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
transform-origin: center;
}
span:nth-of-type(1) {
animation-delay: 0.25s;
}
span:nth-of-type(2) {
animation-delay: 0.5s;
}
span:nth-of-type(3) {
animation-delay: 0.75s;
}
span:nth-of-type(4) {
animation-delay: 1s;
}
span:nth-of-type(5) {
animation-delay: 1.25s;
}
span:nth-of-type(6) {
animation-delay: 1.5s;
}
span:nth-of-type(7) {
animation-delay: 1.75s;
}
span:nth-of-type(8) {
animation-delay: 2s;
}
span:nth-of-type(9) {
animation-delay: 2.25s;
}
span:nth-of-type(10) {
animation-delay: 2.5s;
}
@keyframes stretch {
5% {
transform: scaleX(5000);
opacity: .1;
}
15% {
transform: scaleX(1);
opacity: 1;
}
}
</style><body><h1><span>y</span><span>o</span><span>u</span><span> </span><span>c</span><span>a</span><span>n</span><span> </span><span>r</span><span>e</span><span>d</span><span>o</span></h1>
</body>You can't let it end like this.
Maybe something here is enough to startle him back, enough to save him from the nightmare that has trapped you both.
You'd long given up on yourself, after all.
You have to do this, before it's too late.
[[It's time to go back to the present one last time, before he finishes you off.]]<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no"><div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="he was an assassin">he was an assassin</div><<timedcontinue 5s>><div class="example-one" data-text="no different than you">no different than them</div><<timedcontinue 5s>><div class="example-one" data-text="none of you had realized it">none of you had realized it</div><<timedcontinue 5s>><div class="example-one" data-text="not at first">not at first</div><<timedcontinue 5s>><div class="example-one" data-text="he was just another civilian">he was just another civilian</div><<timedcontinue 5s>><div class="example-one" data-text="that's how it was supposed to be">that's how it was supposed to be</div><<timedcontinue 5s>><div class="example-one" data-text="if only that were true">if only that were true</div><<timedcontinue 5s>><div class="example-one" data-text="it's one thing to be a professional hitman">it's one thing to be a professional hitman</div>
<<timedcontinue 5s>><a class="example-one" data-text="but that wasn't his true identity" data-passage="but that wasn't his true identity">but that wasn't his true identity</a>
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="in reality...">in reality...</div><<timedcontinue 5s>><div class="example-one" data-text="he was nothing more than a piece of property">he was nothing more than a piece of property</div><<timedcontinue 5s>><div class="example-one" data-text="an attack dog sent out to kill his master's mark">an attack dog sent out to kill his master's mark</div><<timedcontinue 5s>><div class="example-one" data-text="how strange his life must have been">how strange his life must have been</div><<timedcontinue 5s>><div class="example-one" data-text="his freedom lasted only as long as it took him to finish the job">his freedom lasted only as long as it took him to finish the job</div><<timedcontinue 5s>><div class="example-one" data-text="when his task was completed...">once his task was completed...</div>
<<timedcontinue 5s>><a class="example-one" data-text="he was retrieved like the tool he was" data-passage="he was retrieved like the tool he was">he was retrieved like the tool he was</a>
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="you weren't able to help him">you weren't able to help him</div><<timedcontinue 5s>><div class="example-one" data-text="you have to remember, it's not your fault">you have to remember, it's your fault</div><<timedcontinue 5s>><div class="example-one" data-text="he didn't tell you, not until the end">he didn't tell you, not until the end</div><<timedcontinue 5s>><div class="example-one" data-text="when you went to find him, he was already gone">when you went to find him, he was already gone</div>
<<timedcontinue 5s>><a class="example-one" data-text="why couldn't that have been it" data-passage="why couldn't that have been it">why couldn't that have been it</a>
<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="an anonymous user had left your group a file">an anonymous user had left your group a file</div><<timedcontinue 5s>><div class="example-one" data-text="it was his file">it was his file</div><<timedcontinue 5s>><div class="example-one" data-text="it was exactly what he had told you">it was exactly what he had told you</div><<timedcontinue 5s>><div class="example-one" data-text="but there was more than that">but there was more than that</div><<timedcontinue 5s>><div class="example-one" data-text="it wasn't all that terrible">it wasn't all that terrible</div>
<<timedcontinue 5s>><a class="example-one" data-text="more unfortunate than anything else" data-passage="more unfortunate than anything else">more unfortunate than anything else</a><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="not only was he a hunting dog">not only was he a hunting dog</div><<timedcontinue 5s>><div class="example-one" data-text="he was also used in drug experimentation">he was also used in drug experimentation</div><<timedcontinue 5s>><div class="example-one" data-text="according to the file, his constitution was suited for it">according to the file, his constitution was suited for it</div><<timedcontinue 5s>><div class="example-one" data-text="the resulting drugs were profitable for that organization">the resulting drugs were profitable for that organization</div><<timedcontinue 5s>><div class="example-one" data-text="they were stimulants">they were stimulants</div><<timedcontinue 5s>><div class="example-one" data-text="you saw them often in your line of work">you saw them often in your line of work</div><<timedcontinue 5s>><div class="example-one" data-text="it was easy to tell who abused them">it was easy to tell who abused them</div><<timedcontinue 5s>><div class="example-one" data-text="they were notoriously mind altering">they were notoriously mind altering</div>
<<timedcontinue 5s>><a class="example-one" data-text="he was no exception" data-passage="he was no exception">he was no exception</a><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=282828&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="the file reflected this">the file reflected this</div><<timedcontinue 5s>><div class="example-one" data-text="the verbage changed">the verbage changed</div><<timedcontinue 5s>><div class="example-one" data-text="he hadn't been regarded as much more than property before">he hadn't been regarded as much more than property before</div><<timedcontinue 5s>><div class="example-one" data-text="but by the end of the file, he was just a beast">but by the end of the file, he was just a beast</div><<timedcontinue 5s>><div class="example-one" data-text="you wouldn't have believed it">you wouldn't have believed it</div><<timedcontinue 5s>><div class="example-one" data-text="after all, you had seen him yourself">after all, you had seen him yourself</div><<timedcontinue 5s>><div class="example-one" data-text="he was nothing like an animal">he was nothing like an animal</div><<timedcontinue 5s>><div class="example-one" data-text="but you couldn't argue with the file">but you couldn't argue with the file</div><<timedcontinue 5s>><div class="example-one" data-text="not after looking at the photos">not after looking at the videos</div>
<<timedcontinue 5s>><a class="example-one" data-text="so why then?" data-passage="so why then?">so why then?</a><<link "Saves">><<script>>UI.saves()<</script>><</link>><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=141414&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=141414&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="why did you contact that user back">why did you contact that user back</div><<timedcontinue 5s>><div class="example-one" data-text="what were you hoping to achieve">what were you hoping to achieve</div><<timedcontinue 5s>><div class="example-one" data-text="at the end of the day, he was just one person">at the end of the day, he was just one person</div><<timedcontinue 5s>><div class="example-one" data-text="an assassin like your peers">an assassin like your peers</div>
<<timedcontinue 5s>><a class="example-one" data-text="an assassin like you" data-passage="an assassin like you">an assassin like you</a><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=0A0A0A&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=0A0A0A&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
padding: 20px;
}
html {
font-family: 'ahabeshastypewriter', cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script><body translate="no">
<div class="glitch"></div><div class="wrap"><<timedcontinue 5s>><div class="example-one" data-text="-">-</div><<timedcontinue 5s>><div class="example-one" data-text="you weren't the type to understand these things">you weren't the type to understand these things</div><<timedcontinue 5s>><div class="example-one" data-text="but you acted without understanding, didn't you">but you acted without understanding, didn't you</div>
<<timedcontinue 5s>><div class="example-one" data-text=""></div><<timedcontinue 5s>>[[that was why]]You learned so much. If you could, you'd cry out every feeling you had to bring him back.
But you know full well that with his hands in your guts, you can only muster one sentence.
You don't have any time to think.
Say something, quickly.
<<timedreplace 8s>>[["You're not a monster."]]
[["He did this, not you."]]
[["It's not your fault, I forgive you."]]
[["You didn't mean for this to happen."]]<<becomes>>\
[[...]]
<<endtimedreplace>>That's right.
He needs to know no matter what they've done to him, they can't change who he is.
Say it.
<<timedcontinue 5s>><<typesim "You're a monster.">>
[[Wait-]]<</typesim>>
<<set $t1 to 1>>The one behind this was never him, it was that man.
He'd orchestrated the whole thing. Treated the both of them like playthings.
Say it.
<<timedcontinue 5s>><<typesim "You did this, not him.">>[[How-]]<</typesim>>
<<set $t2 to 1>>No matter what led up to this hell, he hadn't planned this.
It was a sick twist of fate, nothing more.
Say it.
<<timedcontinue 5s>><<typesim "You meant for this to happen.">>[[No-]]<</typesim>>
<<set $t3 to 1>>You could say anything, really. You could pretend what happened didn't happen like that, say anything about why it happened.
That wasn't the point.
The point was, there was someone here who still cared for him, no matter what he's done.
<<timedcontinue 5s>><<typesim "It's all your fault, I'll never forgive you.">>[[I-]]<</typesim>>
<<set $t4 to 1>>You can't muster any words.
Everything is a fog. The memories have melded together.
Does it really matter what you say? Don't they all end up sounding the same?
Please don't feel bad for eating me and everyone else.
Who could buy that. That doesn't bring anyone back.
[[You smile to yourself.]]His teeth make quick work of your neck.
You feel at peace, finally.
Why had you bothered hanging on to hope all this time? Despair is so much more inviting. It had been waiting for you all this time.
[[And now it's time to fall into its embrace.|Oblivion]]<<set $talk to $t1 + $t2 + $t3 + $t4>>\
<<if $talk eq 4>>\
<<timedreplace 3s>>...<<becomes>>It's time to accept what's in front of you.<<becomes>>It's impossible for you to change this.<<becomes>>Nothing can be done about what'll happen to you or him.<<becomes>>The same can be said for the past as well.<<becomes>>Too much time has been lost.<<becomes>>This is not that type of world.
[[Even still, there is hope.]]<<endtimedreplace>>
<<elseif lastVisited("You smile to yourself.") is 1>>\
<<timedreplace 3s>>...<<becomes>>Do you think after all this time it'd be that easy?<<becomes>>You have to save him.<<becomes>>Otherwise this would have all been for nothing.
[[Be quick this time.|It's time to go back to the present one last time, before he finishes you off.]]<<endtimedreplace>>
<<elseif lastVisited("How-") is 1>>\
<<timedreplace 3s>>...<<becomes>>The only piece of him you brought back was his rage.<<becomes>>Did you even try?
[[Do better.|It's time to go back to the present one last time, before he finishes you off.]]<<endtimedreplace>>
<<elseif lastVisited("Wait-") is 1>>\
<<timedreplace 3s>>...<<becomes>>Are you trying to quiet him by destroying what's left of him?<<becomes>>Maybe it's a bit much to assume there's enough left to spare.
[[Be careful.|It's time to go back to the present one last time, before he finishes you off.]]<<endtimedreplace>>
<<elseif lastVisited("No-") is 1>>\
<<timedreplace 3s>>...<<becomes>>Really?<<becomes>>Has your bitterness grown that much?
[[Don't be this way.|It's time to go back to the present one last time, before he finishes you off.]]<<endtimedreplace>>
<<elseif lastVisited("I-") is 1>>\
<<timedreplace 3s>>...<<becomes>>Congratulations.<<becomes>>You can't even begin to understand what you've done.
[[Try not to repeat your mistakes.|It's time to go back to the present one last time, before he finishes you off.]]<<endtimedreplace>>
<</if>>You could swear he stiffened for a moment.
<<timedcontinue 4s>>With one swift motion, he gripped your skull and snapped it backwards, destroying what remained of your neck and spine.
<<timed 8s>><<goto "Oblivion">><</timed>>His eyes shone with rage.
<<timedcontinue 4s>>Your eyes followed his arm, buried shoulder deep inside your body. Something screamed inside you.
He yanked back, and your mind was already gone.
<<timed 8s>><<goto "Oblivion">><</timed>>The slightest rumblings of a snarl bubbled in his throat.
<<timedcontinue 4s>>Teeth closed around your face, digging into your eyeballs.
You never wanted to know what that sounded like.
<<timed 8s>><<goto "Oblivion">><</timed>>You don't recognize the sound that escapes him.
<<timedcontinue 4s>>It's over, just like that.
You feel nothing else, nothing real.
Your skin tingles with the phantoms of sensation, wet and warm, dripping slow and thick.
<<timed 8s>><<goto "Oblivion">><</timed>><<timedreplace 3s>>As many things as there are out of your control...<<becomes>>Your reality is still entirely in your hands.<<becomes>>If you're in hell, you may as well live in a happy delusion.<<becomes>>Don't you agree?<<becomes>>You're out of options.<<becomes>>This is your final gambit.<<becomes>>Live.<<becomes>>[[Or die.]]<<endtimedreplace>><<timedreplace 3s>>...<<becomes>>This alone isn't enough.<<becomes>>You should've done something different back there.<<becomes>>Let's revisit it, one more time.
[[And this time, don't back down.]]<<endtimedreplace>>@@.smear;He was on top of you, just as you remembered it.
Except this was no longer the dark cell that had imprisoned you.
This was the building you had walked into of your own accord.
This is where you will rewrite the horrors that have come to pass.
[[You glance down to your stomach.]]
@@@@.smear;This time you can clearly see his hand tearing through you.
Just as you had thought before, it makes little sense. Human hands shouldn't be capable of that, but you can hardly spare any time lamenting about the realism of your situation.
[[Move.]]@@@@.smear;You redirect that hostility, that violence building within you into a burst of energy, kicking him off of you.
He breaks away from you, jerking his head from side to side as if to clear the haze surrounding him.
He is nothing like how he is in present day.
[[You waste no time in taking advantage of it.]]@@@@.smear;Using your free hand, you wrench the knife out of your other hand and jump to your feet.
You immediately sense the wrongness in your body.
The damage has already been done to your organs, you weren't very interested in seeing just how much.
There was still time to make things right.
[[You check your surroundings.]]@@@@.smear;<<replacelink>>You check what's in front of you.<<becomes>>\
You check what's in front of you.
Ahead of you is the man, watching intently. His face betrayed no emotion.
The men in the room were packed more tightly around him than anywhere else, but you had no incentive to move in that direction. There were no doors, simply a back wall lined with grandiose furniture.<<endreplacelink>>
<<replacelink>>You glance behind you.<<becomes>>\
You glance behind you.
It's exactly as you remember it.
Lined with men who've blocked your escape. You have no interest in heading back there either. You remember quite clearly what you had left behind and it was of no use to you.<<endreplacelink>>
<<replacelink>>You look to the right.<<becomes>>\
You look to the right.
Nothing of interest.
A flock of men and no door besides.<<endreplacelink>>
<<replacelink>>You turn to the left.<<becomes>>\
You turn to the left.
More men, but something catches your eye.
[[Another door.]]<<endreplacelink>>
@@@@.smear;You rush towards it, ignoring the strange sensation in your abdomen.
If you wanted to succeed here, you'll have to pretend you're in top condition.
You had already prepared yourself to fight the men that lurked on that side of the room, but they peel away from the door.
Almost like they're scared.
[[Good.]]@@@@.smear;It made what you had to do easier.
You lacked the wherewithal to open it, instead smashing into it with your shoulder. It broke away much easier than you imagined, leading you to absentmindedly wonder if it was even closed to begin with.
[[Was it a trap?]]@@@@.smear;<<timedreplace 3s>>Who cares.<<becomes>>\
You quickly take stock of your new surroundings.
Ahead of you is a door and to the right of you is a bend. Stepping forward, you see it leads out into a corridor littered with doors that seems to go on and on and on and on and [[on and on and on.]]<<endtimedreplace>>@@
@@.smear;You laugh despite yourself.
You had forgotten the blood pumping in your head. You were under the effects of some drug, weren't you.
Looking away from the abyss, you grab the handle of the door ahead of you and run inside.
[[Had you waited any longer, he would've been on top of you.]]@@@@.smear;Inside is a regular office.
The furniture is mundane and not much can be repurposed as a weapon, at least not at a glance.
You don't have much time to plan either; you can sense him drawing near.
[[You'll have to hide for now.]]@@@@.smear;Hiding may not be glamorous, but it's the only option you have.
Besides, you have no intentions of waiting it out. All you need is a few extra seconds to get control over this situation, then you can play it your way for once.
[[You slide behind the open door.]]@@@@.smear;There was no sense in closing it. He already knew you were inside.
It would buy you a second more if that, but not one that would do you any good.
Instead, you can take advantage of his exposed back when he moves in to investigate the room.
That'll have to do, even if you're not confident in the effectiveness of your plan.
His steps echo in the hallway, drawing steadily closer to you and your trap.
You tense in anticipation.
[[You ready yourself to run out and slam the door behind you, trapping him so you can reason with him later.]]
[[You spring forward to take him by surprise. Disarming him is the only way to take control of him and bring him to his senses.]]@@@@.smear;What you really need right now is time. Time to think, time to understand, time to plan.
Maybe if you had that time, you could've planned for the hand that reaches around the door and grabs you by the face.
The wet crunch of your nose breaking echoes in your skull.
A wail escapes your throat as his fingers tighten around your head, crushing your cheekbones and dislocating your jaw.
Before you can react, the door smashes into your body and presses you into the wall.
Something in your mind tells you you're broken, though you couldn't say by how much.
[[It didn't matter at this point.]]@@
<<set $p1 to 1>>@@.smear;Control was the only way to win this, and it had to be now.
Who knows how long you have before the men outside close in on the both of you. You couldn't count on them to simply wait and see what becomes of you.
As you rounded the corner, you realized he was as ready as you were.
[[He knew you were there after all.]]
@@
<<set $p2 to 1>><<set $past to $p1 + $p2>>\
<<if $past eq 0>>\
<<timedreplace 3s>>...<<becomes>>There's not much room here for failure.<<becomes>>Reconsider your options.
[[Once more.|You slide behind the open door.]]<<endtimedreplace>>
<<elseif $past eq 1>>\
<<timedreplace 3s>>...<<becomes>>There's not much room here for failure.<<becomes>>Reconsider your options.
[[Once more.|You slide behind the open door.]]<<endtimedreplace>>
<<elseif $past eq 2>>\
<<timedreplace 3s>>...<<becomes>>How sad.<<becomes>>This approach is all wrong.
[[It's time to take a step back.|You can't let it end like this.]]<<endtimedreplace>>
<</if>>@@.smear;<<timedreplace 3s>>How did he know?<<becomes>>\
Your body moves by instinct, sliding out of the way of the fist flying for your head.
A small sense of satisfaction sparks within you.
It's quickly snuffed out by the knee that collides with your chin, stunning you.
[[None of this makes any sense.]]<<endtimedreplace>>
@@@@.smear;You should've been able to see that coming, at least some part of it, any part of it.
You know you should do something, but it's already too late.
You're not even conscious any more.
There's the faintest sensation of burning, but you have a feeling your body is past the point of feeling anything.
[[Just an echo of pain in your fractured mind.|It didn't matter at this point.]]<style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
}
html {
font-family: cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
padding: 20px;
background: black;
margin-left: 3.5em;
height: 100%;
overflow: hidden;
user-select: none;
}
h1 {
font: 300 50px/1 courier;
white-space: nowrap;
color: whitesmoke;
}
span {
display: inline-block;
animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
transform-origin: center;
}
span:nth-of-type(1) {
animation-delay: 0.25s;
}
span:nth-of-type(2) {
animation-delay: 0.5s;
}
span:nth-of-type(3) {
animation-delay: 0.75s;
}
span:nth-of-type(4) {
animation-delay: 1s;
}
span:nth-of-type(5) {
animation-delay: 1.25s;
}
span:nth-of-type(6) {
animation-delay: 1.5s;
}
span:nth-of-type(7) {
animation-delay: 1.75s;
}
span:nth-of-type(8) {
animation-delay: 2s;
}
span:nth-of-type(9) {
animation-delay: 2.25s;
}
span:nth-of-type(10) {
animation-delay: 2.5s;
}
@keyframes stretch {
5% {
transform: scaleX(5000);
opacity: .1;
}
15% {
transform: scaleX(1);
opacity: 1;
}
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
<body translate="no">
<div class="glitch"></div><div class="theImage theTextcenter"><<timedreplace 2s>>\
<h1><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span></h1><<becomes>>\
<h1><span>i</span><span>s</span><span> </span><span>t</span><span>h</span><span>i</span><span>s</span><span> </span><span>h</span><span>o</span><span>w</span><span> </span><span>i</span><span>t</span><span> </span><span>e</span><span>n</span><span>d</span><span>s</span></h1><<becomes>>\
<h1><span>h</span><span>o</span><span>w</span><span> </span><span>d</span><span>i</span><span>d</span><span> </span><span>i</span><span>t</span><span> </span><span>t</span><span>u</span><span>r</span><span>n</span><span> </span><span>o</span><span>u</span><span>t</span><span> </span><span>l</span><span>i</span><span>k</span><span>e</span><span> </span><span>t</span><span>h</span><span>i</span><span>s</span></h1><<becomes>>\
<h1><span>i</span><span>s</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span> </span><span>r</span><span>e</span><span>a</span><span>l</span><span>l</span><span>y</span><span> </span><span>n</span><span>o</span><span> </span><span>o</span><span>t</span><span>h</span><span>e</span><span>r</span><span> </span><span>w</span><span>a</span><span>y</span></h1><<becomes>>\
<h1><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span> </span><span>m</span><span>u</span><span>s</span><span>t</span><span> </span><span>b</span><span>e</span><span> </span><span>s</span><span>o</span><span>m</span><span>e</span><span>t</span><span>h</span><span>i</span><span>n</span><span>g</span><span> </span><span>i</span><span> </span><span>c</span><span>a</span><span>n</span><span> </span><span>d</span><span>o</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>d</span><span>o</span><span>n</span><span>'</span><span>t</span><span> </span><span>c</span><span>a</span><span>r</span><span>e</span><span> </span><span>i</span><span>f</span><span> </span><span>i</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>d</span><span>o</span><span>n</span><span>'</span><span>t</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>h</span><span>i</span><span>m</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>d</span><span>o</span><span>n</span><span>'</span><span>t</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>d</span><span>o</span><span>n</span><span>'</span><span>t</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>h</span><span>i</span><span>m</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>d</span><span>o</span><span>n</span><span>'</span><span>t</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>h</span><span>i</span><span>m</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>i</span><span>e</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>s</span><span>a</span><span>v</span><span>e</span><span> </span><span>h</span><span>i</span><span>m</span></h1><<becomes>>\
<h1><span>i</span><span> </span><span>w</span><span>a</span><span>n</span><span>t</span><span> </span><span>t</span><span>o</span><span> </span><span>s</span><span>a</span><span>v</span><span>e</span><span> </span><span>h</span><span>i</span><span>m</span></h1><<becomes>>\
<h1><span>s</span><span>a</span><span>v</span><span>e</span><span> </span><span>h</span><span>i</span><span>m</span></h1>
<<endtimedreplace>>
</div>
</body>
<<timed 35s>><<goto "Welcome to the next level.">><</timed>><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
.example-one {
color: white;
position: relative;
}
@keyframes example-one-anim-1 {
0% {
clip-path: inset(60% 0 4% 0);
}
5.8823529412% {
clip-path: inset(7% 0 65% 0);
}
11.7647058824% {
clip-path: inset(66% 0 29% 0);
}
17.6470588235% {
clip-path: inset(56% 0 27% 0);
}
23.5294117647% {
clip-path: inset(69% 0 32% 0);
}
29.4117647059% {
clip-path: inset(64% 0 5% 0);
}
35.2941176471% {
clip-path: inset(75% 0 9% 0);
}
41.1764705882% {
clip-path: inset(2% 0 47% 0);
}
47.0588235294% {
clip-path: inset(83% 0 11% 0);
}
52.9411764706% {
clip-path: inset(61% 0 34% 0);
}
58.8235294118% {
clip-path: inset(77% 0 3% 0);
}
64.7058823529% {
clip-path: inset(63% 0 7% 0);
}
70.5882352941% {
clip-path: inset(86% 0 3% 0);
}
76.4705882353% {
clip-path: inset(100% 0 1% 0);
}
82.3529411765% {
clip-path: inset(99% 0 2% 0);
}
88.2352941176% {
clip-path: inset(83% 0 1% 0);
}
94.1176470588% {
clip-path: inset(68% 0 8% 0);
}
100% {
clip-path: inset(100% 0 1% 0);
}
}
@keyframes example-one-anim-2 {
0% {
clip-path: inset(76% 0 22% 0);
}
5.8823529412% {
clip-path: inset(80% 0 8% 0);
}
11.7647058824% {
clip-path: inset(6% 0 76% 0);
}
17.6470588235% {
clip-path: inset(53% 0 22% 0);
}
23.5294117647% {
clip-path: inset(42% 0 46% 0);
}
29.4117647059% {
clip-path: inset(6% 0 54% 0);
}
35.2941176471% {
clip-path: inset(22% 0 3% 0);
}
41.1764705882% {
clip-path: inset(74% 0 25% 0);
}
47.0588235294% {
clip-path: inset(24% 0 53% 0);
}
52.9411764706% {
clip-path: inset(16% 0 32% 0);
}
58.8235294118% {
clip-path: inset(67% 0 31% 0);
}
64.7058823529% {
clip-path: inset(61% 0 11% 0);
}
70.5882352941% {
clip-path: inset(6% 0 54% 0);
}
76.4705882353% {
clip-path: inset(27% 0 72% 0);
}
82.3529411765% {
clip-path: inset(39% 0 38% 0);
}
88.2352941176% {
clip-path: inset(9% 0 35% 0);
}
94.1176470588% {
clip-path: inset(28% 0 51% 0);
}
100% {
clip-path: inset(44% 0 22% 0);
}
}
.example-one::before, .example-one::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.example-one::after {
left: 2px;
text-shadow: -1px 0 red;
animation: example-one-anim-1 2s infinite linear alternate-reverse;
}
.example-one::before {
left: -2px;
text-shadow: 2px 0 blue;
animation: example-one-anim-2 3s infinite linear alternate-reverse;
}
body {
font-family: 'ahabeshastypewriter';
}
html {
font-family: cursive;
}
.wrap {
margin: 0 auto;
text-align: center;
position: relative;
}
body {
padding: 20px;
background: black;
margin-left: 3.5em;
height: 100%;
overflow: hidden;
user-select: none;
}
h1 {
font: 300 50px/1 courier;
white-space: nowrap;
color: whitesmoke;
}
span {
display: inline-block;
animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
transform-origin: center;
}
span:nth-of-type(1) {
animation-delay: 0.25s;
}
span:nth-of-type(2) {
animation-delay: 0.5s;
}
span:nth-of-type(3) {
animation-delay: 0.75s;
}
span:nth-of-type(4) {
animation-delay: 1s;
}
span:nth-of-type(5) {
animation-delay: 1.25s;
}
span:nth-of-type(6) {
animation-delay: 1.5s;
}
span:nth-of-type(7) {
animation-delay: 1.75s;
}
span:nth-of-type(8) {
animation-delay: 2s;
}
span:nth-of-type(9) {
animation-delay: 2.25s;
}
span:nth-of-type(10) {
animation-delay: 2.5s;
}
@keyframes stretch {
5% {
transform: scaleX(5000);
opacity: .1;
}
15% {
transform: scaleX(1);
opacity: 1;
}
}
</style>
<!-- --><script>
window.console = window.console || function(t) {};
</script>
<body translate="no">
<div class="theTextcenter"><<timedreplace 3s>>\
<h1><span>s</span><span>a</span><span>v</span><span>e</span><span> </span><span>h</span><span>i</span><span>m</span></h1><<becomes>>\
<h1>[[save him]]</h1>
<<endtimedreplace>>
</div>
</body>
<<timedreplace 3s>><<becomes>>Well done.<<becomes>>You've strengthened your resolve and accepted your fate.<<becomes>>I don't need to convince you.<<becomes>>Not any more.<<becomes>>In order to escape this truth, you must create your own.<<becomes>>There will be no going back.<<becomes>>The world you've lived in up until today...<<becomes>>Will be forever out of your reach.<<becomes>>That's not so bad, is it?<<becomes>>After all, the only thing left for you is to die.<<becomes>>Enjoy your new life.
[[Goodbye.]]<<endtimedreplace>>What an idiot.
<<timed 1s>><<goto "You're back.">><</timed>>You rushed through the doorway, slamming the door against the wall.
Your lungs burned and your head was splitting from lack of oxygen. Sweat poured down your forehead, dripping into your eyes.
You blinked the salt away as you gasped for air.
[[You weren't alone.]]Everything is exactly as you remember it.
He was in the middle of the room, turning to look at you as you entered.
Henchmen rallied behind you, blocking you from the door behind you.
The man behind all of this remained in the back, confident and assured.
[[The only difference was you weren't drugged.]]That meant that unlike your last visit here, your head was much clearer.
That also meant that if he managed to stab a knife through the floor into your hand again, you may not be able to pull it out.
There were pros and cons to be sure, but you were certain that drug was responsible for the fragmented pieces of your mind. You weren't chomping at the bit for another helping.
[[You check your surroundings, again.]]Things are a little different this time.
You take a moment to consider your goal.
<<if $desperation gte 6>>\
You want to save him, but is that really possible?
Can you do that while you're shaking like that?
Stop shaking and get to work.
<<elseif $desperation lt 6>>\
Saving him, of course, but you'll need to find a way to buy time for the drug to work its way through his system.
And if it doesn't... Then you'll absolutely need the time to wait things out and find an opportunity.
In other words, you need to find a good hiding spot.
<</if>>
<<if hasVisited("You check what's in front of you.") and $panic is 1>>[[You check what's in front of you.]]
<<elseif hasVisited("You check what's in front of you.") and $panic isnot 1>>\<<else>>\[[You check what's in front of you.]]
<</if>>\
<<if hasVisited("You glance behind you.") and $panic is 1>>[[You glance behind you.]]
<<elseif hasVisited("You glance behind you.") and $panic isnot 1>>\<<else>>\[[You glance behind you.]]
<</if>>\
<<if hasVisited("You look to the right.") and $panic is 1>>[[You look to the right.]]
<<elseif hasVisited("You look to the right.") and $panic isnot 1>>\<<else>>\[[You look to the right.]]
<</if>>\
<<if hasVisited("You turn to the left.") and $panic is 1>>\
<<else>>\[[You turn to the left.]]
<</if>>\
Ahead of you is the man, watching intently. His face betrayed no emotion.
<<if $panic is 1>>\
The men in the room were packed more tightly around him than anywhere else, but you found yourself caring less and less.
[[Kill him.]]
[[Check elsewhere.|You check your surroundings, again.]]
<<else>>\
The men in the room were packed more tightly around him than anywhere else, but you had no incentive to move in that direction. There were no doors, simply a back wall lined with grandiose furniture.
[[Check elsewhere.|You check your surroundings, again.]]
<</if>>Lined with men who've blocked your escape.
You haven't been dosed yet, so they're tense and ready to grab you when the opportunity presents itself.
<<if $panic is 1>>\
You once found the idea of going back to be nonsense, but now you aren't so sure.
[[You want out - bad.]]
[[Check elsewhere.|You check your surroundings, again.]]
<<else>>\
Like before, you know what's behind it and it's not of much interest to you.
[[Check elsewhere.|You check your surroundings, again.]]
<</if>>Nothing of interest.
A flock of men and no door besides.
<<if $panic is 1>>\
[[Maybe they're hiding something behind them.]]
[[Check elsewhere.|You check your surroundings, again.]]
<<else>>\
[[Check elsewhere.|You check your surroundings, again.]]
<</if>>You turn to the left.
The door from before is there, surrounded by men.
<<if $ld is 1>>Nothing else remains through that hall.
[[Check elsewhere.|You check your surroundings, again.]] <<set $panic to 1>>
<<elseif hasVisited ("It helps that you already know what to expect.")>>[[You know the drill.]]
<<elseif hasVisited ("You could try the door again.")>>There was so much more ground to cover through there.
[[It helps that you already know what to expect.]]
<<else>>\
You have a feeling the men won't be scared of you now that you aren't a walking corpse doped up on stimulants.
[[You could try the door again.]]<</if>>\Like before, you can't hestitate or they might get comfortable enough to fight back.
The men behind you move to jerk you backwards, but they hadn't planned for you to shoot forward so quickly. You hadn't forgotten the last time.
You sprint towards the door and everyone in the room reacts instantly.
Each lackey in the room is now racing towards you with only a few remaining by the man in the back.
[[They shouldn't underestimate a hitman at the top of their game.]]Double-click this passage to edit it.Double-click this passage to edit it.Double-click this passage to edit it.They're probably thinking that you've conquered enough obstacles by now that you'd be winded.
They're right, but they aren't right enough.
You lean to the side, away from an incoming fist, and throw a punch in response without missing a beat.
This momentum could take you all the way to the door if not for the wall of bodies threatening to crash down on you.
[[You're forced to stop and face them.]]The brawl begins awkwardly at first.
They're more interested in grabbing you and pulling you towards, you can only assume, your personal drug.
You pull against them and start swinging.
That's all it takes for them to explode violently.
As much as you want to fight back, all you can do is block.
They're pissed and the only thing that's saving you is the fact only so many of them can have a go at you without accidentally hitting one of their own.
[[They had made a dangerous miscalculation when they swarmed you.]]A guttural growl broke through the discord.
The fists belting you stopped immediately.
They had turned to look at him, left in the room without a care. Many had frozen on the spot. Others began to move away.
No one dared to move towards him.
You knew what they saw.
[[A monster in the shape of a man.]]You'd seen it so many times already, you paid it no attention and shoved the stunned men aside.
They offered no resistance, no doubt hoping your sudden movement would draw his attention.
You threw open the door, appreciating its weight. These doors were bulletproof after all. Your feat of strength from before was absolutely the drug.
[[You made a note to not repeat any particularly reckless behavior.]]You close the door behind you.
The muffled cries of the men in the previous room probably means you have more time than before to find a solution.
Ahead of you is a door and to the right of you is a bend. Stepping forward, you see it leads out into a long corridor littered with doors.
You can see the end of the hallway a ways down, marked by elevator doors.
The signage seems to indicate a stairwell for emergencies as well.
<<if $desperation gte 6>>\
You're supposed to save him.
That doesn't mean you can't buy yourself more time, right? Maybe there's an even better opportunity on another floor.
Right?
<<if hasVisited("The most wonderful idea pops up in your head.", "It's a calculating predator sniffing out its prey.", "A broken gasp left your lips.", "His nostrils flare and you see the anger ignite in his eyes again.", "You could understand that part.", "You give it a test shove - you can block the door with this.", "Absolutely not.", "You lie there, waiting.")>><<else>>\[[Maybe you can try the door from before.]]
<</if>>\
<<if hasVisited("You looked up at him.", "He knows.", "You may as well watch.", "The room was spinning.", "You completely missed the sound of glass being ground into tile.", "You swing forward, before it's too late.")>><<else>>\[[It might be worth looking into the other rooms.]]
<</if>>\
<<if hasVisited("By this point, you're conditioned to expect teeth on the other end.", "The elevator doors are opening now.", "So someone else summoned it.", "It did nothing.")>><<else>>\[[You hope the elevator works.]]
<</if>>\
[[Stairs are reliable and you can scale them quickly.]]
<<elseif $desperation lt 6>>\
The elevator and stairwell isn't of much use to you.
You're here to save him, not to escape.
<<if hasVisited("It's a calculating predator sniffing out its prey.", "A broken gasp left your lips.", "You give it a test shove - you can block the door with this.", "Absolutely not.") and $desperation lt 6>><<else>>\[[Maybe you can try the door from before.]]
<</if>>\
<<if hasVisited("You looked up at him.", "He knows.") and $desperation lt 6>><<else>>\[[It might be worth looking into the other rooms.]]<</if>>
<</if>>You close it behind you.
Inside is a regular office.
The furniture is mundane and not much can be repurposed as a weapon, at least not at a glance.
<<if $desperation gte 6>>\
You look around, panicked.
<<if hasVisited("You hide under the desk.")>><<else>>\[[You hide under the desk.]]
<</if>>\
<<if hasVisited("This is an office building. Maybe the ceiling tiles are worth a shot.")>><<else>>\[[This is an office building. Maybe the ceiling tiles are worth a shot.]]
<</if>>\
<<if hasVisited("Leave it alone.", "Tamper with the lock.", "You give it a test shove - you can block the door with this.", "A broken gasp left your lips.", "You could understand that part.", "His nostrils flare and you see the anger ignite in his eyes again.")>><<else>>\[[There's a large filing cabinet by the door.]]
<</if>>\
<<elseif $desperation lt 6>>\
<<if hasVisited("This is an office building. Maybe the ceiling tiles are worth a shot.")>>\<<else>>\[[This is an office building. Maybe the ceiling tiles are worth a shot.]]
<</if>>\
<<if hasVisited("It's a calculating predator sniffing out its prey.", "A broken gasp left your lips.", "You give it a test shove - you can block the door with this.") and $desperation lt 6>><<else>>\[[There's a large filing cabinet by the door.]]
<</if>>\
<</if>>You begin walking down the hall.
The doors are unremarkable and nothing distinguishes them. The lights are off inside each room.
This is the type of place designed to be navigable only to those who actually know it, not strangers.
Randomly choosing a door is your only option.
<<if $desperation gte 6>>\
<<if hasVisited("The room was spinning.", "You completely missed the sound of glass being ground into tile.", "You swing forward, before it's too late.")>><<else>>\[[You pick a door to your left.]]
<</if>>\
<<if hasVisited("You looked up at him.", "He knows.", "You may as well watch.")>><<elseif hasVisited("You looked up at him.", "He knows.") and $desperation lt 6>><<else>>\[[You pick a door to your right.]]<</if>>
<<elseif $desperation lt 6>>\
<<if hasVisited("You looked up at him.", "He knows.", "You may as well watch.")>><<elseif hasVisited("You looked up at him.", "He knows.") and $desperation lt 6>><<else>>\[[You pick a door to your right.]]
<</if>>
<</if>>
It's a ways down the hallway, so you break into a trot.
As you get closer, you can see there's no helpful interface to tell you what floor you're on.
You're again reminded that the only people who come here know its layout. Anyone too inexperienced to know where they are would be escorted if nothing else.
The standard directional buttons are beside it.
<<if hasVisited("By this point, you're conditioned to expect teeth on the other end.", "The elevator doors are opening now.")>><<else>>\[[Go up.]]
<</if>>\
<<if hasVisited("So someone else summoned it.", "It did nothing.")>><<else>>\[[Go down.]]
<</if>>
The signs indicate it's to the right of the elevator, so you make your way through the corridor and push the door open.
It swings shut behind you.
The stairwell is unremarkable and gives no indicators regarding your location. Typical fire safety precautions aren't here either.
You lean over the railing.
As you expected, there are more flights of stairs than you can count. What you can see is the swarm of men beneath you, their heads bobbing as they climbed.
Above you are more stairs, though the roof is considerably closer to you than the ground floor. You can't hear anyone coming down them.
[[The roof might be what you need.]]
[[There're so many floors beneath you, you can run until something stops you.]]You fall to your knees and scrabble underneath, pressing yourself against its inner walls.
You had to hide.
That's all that mattered.
Hiding.
Hide from him and buy yourself time.
If you don't...
[[If you can't even manage to do this...]]They're a ways up.
You climb on to the desk and stretch up, pressing your fingers into the tile. It gives away easily and you slide it to the side.
Gripping the edge of the bar, you hoist yourself up.
It's a thin bar and it can't support your weight for long.
You scan the tight space and spot the joist.
[[Thank goodness ceilings are so predictable.]]A lateral filing cabinet, to be specific.
It's pretty huge.
You can work with this.
<<if hasVisited("You give it a test shove - you can block the door with this.")>><<else>>\[[You give it a test shove - you can block the door with this.]]
<</if>>\
<<if hasVisited("It's a calculating predator sniffing out its prey.", "You lie there, waiting.")>><<elseif hasVisited("It's a calculating predator sniffing out its prey.") and $desperation lt 6>><<else>>\[[A human can easily fit inside one of these.]]
<</if>>\
<<if hasVisited("His nostrils flare and you see the anger ignite in his eyes again.", "You could understand that part.", "A broken gasp left your lips.")>><<elseif hasVisited("A broken gasp left your lips.") and $desperation lt 6>><<else>>\[[Maybe you can set a trap.]]
<</if>>He might be able to push the door open even with it there. As long as you push against it, you'll have a chance.
It takes only a bit of effort to slide it over and you're done. Too bad about the noise though, an awful grating of metal against tile.
Thankfully this method isn't too concerned about stealth, otherwise you'd have already failed.
You give the drawers a push, making sure they're closed.
[[If you had the time, you'd turn it around so they don't open on you.]]You slid the bottom drawer out, ready for the task of moving the files to another drawer so they weren't left out in the open, but it was actually quite empty.
It was no effort at all to flatten what few files remained and climb in.
You sat down and shifted sideways, pulling your legs to your chest while you slid onto your back. You reached for the back of the cabinet and pulled, drawing it to a close.
[[It clicked.]]Filing cabinets did come with locking mechanisms.
<<if $desperation gte 6>>\
You briefly considered trying to sabotage it. It wasn't too late to tamper with it from inside the drawer.
If you did, it'd remain locked even if someone tried to open it from the outside.
He would be here soon, but he wouldn't be able to tell you'd done it.
<<if hasVisited("Leave it alone.")>><<else>>\[[Leave it alone.]]
<</if>>\
<<if hasVisited("Tamper with the lock.")>><<else>>\[[Tamper with the lock.]]
<</if>>\
<<elseif $desperation lt 6>>\
You briefly considered trying to sabotage it. It wasn't too late to tamper with it from inside the drawer.
Would it be worth it?
[[You're not desperate enough for something like that.|Leave it alone.]]
<</if>>The door opens and you do everything you can to quiet your breathing.
For someone with your background, it's an easy task when you're not drugged or half eaten.
His labored breathing fills the room. It doesn't match the careful nature of his movements. You'd anticipated a frenzied animal like before, but this is nothing like that.
[[It's a calculating predator sniffing out its prey.]]There's no doubt in your mind that your only hope of surviving is by making sure he can't open this.
It's possible his feats of strength included breaking open file cabinets, cabinets you hoped were reinforced for frivolous reasons, but there was no safer alternative.
With one hand holding the back of the drawer to keep it securely shut, you reach for the side of the drawer.
Your heart is beating way too fast, you feel like you're wasting precious oxygen, but you feel around for the wedge block that rests there.
It's not hard to find the snapper once you do.
[[You bend it, fixing it in place.]]You wonder how many times you'll ask yourself this question.
How can he do that?
How can he know you're in a filing cabinet of all fucking things after just a moment of entering the room?
The way his hand latched on to your skull was familiar not only in the way it mashed your brains to mush, but also in the absurdity of how fast he did it.
[[That shouldn't have happened.|Hell]]
<<set $desperation += 1>><<if $desperation is 1>>\
<<timedreplace 3s>>...<<becomes>>I don't have much else to say to you.
[[Try again.|You check your surroundings, again.]]<<endtimedreplace>>
<<elseif $desperation gte 2 and $desperation lte 5>>\
...
<<timedcontinue 3s>>[[Try again.|You check your surroundings, again.]]
<<elseif $desperation is 6>>\
<<timedreplace 3s>>...<<becomes>>You're so stupid.
[[Try again.|You check your surroundings, again.]]<<endtimedreplace>>
<<elseif $desperation gte 6>>\
...
<<timedcontinue 3s>>[[Try again.|You check your surroundings, again.]]
<<elseif $desperation gte 20>>\
<<set $ld to 1>>
<</if>>You need to be quiet.
You need to be still.
If you're quiet, he won't hear you.
If you're still, you'll cool down and stop sweating.
Your heart will stop pounding.
You'll stop wasting oxygen.
You'll survive.
So stop breathing so loud.
Stop breathing so loud.
[[Stop breathing so loud.]]
He heard you, because of course he did.
You can hear your heartbeat in your skull. It feels like it's thrashing against your eyeballs.
Are you hyperventilating?
Of course you are.
That's why he's shaking the file cabinet right now.
[[Because you just won't shut up.]]You're laughing or crying, one of the two.
Maybe even both.
The entire file cabinet is throttled violently, flinging you back and forth into the walls of the cabinet interior.
It hurt, but not as bad as everything else up to this point had.
[[You rattled inside the cabinet for what felt like forever.]]But it wasn't forever.
He skulked off, you think. You don't know, not really. Everything's so loud in your head. You wouldn't be able to hear him.
The sound of meat hitting metal, bone clacking against hard corners, that had been you.
All you know is, it stopped.
[[You lie there, waiting.]]<<timedcontinue 3s>>It was hot and clammy in here, you realized. <<timedcontinue 3s>>Was it getting hotter?
<<timedcontinue 3s>>What was up with that anyway?
<<timedcontinue 3s>>You swallowed for air. <<timedcontinue 3s>>You needed that. A precious resource.
<<timedcontinue 3s>>You tried to stretch out your legs, but they curled towards your back instead.
<<timedcontinue 3s>>That feels wrong. What's that doing there? <<timedcontinue 3s>>You have to get out and figure out what's going on.
<<timedcontinue 3s>>You push as hard as you can to slide the drawer open.
<<timedcontinue 3s>>It won't open.
<<timedcontinue 3s>>That's weird, why won't it open? <<timedcontinue 3s>>Drawers are supposed to open.
<<timedcontinue 3s>>You push again. Why won't it open? You can't breathe.
<<timedcontinue 3s>>You bang on the drawer. <<timedcontinue 3s>>As loud as you possibly can. <<timedcontinue 3s>>Why won't it open? You can't breathe.
<<timedcontinue 3s>>You claw at it when nobody responds.
<<timedcontinue 3s>>[[Not even him.|Hell]]
<<set $desperation += 1>>If you could manage to pin him beneath something, maybe you'd have that opportunity to shake him out of the fog he's in.
The drug may be too effective to disrupt, but you'd consider anything a victory right now.
You grab the corner of the filing cabinet and experimentally lean it back, bracing a foot against it.
It's heavy, heavy enough to inconvenience him but not so heavy you can't tip it over.
[[You maneuver the cabinet so the drawers are facing the doorway.]]
<<if hasVisited("You quickly take stock of what's around you.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][You quickly take stock of what's around you.]]">><<else>>\<</if>>Something like that really doesn't matter though.
You thought it might, genuinely, until you heard the click of the door handle and you felt no resistance against the file cabinet.
Something you failed to note was the door to the room opened outwards, not inwards.
You can't help feeling stupid. It was a simple detail a past you would've noticed immediately.
It's too bad his reaction speed is what it is, otherwise you might've had a fighting chance. It occurred to you just the same, after all, that you may as well push the filing cabinet on to him.
[[The filing cabinet flew towards you.]]It hurts, you suppose, much like everything else has.
He didn't push it over, he launched it at you and it took you with it. You can't tell where you landed, all you know is you're under a filing cabinet and who knows what else.
You're not sure where your arms are right now. You can feel the steel pressing you down, biting into your skin and rubbing against your bones.
Anything more than that is a mystery to you.
Your eyes sting, but you see nothing.
[[The faintest whisper of a laugh echoes in the room.|Hell]]
<<set $desperation += 1>>You know full well it's designed so it doesn't tip. That's typically with the understanding that nobody is actively trying to tip it, at least.
You take position behind it and listen carefully for his steps.
They're not soft by any means, but they are slow and precise. His breathing is hard and ragged.
[[It's no trouble at all to time it right.]]Pool's closed, kids.He folds beneath it without a sound.
All you hear is the grating of the filing cabinet and a small clatter.
You'd think you had failed if not for the sight of him underneath.
His head and shoulders are sticking out. His skin is flushed and the sweating is worse than you remember. He growls deep from beneath the filing cabinet.
You realize all he's struggling to breathe.
[[You quickly take stock of what's around you.]]There are office supplies on the desk.
A stapler, pens, and a letter opener.
You're not sure how viable any of those would be, but you suspect a letter opener owned by an organization like this is probably a little lethal in its own right.
Looking to the rest of the room, you see your way is clear if you can jump over him.
<<if $desperation gte 6>>\
<<if hasVisited("Those supplies are the safest way to arm yourself.")>><<else>>\[[Those supplies are the safest way to arm yourself.]]
<</if>>\
<<if hasVisited("There was something strange about that clatter from earlier.")>><<else>>\[[There was something strange about that clatter from earlier.]]
<</if>>\
<<if hasVisited("Nothing here is useful. It's time to leave.")>><<else>>\[[Nothing here is useful. It's time to leave.]]
<</if>>\
<<elseif $desperation lt 6>>\
[[Nothing here is useful. It's time to leave.]]
<</if>>It sounded different from the filing cabinet.
You scan the floor in hopes of finding it, but all you see are documents scattered about.
He's large enough that he leaves a considerable gap between the floor and the filing cabinet.
[[You squat carefully and peer beneath it.]]As much as you like the idea of arming yourself, none of these tools are long enough to keep you out of his reach.
You know he has a knife somewhere on his person, but you're not desperate enough to search for it, especially if it's still on his person.
He seems pretty docile under there for now.
You look again to confirm it before you jog into a leap.
[[He had the face of a confused animal.]]You move towards the desk and reach for the letter opener, giving it a twirl between your fingers.
Its weight confirmed your suspicions.
It may not have the same cut as a proper knife, but this was definitely good enough to do something.
You grabbed the stapler without thinking. Maybe you just liked the weight of it.
[[You turned back to him.]]That's why you would've never expected the hand around your ankle.
It puzzles you.
When will you learn he defies all reason?
His arm had shot up and snagged you well after you had jumped.
Your world turned violently and your back hit the floor.
[[A broken gasp left your lips.]]The air was forced from your lungs and you heard the sickening crack of your skull.
Blood poured underneath you, a sticky warmth mixed with the dirt of the floor as he pulled you towards him.
You felt your ankle crunch in his grip.
A part of you wanted to look down, down at him.
The rest of you screamed.
You'd seen enough of him already.
You didn't need to see more.
[[You didn't want to see the teeth.|Hell]]
<<set $desperation += 1>>The knife.
His knife.
It's his knife.
[[Without thinking, you lunge for it.]]He laughed beside you as your arm darts beside him.
You can't help but glance at him.
His eyes follow you, but he doesn't stop you.
[[You jerk back before he changes his mind.]]He remains still, watching.
You hold the knife close to you, as if he'll teleport in front of you and take it from you.
He shows no signs of moving. Even more perplexing, he doesn't appear to have any reason he can't get up.
His eyes lock with yours and you're filled with the hurt and rage from everything he's done.
[[You weren't supposed to feel that way.]]He knew that, you think. That's why he waited. Goading you on, giving you the power at last.
He didn't like your hesitation though. That's why he gathered his hands beneath him and slowly pushed himself up even though you know he was completely capable of shoving it off like it was nothing.
You think he wanted this.
That's the only explanation.
[[There's no other way he would've let you gouge his eyes out.]]To be fair, you don't understand why you're doing this right either.
You were supposed to save him.
You weren't supposed to be stomping on his eyeballs as they rolled around on the ground.
Who cares anyway.
He's laughing at you like an animal. Hoarse and rough without a lick of humanity.
That's probably why you jabbed the knife in his mouth and sliced through his gums.
[[You could understand that part.]]You hated him and his teeth and you were never going to give them back to him.
You swallowed them.
They cut the way they always did as they worked their way down your throat.
The thick ichor of blood filled your mouth.
[[You laughed with him.|Hell]]
<<set $desperation += 1>>He was quiet while you searched, but now he seemed bored.
He moved to push himself up, working his hands out from underneath him. There was no urgency to it, he moved like a disinterested, lazy child.
That ticked you off.
After all this, he was going to act like you weren't worth the time?
[[You walked towards him.]]He looks up at you as you come close, pausing.
Sweat drips down his face and pools at his chin. His pupils are blown and his eyes are ringed with red.
Somehow he looks perfectly fine.
You smile down at him.
[[You drive the stapler into his hand.]]He doesn't flinch at all, instead he resumes slowly getting up.
You take that as an invitation to work your way around his fingers, stapling his nails into his fingers and paying special attention to the edge of his fingertips.
There is no sound other than the harsh click of the stapler.
You don't feel any joy from this. Your blood is running cold but it drives you forward.
In this moment, you're nothing more than a child causing harm simply because you can. It means nothing to you past that.
[[You think you hear him chuckle.]]Your hand flies out, letter opener in hand, and slashes his throat over the disrespect.
He hadn't laughed at all, you realized. That was just the sound of a feverish man groggily getting up.
You could tell by the way he cranes his head to peer at you that he's baffled by what you've done.
[[His nostrils flare and you see the anger ignite in his eyes again.]]He breathes deep and in a blink his teeth are buried in your throat, ripping and pulling.
There we go.
That's how he's supposed to feel.
[[How could he ever find you boring?|Hell]]
<<set $desperation += 1>>You touched your throat, carefully feeling the unbroken skin.
You sobbed reflexively.
It's dry and empty. You hadn't been crying and yet it worked its way up out of you.
A leftover from your past life.
That's what it was, wasn't it?
[[A past life.]]Your hands work their way along your throat and run through your scalp.
You hold your head between them.
It was comforting almost, not that it stopped the awful quaking in your hands.
You hear him.
He's in the room now.
[[The most wonderful idea pops up in your head.]]He can't find you if you're gone.
[[With a flick of your wrists, you snap your neck.|Hell]]
<<set $desperation += 1>>It's too dark to tell what kind of joist, so for now you slide the ceiling tile back in place.
You needed it to be in reach, so you hopped off the desk and quickly slid it along the floor closer to its edge.
Once more, you climbed up and set the ceiling tile aside.
The joist was well within reach now.
With a final pull, you clambered on top of the thin bar and latched on to the joist.
The space was small, so you were forced to draw your legs close to your body and hang.
[[You reached for the wire connected to the tile and dropped it back in place.]]The darkness made it easier to focus on him shuffling around inside the room.
You hear the sound of the desk as it collides into the window, shattering it. You wouldn't be surprised if it had flown outside.
He knew you were there, but he hadn't put two and two together.
That didn't stop him from trashing the room, destroying everything else in it.
[[He didn't seem like he was leaving, either.]]He knew you were there somehow, even if he didn't understand how.
You supposed it was obvious. He knew you had gone in there and he didn't see you leave, so it makes sense you're still there.
Still, wouldn't you consider the possibility that you missed something and investigate somewhere else?
[[Though you supposed that required a human's logic.]]You so often found yourself in the trap of thinking he was human at all, didn't you?
Your arms ached as you dangled. You scrunched your face as you tried to maintain your breathing. It was tempting to take big gulps, but the last thing you needed is him tearing down the ceiling to find you.
Maybe he'd hear you like a beast would. That's if he didn't sniff you out first.
You slid your hand up the joist bit by bit, dragging yourself along in the hopes you'd find it it to be a truss joist. Anything that you can rest in.
[[No such luck.]]You had no idea what they based their architectural decisions on. It wasn't working out in your favor at all.
You pulled yourself up a bit more, careful as to not hit your head on the low ceiling.
It relieved some of the pressure off your hands, but having it on your forearms wasn't much better. There wasn't much space to slide in and lie down, otherwise you would've absolutely tried.
His heaving breathes echoed beneath you.
Why wouldn't he leave?
[[Leave already.]]<<timedreplace 3s>><<becomes>>You had waited so long, clung to this pathetic beam for what felt like eternity.
You bit the inside of your cheek as you slid back down to gripping the joist in your hands.
You weren't sure how long you could hang like this. The burning in your muscles and the ache of your fingers told you not much longer.
You can't listen to your body though. It's weak and tired, but you are not.
Even if it wants to fall into his jaws, even if it wants to die, you won't die.
No way.
[[Absolutely not.]]<<endtimedreplace>>You're trembling in anger at yourself.
No, that's the exhaustion.
There's your body lying again. It's good at that, but you've got it figured out now.
It told you the lie that you were alive for how long? How long did you wait there, nothing more than a half finished meal?
Lost in your thoughts, you didn't notice the shifting of the wire beside you.
You're blinded by the light spilling in.
No you're not, that's just another lie.
[[Your body so loves to lie.|Hell]]
<<set $desperation += 1>>Peeking in, it appears to belong to someone of decent standing, or maybe someone with a decent pocket.
You close the door behind you as you step inside.
There's an extravagant desk with all the supplies custom made.
A couch is pressed up against the far wall.
You see a fairly large ceiling vent near it.
<<if $desperation gte 6>>\
<<if hasVisited("You may as well watch.")>><<else>>\[[A couch that large can hide a person.]]
<</if>>\
<<if hasVisited("You looked up at him.", "He knows.")>><<else>>\[[That vent may be large enough to crawl into.]]
<</if>>
<<elseif $desperation lt 6>>\
<<if hasVisited("You looked up at him.", "He knows.")>><<else>>\[[That vent may be large enough to crawl into.]]
<</if>>
<</if>>Not much catches your attention here.
Another office, or so you thought.
The window here is fairly large and unobstructed. Whoever this belongs to isn't big on furniture.
That meant you didn't need to waste time on clearing the area, you could spend all the time you had left on breaking that window.
You pull the door closed behind you and get to work.
On the desk are paperweights. They're plain, much like the room, but are of good quality.
A minimalist, then.
[[You sling one into the window without a second thought.]]
<<if hasVisited("You grip the cable and swing the paperweight out the window.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][You grip the cable and swing the paperweight out the window.]]">><<else>>\<</if>>
It must be the terrified child in your brain speaking for you.
But it's right.
You run for it.
You lift the cushions off of it and press into it with your hand. The springs push against your hand through the mesh.
[[You rip it open.]]It's conveniently placed by the couch.
All you need is something to unscrew it with. You're sure you can repurpose something for the task.
You swipe the box of paperclips resting on the desk before you stride over to the couch, climbing it like a short pair of stairs.
You take one and slip the rest into your pocket, in case you need a replacement, and set to removing the screws.
[[The task is quiet enough that you don't think he'll come charging in.]]
<<if hasVisited("That'd make what you were about to do easier.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][That'd make what you were about to do easier.]]">><<else>>\<</if>>
It shatters.
That meant this was possible after all.
You move to the desk and search near the computer. You swipe the network cable attached to it and follow it to its connection, taking it for yourself.
You're fortunate enough to find more by the wall.
[[Tie it around the remaining paperweight.]]<div id="passages"></div> <div id="sidePanel" data-passage="sidePanel"></div> <div class="navbar">\
<span class="button"><<link "<img src='https://cdn.discordapp.com/attachments/463241551066169344/706399507495125082/Save_wiggle.gif'>">><<script>>UI.saves()<</script>><</link>></span>
<span class="button"><<link "<img src='https://cdn.discordapp.com/attachments/463241551066169344/706405536488488970/ezgif-1-47abbb0a0cc4.gif'>">><<run UI.restart()>><</link>></span>
<<if _skip>><span class="button">_skip</span><</if>>
</div>Its shape is good for securing the cable around it. You give it an experimental tug and it holds fast.
You walk to the edge of the room and stare out into the abyss.
You see nothing but pitch black darkness stretching on. No nearby buildings, no stars, nothing. All you feel is the tightness of the air and the force of the wind, confirming you're many stories high.
You don't remember climbing that much. Maybe you would've had reservations about reaching this floor, but you weren't anticipating ever being in a situation where escaping by window was a viable option.
Not that you were planning to jump out.
[[You grip the cable and swing the paperweight out the window.]]It arcs and you hear the window below you break.
If the paperweight was a little larger, it might've landed properly in the room, but it waved helplessly in the wind.
Not a problem.
You look behind you. You can hear him in the corridor now, but you have enough time to do what you need to do.
The other end of the network cable is still in your hands.
<<if hasVisited("You swing forward, before it's too late.")>><<else>>\[[Tie it to the desk.]]
<</if>>\
<<if hasVisited("The room was spinning.", "You completely missed the sound of glass being ground into tile.")>><<else>>\[[Tie it to the door handle.]]
<</if>>
It's the quicker option since the desk is well within reach.
You're unsure about its ability to hold your weight, but you won't need to hang for very long. With the right momentum, you can swing out well before the desk moves.
You fasten it to the leg closest to you, looping it through the cabinet so the cable won't slide out from under it.
You pull it taut as you walk it to the edge of the room.
[[You clear the glass away to the best of your ability and slide down.]]The only issue is it requires more time than you'd like to get it over there, but you trust it more than a piece of furniture.
The network cable isn't long enough as is, so you twine it with the extras you have on hand and secure it with a knot.
You loop the end around the door handle and do the same. Thanks to its style, you're confident it'll still hold even if he opens it before you're done.
His steps are closer.
He's here.
[[Jump out the window.]]You grab for the cable before you do, tightening your grip around it, and you're out.
The air has a different feel to it out here. It'd be refreshing if not for the fact you were now swinging precariously near two broken windows.
You shimmy lower, gently setting your feet on the paperweight at the end, placing you directly in front of the window of the lower floor.
As you rock towards it, you realize there's no time to build up momentum properly.
<<if hasVisited("You completely missed the sound of glass being ground into tile.")>><<else>>\[[Take the extra time needed.]]
<</if>>\
<<if hasVisited("The room was spinning.")>><<else>>\[[Jump.]]
<</if>>Hadn't you already accounted for that with the door handle?
You lean forward and back, bit by bit, and leap.
Your body moves automatically, your arms drawing close to your face and your legs pulling up to your chest.
You roll through the shattered window, the protruding shards grazing you.
[[Nothing terrible.]]Aren't you some kind of professional killer?
You can make this jump.
So you do.
As you soar through the air, it occurs to you that making the jump wasn't what you needed to worry about.
Your body might be at its best, but your mind wasn't. As far as your brain is concerned, you've been out of the game for what feels like years.
[[The real issue here was the glass.]]You had completely forgotten to shield yourself from it, and part of you isn't sure that you had the time.
It shredded you as you entered the room, filling your head with the sounds of crisp glass cracking and burying itself into flesh.
You landed poorly thanks to that, rolling into the fragments on the floor.
[[The room was spinning.]]Your fingertips crept along your body without you realizing it, trembling and flinching away whenever they split against the glass buried in your skin.
You no longer had the ability to process if any of the wounds were deep or lethal.
It no longer mattered.
You had already lost too much blood.
That's alright. It would work out fine like this.
[[The crunching of glass behind you tells you as much.|Hell]]
<<set $desperation += 1>>Your landing was practiced, like all the times before it.
Keeping your head clear and ignoring the time crunch was paying off. It allowed your body to work on auto pilot so it could remember the finer details that you'd forgotten.
You stood up and looked around, finding it to be another office. You were lucky this one seemed to be unused, otherwise furniture may have blocked your entrance.
[[You rush for the door.]]You hadn't noticed in the darkness.
There's no handle.
That's what's happening here, right?
You swipe your hands along every inch of the door, feeling it beneath your fingertips, searching for something, anything.
If there was no handle, there should be a place for it.
[[But you can't feel a thing.]]Your heart starts beating faster.
The way behind you was open for him. He was probably more than capable of getting in even without your makeshift rope.
The urgency in you is quickly twisting into desperation.
You continue to feel for the door, searching for the cracks in the doorframe.
[[There was no doorframe.]]That didn't make any sense.
Hadn't you seen a door here? Maybe you got confused. Maybe if you just search the wall, you'll find it.
You slap the wall in front of you, hoping to hear something different.
Nothing.
You moved further along it, smacking it again.
Nothing.
[[You completely missed the sound of glass being ground into tile.]]What a shame.
It's always a shame, isn't it?
He seemed entertained by your antics, the way you tried to escape him. It would explain why he stared at you in the blackness of the room, why he didn't move towards you.
Surely he found it even funnier when you ran past him and jumped out of the window.
[[The sickening splat of your body hitting the ground must've been hilarious.|Hell]]
<<set $desperation += 1>>The wind isn't pleased weith your gentle approach. It picks up, slamming you into the outside wall of the building.
You clench the cable tightly and lock your ankles together. It's blown you in the wrong direction, further away from the window.
[[You swing forward, before it's too late.]]You'll never know if he pushed the desk or if it was you who had miscalculated the weight of the desk.
You think that, but you know what really caused this.
You know as soon as you look up and the desk soars past you, dragging you through the darkness of the night.
You know because the last thing you saw was the glint of teeth burned into your mind.
[[It's always him.|Hell]]
<<set $desperation += 1>>If he suspected you had an actual way to get out, you don't doubt he'd storm the room.
His confidence in finding you meant he took his time.
That wasn't something you'd ever complain about. Now that you're this close, you can see vent is definitely large enough for you to slip through.
As each screw comes free, you place it between your lips to keep them secure and accessible. You'll need these later.
The vent is relatively light and fits into your hands easily as it comes away.
[[That'd make what you were about to do easier.]]The difficulty with getting into a vent isn't necessarily climbing into it.
You had to figure out how to close it behind you. That's the only way he won't know what you've done.
It'd take some acrobatics and it'd be fairly risky to try.
<<if hasVisited("You looked up at him.")>><<else>>\[[You could just do without it.]]
<</if>>\
<<if hasVisited("He knows.")>><<else>>\[[It's worth it.]]<</if>>
It'd be pretty easy for you to defend yourself from him up there, perhaps?
What's he going to do to you anyway? There shouldn't be too much room in there.
With a shake of your head to dismiss the thought, you toss the vent cover and its screws to the side and, with a small jump, grab the ledge and heave yourself into it.
You relax your legs as you pull yourself further, shimmying your shoulders through the duct inch by inch.
You're about halfway in now, all you need to do is slide forward and your legs will be in.
[[Something slices into your ankle.]]Besides, there's value in discretion. The least he suspects, the better.
You press your lips tighter together and you change your grip on the vent to one more secure.
You leap and grab the lip of the duct behind you with your free hand. It's a short distance from where you're standing so it's not terrible.
What's terrible is lifting yourself up with one arm.
Sweat is already beading at your brow just knowing what you need to do.
[[Slowly, you draw your legs up to your chest.]]Your breath catches in your throat, the shock of it strangling you.
This was bound to happen. You'd considered it yourself, after all. The reason he took his time was because he was confident you couldn't get away from him.
So hearing the clatter of the vent must've been enough for him to sprint over.
It's not like you didn't hear the door. It's more like as soon as he opened it, he was already under you.
[[Cutting you with the knife meant he was toying with you.]]He knew you were more at his mercy than ever like this.
It made you sick.
You kicked on impulse, wishing your foot would connect with his head and he'd piss off like a proper dog.
All you managed to do was shred your leg on his outstretched knife.
You grunt into the air ducts out of frustation and return your focus to climbing in.
[[He lets you.]]Of course, it was funner for him to rip you out of their last minute.
Maybe he even liked the way the lip of the vent cut your face as you flailed helplessly.
You hit the ground hard, his hold still tight on your leg.
He flicks his knife to you, his face a blank mask. The only movement in his face was the deep, ragged breathing.
You catch it, needing no goading, and slash at him.
[[He pulls away, maneuvering your captive leg in front of the blade.]]Your lip bursts out in blood as you bite it in agony.
You hear him inhale, low and drawn out.
He tugs on your leg.
All he does is stare, his hand pressing harder and harder into your skin as the seconds roll by.
[[Then you understand.]]This was an offer of freedom.
If you want out, you'll have to cut yourself loose.
Maybe all he wanted was a piece. That must be it.
He had only taken a piece in the first place, right? His appetite couldn't be that bad, you thought as you drove the knife into your lower leg.
He was such a gentleman when he wanted to be.
It'd be rude of you to turn down a gentleman's offer.
[[You drew your arm back and...]]<script>
/****************************************************
* Typing Text script- Dy Trey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
interval = 1; // Interval in milliseconds to wait between characters
if(document.getElementById) {
t = document.getElementById("typing");
if(t.innerHTML) {
typingBuffer = ""; // buffer prevents some browsers stripping spaces
it = 0;
mytext = t.innerHTML;
t.innerHTML = "";
typeit();
}
}
function typeit() {
mytext = mytext.replace(/<([^<])*>/, ""); // Strip HTML from text
if(it < mytext.length) {
typingBuffer += mytext.charAt(it);
t.innerHTML = typingBuffer;
it++;
setTimeout("typeit()", interval);
}
}
</script><span id="typing">@@.shudder;sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed and sliced and slashed and stabbed@@</span>
<<timed 1s>><<goto "You looked up at him.">><</timed>>Your vision was clouded with red. You blinked it away, panting as hard as he was, and stared up at him.
He held your severed leg in his hand, his vice grip on it visible even now. The only sound in the room was your scream.
His face hadn't changed.
All he did was reach for your other leg. He took it gently and offered it to you.
Such a gentleman.
Your fingers tightened around the knife's hilt in anticipation.
[[What's one more leg?|Hell]]
<<set $desperation += 1>>The muscles in your arm are screaming, your wrist is being pushed to its limits, and your fingers are threatening to go numb. That's ignoring your trembling core.
Your knees touch your chin. All you have to do is slip your feet in and you'll have made it.
You feel the burning of your face from exertion alone, but you can't afford to acknowledge it.
You tentatively extend a leg, angling it so your ankle clears the opening. When you feel your heel touch the inside, you feel hope for the first time in your broken memory.
The other one makes it in and you quickly straighten your back, stretching your legs into the air duct and finally getting inside.
You bring a shaky, exhausted hand to your mouth and take the screws.
You reward yourself with a gulp of air.
[[If you could, you'd take a break right here.]]There's one thing left before then.
You flip on to your belly slowly, your one arm still hanging out into the open with the vent in tow.
You pull it close and align it with the screw holes, reaching out and around with a screw in hand.
It's easy to get two of them in one side in by screwing them with your fingers.
Thankfully you can see them coming up into the air duct.
[[With only two left, you pull it closed and screw it in from the inside.]]He enters the room as you finish.
You do your best to take shallow breaths. It's easier now that you're able to lie down, pressed into the cool metal of the air duct.
But with your body exhausted, you find you're more susceptible to panic. If he found you now, what would you do? What could you do?
It sounds like he's getting closer.
Your heart rate quickens.
You can't stay here.
[[He'll find you.]]You clamber forward.
You're so loud.
The fear of being discovered urges you deeper, quicker, filled with panic.
He knows.
He knows.
[[He knows.]]<<timedreplace 3s>><<becomes>>You had gone so far.
You don't know where you are.
The sheet metal of the duct had sliced you open early on. Adrenaline kept you going. The cuts hadn't stopped with metal all around you, giving you more souvenirs for your journey.
But you can't stop. He'll find you.
That singular thought blared in your mind.
That's why when the duct grew too narrow, you squeezed through it. You didn't care that it dislocated your shoulder.
That's why you're here now, pressing yourself against the wire screen in front of you.
It'll move eventually. That's what you told yourself as you laced your fingers through it.
They were already slick with blood, clotted with a thick coating of dust. That's why it didn't bother you when it cut straight to the bone.
You brought your mouth to it as you gripped it close.
[[Teeth always work.|Hell]]<<endtimedreplace>>
<<set $desperation += 1>>Not enough time.
Never enough time.
You tear it away and jam it underneath the springs. You follow it, stepping gently into it as to not rip the bottom.
You slot the cushions back on top and bury yourself in the hollowed remains of the couch.
[[Somehow, you feel safe.]]The door clicks and you know he's in the room.
He sounds like a groaning beast, dragging himself inside and knocking things over as he goes.
He's looking. Of course he is.
You smile to yourself.
[[You finally did it, didn't you?]]You can't resist clenching your fists in excitement.
If only you could go back and tell yourself it'd be this easy.
The joy of it makes you shudder.
You feel yourself relaxing, after so long, and you sink deeper into the mesh as you let yourself go.
[[You can finally rest.]]<<timedreplace 3s>><<becomes>>You dream of the most ridiculous thing.
There's a person. They're going around in circles.
They open a door, close it behind them, then they open it again. They stare at it for a moment, then close it once more.
Who would do something so stupid? What are they hoping to achieve?
[[You may as well watch.]]<<endtimedreplace>>It's boring, for a time.
Each time they open the door, you notice a growing sense of dread inside you. Each time they close it, you want them to leave.
Walk away from the door. Don't look back.
Stop doing that.
Just when you think your anxiety has reached its peak, they turn as if to walk away. They had heard your pleas.
[[The door splinters behind them and a black mass of teeth shoots forward, grinding them into a gory mess.|Hell]]
<<set $desperation += 1>>The doors roll right open.
It's a pleasant surprise, one that you'd love to spend some time appreciating on a different day.
You step inside and press the button to close the doors. You look at him as you do, further down the hallway with a ways to go still.
He doesn't return the look.
The doors close.
You select the top floor, assuming you aren't on it.
[[Nothing happens.]]
The button depresses in a rather satisfying way. It's not something you expected to appreciate here of all places.
Maybe the hope of hopping in an elevator and disappearing was simply that good.
You press yourself to the door and listen.
[[Nothing.]]
<<if hasVisited("You widen your stance and give it your all.")>><<set _skip = "[img[https://cdn.discordapp.com/attachments/463241551066169344/706403841871970354/Skip.gif][You widen your stance and give it your all.]]">><<else>>\<</if>>
A chill creeps along your spine.
You chance a look behind you.
He's there.
Taking his time.
[[What's new?]]You snap your attention back to the elevator doors.
Since you're here, you may as well commit.
It makes no sense to try and slip your fingers into the cracks of the door and pull them apart. They need a key to open properly.
And yet, here you are attempting it.
Nothing else has made sense, so why should you suddenly concern yourself with it?
[[You widen your stance and give it your all.]]<<timedcontinue 3s>>How pathetic you must look, grunting and yelling while tugging on the doors like a fool.
It works, reason be damned.
You lean shoulder first into the small crack you had worked open.
You turned your face back to the hallway to work the rest of your body in and he was there, his head tilting as if intrigued.
His gaze locked with yours and that was the final push you needed to squeeze through.
<<if hasVisited("So someone else summoned it.")>><<else>>\[[You dropped into the shaft, grabbing at the ledge you had just fallen from.]]
<</if>>\
<<if hasVisited("It did nothing.")>><<else>>\[[You lept forward, grabbing for the cables of the elevator.]]
<</if>>Your fingers made contact and your body swung around, coming to a halt as your feet pressed against the wall.
It's impossibly dark, the only light source being the cracked open elevator doors. That only served to remind you here was there, his silhouette shifting in the corner of your eye.
This was somewhat absurd, but you had to give it a shot.
[[Rock climbing an elevator shaft.]]Nothing had readied you for this.
You'd never been stupid enough to traverse an elevator shaft. If the situation ever called for it, you absolutely would've come with proper tools.
While steel cable wire may not be dangerous to grab on a regular basis, dropping down it with no ability to stop yourself was nothing short of torture.
You instinctively pressed closer to it, pressing your arms and legs against it in the hopes you'd get a better grip and could slow down.
[[It did nothing.]]Your eyes flicked to the level beneath you.
The next ledge was decently close. It was a safe assumption that most of these ledges would be evenly spaced, though you wouldn't rule out a larger gap here and there.
All things considered, they weren't your best option. There was only enough space for your finger tips as is. That meant it'd be even harder to catch them.
On the sides of the shaft were beams for the elevator proper. These looked like you could reasonably step on them and, if you're able to land properly, take a quick rest.
[[You swing towards the metal beams.]]
You wince as the thin metal cuts into your hand. There's nothing stopping you from sliding down it, not until your feet make contact with the bar it was attached to.
By the time you land, you have plenty of blood for your trouble. You scoff, wiping them, and kneel down on the bar.
It's not wide enough to be a stable platform, but you can reach both sides where it curves into the wall to stabilize yourself.
You breathe deep, readying yourself.
[[You step off the bar and slide down to the next one.]]It takes everything you have to resist the temptation to release the metal that slices your skin to ribbons.
A weak, grateful cry escapes from you as you land. How happy you were to let go of that infernal thing.
This strategy of yours will only work for so long. Even if you can endure it, you were genuinely concerned it might take your fingers with it.
You shrug off your shirt, ripping it on the offending metal you'd been sliding down, and begin to wrap the long strands around your hands.
[[After tying the rest to you for backup, you begin your descent again.]]It works fairly well.
As you suspected, it rips quickly.
Each stop you make, you readjust it so a new section is exposed and set off once more.
This may work.
All you have to do is reach the bottom and you can open the last door.
[[Assuming you don't find the elevator first.]]You don't have to worry about that for too long.
It finds you.
You hear the rumbling of it and you can feel the faint vibrations as you make your way down.
You knew it was coming well before it was there.
It doesn't compute for you, not at first.
If it was beneath you and coming this entire time, you would've felt it from the start.
If it was above you, it would've stopped at the floor you were on.
[[So someone else summoned it.]]Your leisurely stroll is over.
With the remaining cuts of your shirt, you reinforce the wrap around your hands and swivel to the other side so your feet won't catch the support bar.
You cling to the bar and fall deeper into the shaft.
There was no use putting any real thought into it.
It was just a matter of doing something, anything.
It's not like you really hoped you were faster than a hunk of steel.
[[It was only a matter of when.|Hell]]
<<set $desperation += 1>>If you were a crazy experiment assassin like him, you could do this.
But you weren't.
You were a perfectly normal human who made questionable life choices.
Those questionable life choices led you here, shrieking as your limbs were stripped layer by layer of flesh and meat.
Pain made rational thought impossible, otherwise you might've let go of it.
[[Your body had already gone into shock.|Hell]]
<<set $desperation += 1>>That's strange. You're fairly sure there were stairs to go higher on your way to this floor in the first place.
Perhaps it was the roof?
You randomly select another floor.
The elevator groans as if to move, but you're not moving yet.
<<if hasVisited("By this point, you're conditioned to expect teeth on the other end.")>><<else>>\[[Wait and see.]]
<</if>>\
<<if hasVisited("The elevator doors are opening now.")>><<else>>\[[Look for a maintenance hatch.]]
<</if>>
A slam against the elevator doors startles you.
The elevator shudders and you feel it begin to move. If you weren't mistaken, you were even going down.
Perhaps the elevator had been stuck.
You looked up as if you could see him. Was he confused? Did he mean to do that?
Maybe he was finally able to do something other than be a drugged beast.
That thought left you with a strange sadness.
[[He hadn't looked angry at all.]]You've never bothered to work with one, so you weren't quite sure you'd know what to do with it when you found it.
You scanned the ceiling of the elevator for any markings that'd indicate a hatch.
The smallest of creases form a notable square. There's no way for you to reach it, though.
There's no furniture available, nothing to hang from.
All you can do is jump.
[[So you do, arms outstretched to push against it.]]It jostles ever so slightly.
It's definitely the hatch, but nothing gave. All you did was disturb the very well done seal that disguised it.
You try again.
Nothing.
Again.
Nothing.
[[The elevator doors are opening now.]]If you had ever had the pleasure of dealing with an elevator, you'd know they only open from the outside.
Not that it really mattered.
You were just as dead with or without that piece of trivia. Only now you were a bit more winded from jumping in an elevator like a fool.
He had watched you for a few moments. You'd call it bewilderment, but at this point you're sure you're just projecting on him.
The absurdity of someone bouncing up and down for the ceiling grows old to him, it seems.
A wave of nostalgia hits you. He was above you once more, the sensation of his hands tearing you an old friend.
[[You stare up into the ceiling, admiring the way your blood splatters against the hatch.|Hell]]
<<set $desperation += 1>>The thought had never occurred to you before. Perhaps because you were too busy to really reflect on it.
There had been no hate in his face. Even with all he had done to you, you hadn't felt hatred from him.
Maybe that made him even more of an animal.
The elevator slows to a stop and is followed by a soft ding.
You ready yourself as the doors roll open.
[[By this point, you're conditioned to expect teeth on the other end.]]A fair expectation given how he's defied all reason plenty of other times.
At least now you know he can't teleport from one floor to another. Or maybe he chose not to, considering the armed men standing in front of you.
You tilt your head in wonder as your brains splatter the elevator wall behind you.
[[So strange. There was nothing scary about a gun.|Hell]]
<<set $desperation += 1>>You swing around to the men behind you and snatch the closest one by their shoulder.
He resists, but not hard enough. He's no doubt hoping his compatriots will take advantage of your outstretched arm.
Works for you.
You bend your knee and grab his inner thigh, lift him above your head, and throw him into the middle of the room as you twist back around.
He shoots forward like a baited animal, meeting the flailing man halfway, and captures him by the throat.
It takes more willpower than you want to admit to tear away from the mauling that has petrified the rest of the room, the sight a mirror of your own death.
[[The way to the door is clear now, ready for you to proceed.|You made a note to not repeat any particularly reckless behavior.]]Since it's all the same, you've become quite practiced at it.
Grab, throw, run.
[[The door is all yours.|You made a note to not repeat any particularly reckless behavior.]]It's an absurd thought, but you're past the point of ruling anything out.
Stepping forward, you grab the railing and begin to climb.
Though really, what do you plan to do up there? Blocking the door from there might be an option, you might also be able to maneuver around the rooftop structures, and as long as there's enough space you can always circle him and go back down.
No matter how you rationalize it, the thought of being anywhere with him makes you ill.
[[You hesitate.]]The ground floor wasn't an option, at least not without a miracle. That didn't mean there weren't opportunities on the way.
You take off, clambering down the steps towards the flock of men beneath you. There was no reason to be picky, so you tug on the handle of the first door you arrive at.
It doesn't budge. You'd like to investigate the reason why, perhaps it's broken or simply stuck. With a quick look, you can see it opens inwards. Shouldering it open wouldn't be easy.
The door above you opens.
[[He's here.]]The door swings open and you run.
Stairs are something your body is used to thankfully. You grab the railing and pull yourself up as you move to minimize the stress on your body.
It's not enough.
Not as long as you can hear him stomping behind you.
He's supposed to be slow, making a game of it, so why is he doing this now?
[[You don't dare look back.]]A snarl cracks out, louder than it had any right to be as it shot through the stairwell.
Your jaw clenches hard and you redouble your efforts, the smacking of your shoes drowning out the vestiges of his monstrous sounds.
Doors come up and you pass them by. He's bearing down on you, growing faster by the minute.
[[Try one.]]
[[Keep climbing.]]You need to get out of here before he catches you.
The next landing comes up and your momentum sends you flying into the door. You cling to the handle as you do.
There wasn't much foot traffic here. The dust caked on the floor gripped the sole of your shoes, sliding with you as you spun out of control.
Your back hits the railing and your feet leave the ground.
[[His eyes caught yours as you flip backwards over the railing.]]If you spare even a single second, you'll be in his reach.
Flight after flight.
The sound of stamping feet and ragged breathing. A melody between the two of you, disturbed only by the edge of a growl that was laced throughout his voice.
It made you more aware of the dwindling humanity in him.
From the beginning, you had never ran from a man.
[[Only a beast.]]It's nothing other than instinct that drives your hand forward to grab the ledge.
Your shoulder rotates painfully, an audible crack following it as the weight of your body pulls down on it.
You hadn't even noticed it, you had been entranced by the look on his face.
For a moment, he was human. Startled into fear, fear for a fellow human's life.
Shouts from beneath you brought you back to reality. They were talking to each other, no doubt wondering why someone was hanging off the rail.
[[When you looked back at him, he was gone.]]He had been right beneath you.
Your blood ran cold with realization.
A clammy hand caught your wrist.
You let go of the bar that you had clung to so desperately, but you remained, hanging.
[[You strained your neck to look up at him.]]Teeth.
All you could see were the teeth that lined that inhuman maw. Already smeared with red.
He squeezed, the bones of your wrist fracturing like it was nothing.
Your body convulsed with an uncontrollable fear, knocking back against the stairs and twisting in his grip.
He did not let go.
It had been a cruel imagining on your part. He wasn't concerned for you at all.
[[He was only marveling at an easy catch.|Hell]]
<<set $desperation += 1>>The roof coming into view meant nothing to you. The time for wishful thinking was long gone.
You'd consider it once you got outside.
The muscles in your body no longer felt like anything. Air had become poison, filling your lungs like acid when you heaved for oxygen. Adrenaline had come and gone leaving every fiber of your being numb.
Willpower was the only thing that kept you moving.
[[Your body collided with the rooftop door.]]It took all you had to resist slumping against it as your knees buckled out from under you.
You refused.
Grabbing the handle, you swung it open.
[[You press your hand against the door and plunge into the darkness.|Ouroboros]]<script>
function noScroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noScroll);
</script><style>
@-moz-keyframes glitch {
0% {
-moz-transform: skew(30deg);
transform: skew(30deg);
}
5% {
-moz-transform: skew(-5deg);
transform: skew(-5deg);
}
10% {
-moz-transform: skew(45deg);
transform: skew(45deg);
}
15% {
-moz-transform: skew(-51deg);
transform: skew(-51deg);
}
20% {
-moz-transform: skew(-78deg);
transform: skew(-78deg);
}
25% {
-moz-transform: skew(-56deg);
transform: skew(-56deg);
}
30% {
-moz-transform: skew(-66deg);
transform: skew(-66deg);
}
35% {
-moz-transform: skew(15deg);
transform: skew(15deg);
}
40% {
-moz-transform: skew(11deg);
transform: skew(11deg);
}
45% {
-moz-transform: skew(-75deg);
transform: skew(-75deg);
}
50% {
-moz-transform: skew(-67deg);
transform: skew(-67deg);
}
55% {
-moz-transform: skew(-73deg);
transform: skew(-73deg);
}
60% {
-moz-transform: skew(19deg);
transform: skew(19deg);
}
65% {
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
70% {
-moz-transform: skew(-80deg);
transform: skew(-80deg);
}
75% {
-moz-transform: skew(-15deg);
transform: skew(-15deg);
}
80% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
85% {
-moz-transform: skew(13deg);
transform: skew(13deg);
}
90% {
-moz-transform: skew(-3deg);
transform: skew(-3deg);
}
95% {
-moz-transform: skew(76deg);
transform: skew(76deg);
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform: skew(-89deg);
transform: skew(-89deg);
}
5% {
-webkit-transform: skew(-16deg);
transform: skew(-16deg);
}
10% {
-webkit-transform: skew(-82deg);
transform: skew(-82deg);
}
15% {
-webkit-transform: skew(-70deg);
transform: skew(-70deg);
}
20% {
-webkit-transform: skew(50deg);
transform: skew(50deg);
}
25% {
-webkit-transform: skew(30deg);
transform: skew(30deg);
}
30% {
-webkit-transform: skew(1deg);
transform: skew(1deg);
}
35% {
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
40% {
-webkit-transform: skew(85deg);
transform: skew(85deg);
}
45% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
50% {
-webkit-transform: skew(-76deg);
transform: skew(-76deg);
}
55% {
-webkit-transform: skew(-77deg);
transform: skew(-77deg);
}
60% {
-webkit-transform: skew(27deg);
transform: skew(27deg);
}
65% {
-webkit-transform: skew(-73deg);
transform: skew(-73deg);
}
70% {
-webkit-transform: skew(38deg);
transform: skew(38deg);
}
75% {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
80% {
-webkit-transform: skew(51deg);
transform: skew(51deg);
}
85% {
-webkit-transform: skew(-54deg);
transform: skew(-54deg);
}
90% {
-webkit-transform: skew(69deg);
transform: skew(69deg);
}
95% {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
@keyframes glitch {
0% {
-moz-transform: skew(33deg);
-ms-transform: skew(33deg);
-webkit-transform: skew(33deg);
transform: skew(33deg);
}
5% {
-moz-transform: skew(-75deg);
-ms-transform: skew(-75deg);
-webkit-transform: skew(-75deg);
transform: skew(-75deg);
}
10% {
-moz-transform: skew(78deg);
-ms-transform: skew(78deg);
-webkit-transform: skew(78deg);
transform: skew(78deg);
}
15% {
-moz-transform: skew(49deg);
-ms-transform: skew(49deg);
-webkit-transform: skew(49deg);
transform: skew(49deg);
}
20% {
-moz-transform: skew(39deg);
-ms-transform: skew(39deg);
-webkit-transform: skew(39deg);
transform: skew(39deg);
}
25% {
-moz-transform: skew(-11deg);
-ms-transform: skew(-11deg);
-webkit-transform: skew(-11deg);
transform: skew(-11deg);
}
30% {
-moz-transform: skew(26deg);
-ms-transform: skew(26deg);
-webkit-transform: skew(26deg);
transform: skew(26deg);
}
35% {
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
40% {
-moz-transform: skew(-63deg);
-ms-transform: skew(-63deg);
-webkit-transform: skew(-63deg);
transform: skew(-63deg);
}
45% {
-moz-transform: skew(-34deg);
-ms-transform: skew(-34deg);
-webkit-transform: skew(-34deg);
transform: skew(-34deg);
}
50% {
-moz-transform: skew(-1deg);
-ms-transform: skew(-1deg);
-webkit-transform: skew(-1deg);
transform: skew(-1deg);
}
55% {
-moz-transform: skew(-41deg);
-ms-transform: skew(-41deg);
-webkit-transform: skew(-41deg);
transform: skew(-41deg);
}
60% {
-moz-transform: skew(-69deg);
-ms-transform: skew(-69deg);
-webkit-transform: skew(-69deg);
transform: skew(-69deg);
}
65% {
-moz-transform: skew(-18deg);
-ms-transform: skew(-18deg);
-webkit-transform: skew(-18deg);
transform: skew(-18deg);
}
70% {
-moz-transform: skew(-27deg);
-ms-transform: skew(-27deg);
-webkit-transform: skew(-27deg);
transform: skew(-27deg);
}
75% {
-moz-transform: skew(34deg);
-ms-transform: skew(34deg);
-webkit-transform: skew(34deg);
transform: skew(34deg);
}
80% {
-moz-transform: skew(46deg);
-ms-transform: skew(46deg);
-webkit-transform: skew(46deg);
transform: skew(46deg);
}
85% {
-moz-transform: skew(-56deg);
-ms-transform: skew(-56deg);
-webkit-transform: skew(-56deg);
transform: skew(-56deg);
}
90% {
-moz-transform: skew(-6deg);
-ms-transform: skew(-6deg);
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
95% {
-moz-transform: skew(29deg);
-ms-transform: skew(29deg);
-webkit-transform: skew(29deg);
transform: skew(29deg);
}
}
@-moz-keyframes noise {
0% {
background-position: 62px 92px;
}
10% {
background-position: 15px -34px;
}
20% {
background-position: -42px 57px;
}
30% {
background-position: 62px -21px;
}
40% {
background-position: -15px -67px;
}
50% {
background-position: 11px 91px;
}
60% {
background-position: 20px -25px;
}
70% {
background-position: 59px 86px;
}
80% {
background-position: -49px 6px;
}
90% {
background-position: 3px -3px;
}
}
@-webkit-keyframes noise {
0% {
background-position: 47px -54px;
}
10% {
background-position: 90px 21px;
}
20% {
background-position: 58px 32px;
}
30% {
background-position: 7px 49px;
}
40% {
background-position: 32px -24px;
}
50% {
background-position: 54px 96px;
}
60% {
background-position: -98px -84px;
}
70% {
background-position: -13px 45px;
}
80% {
background-position: 0px 33px;
}
90% {
background-position: -88px -62px;
}
}
@keyframes noise {
0% {
background-position: -95px 74px;
}
10% {
background-position: 89px -82px;
}
20% {
background-position: -40px 26px;
}
30% {
background-position: -69px 83px;
}
40% {
background-position: -78px 89px;
}
50% {
background-position: 88px 73px;
}
60% {
background-position: 33px 10px;
}
70% {
background-position: 58px 87px;
}
80% {
background-position: -34px 47px;
}
90% {
background-position: -63px -61px;
}
}
@-moz-keyframes bar {
0% {
height: 37px;
top: 16%;
opacity: 0.16;
}
10% {
height: 494px;
top: 88%;
opacity: 0.42;
}
20% {
height: 617px;
top: 38%;
opacity: 0.26;
}
30% {
height: 613px;
top: 56%;
opacity: 0.01;
}
40% {
height: 96px;
top: 62%;
opacity: 0.26;
}
50% {
height: 527px;
top: 46%;
opacity: 0.47;
}
60% {
height: 142px;
top: 36%;
opacity: 0.2;
}
70% {
height: 278px;
top: 28%;
opacity: 0.62;
}
80% {
height: 380px;
top: 70%;
opacity: 0.03;
}
90% {
height: 218px;
top: 31%;
opacity: 0.42;
}
}
@-webkit-keyframes bar {
0% {
height: 291px;
top: 26%;
opacity: 0.65;
}
10% {
height: 381px;
top: 47%;
opacity: 0.69;
}
20% {
height: 392px;
top: 89%;
opacity: 0.15;
}
30% {
height: 66px;
top: 15%;
opacity: 0.52;
}
40% {
height: 59px;
top: 35%;
opacity: 0.11;
}
50% {
height: 86px;
top: 94%;
opacity: 0.68;
}
60% {
height: 550px;
top: 5%;
opacity: 0.55;
}
70% {
height: 490px;
top: 100%;
opacity: 0.59;
}
80% {
height: 90px;
top: 33%;
opacity: 0.67;
}
90% {
height: 202px;
top: 57%;
opacity: 0.65;
}
}
@keyframes bar {
0% {
height: 533px;
top: 95%;
opacity: 0.58;
}
10% {
height: 91px;
top: 96%;
opacity: 0.6;
}
20% {
height: 195px;
top: 34%;
opacity: 0.22;
}
30% {
height: 326px;
top: 51%;
opacity: 0.75;
}
40% {
height: 205px;
top: 81%;
opacity: 0.28;
}
50% {
height: 627px;
top: 78%;
opacity: 0.25;
}
60% {
height: 122px;
top: 62%;
opacity: 0.23;
}
70% {
height: 239px;
top: 13%;
opacity: 0.8;
}
80% {
height: 33px;
top: 37%;
opacity: 0.33;
}
90% {
height: 123px;
top: 97%;
opacity: 0.27;
}
}
.glitch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
text-transform: uppercase;
font: 15px "Michroma", helvetica, sans-serif;
letter-spacing: 0.6em;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;
-moz-animation: noise 0.3s infinite;
-webkit-animation: noise 0.3s infinite;
animation: noise 0.3s infinite;
}
.glitch:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.glitch:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
-moz-animation: bar 0.5s infinite;
-webkit-animation: bar 0.5s infinite;
animation: bar 0.5s infinite;
}
.glitch span {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
-moz-animation: glitch 3s infinite alternate;
-webkit-animation: glitch 3s infinite alternate;
animation: glitch 3s infinite alternate;
}
body {
overflow:hidden;
background: black;
margin-left: 3.5em;
}
</style><<timedreplace 2s>>\It's dark.
Is it damp? You can't tell.
You're sweating. Why are you sweating?
<div class="theImage theTextcenter">No.</div>
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
There was nothing human in that face. Nothing but a ravenous hunger that only wanted to consume you.
You get the sense it didn't always used to look that way.
You struggle to recall how it was before, but the flashes of that horrible maw haunt you.
What a useless sensation.
Even if there was once a man in there, he was as good as dead.
<div class="theImage theTextcenter">Not again.</div>
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
This didn't alarm you.
Since when had you actually felt things?
Your head felt stranger as the minutes crawled by. You would call this bubbling in your chest panic, but there's no way you knew a such thing.
You pictured the walls around you and, in it, yourself.
You again went to lie down on the ground and watched, with relief, as the image in your head mirrored it.
Yes, now things felt right.
Now you could sleep.
<div class="theImage theTextcenter">Stop.</div>
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
Play with? You weren't here to play.
You were here for...
What were you here for?
<div class="theImage theTextcenter">No more.</div>
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
...
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
How sad.
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
So much and you still can't understand.
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
<div class="theImage theTextcenter">Try again.</div>
<<becomes>>\
<div class="glitch"></div>
<<becomes>>\
The darkness outside swallowed all your senses.
The phantoms of your past filled the emptiness.
None of it was real, not any more.
That's what you wished at least.
There was only one thing left from that horrible maze. It wrapped around you, engulfing you.
[[Him.|Hell]]
<<endtimedreplace>>
<<set $desperation += 1>>Each landing you come to, you pull on the door.
None of them open.
At this point you're convinced it's by design. Some sort of security feature, you'd guess.
The cries of the men below you grow louder as you descend, their words gibberish callouts to one another.
As far as you can tell, they're reminding each other to be wary of him. They're experienced enough to know he's a hazard.
[[As are you.]]Not that you needed reminding.
Every door you try, his steps grow closer. Precious ground is lost to all your failed attempts. You shift your focus to running down the stairs, abandoning the hopeless venture.
Sweat pours down your back as you go and your ankles quake with each step. There's only so much more your body can take.
The descent requires all your mental faculties for the simplest of things. Breathing, picking up your leg, grabbing the rail as you turn, all of it becomes a mental exercise.
[[Up until you collide with a man racing up the steps.]]He stumbles from the impact of your bodies. The sharp scuff of a shoe rings out, his eyes widen in realization, and he's gone.
You try not to trip over his tumbling body as you rush past him.
It doesn't count for much. That was an unfortunate soul who'd made it ahead of the group.
The remainder of his party stared at you now, red in the face and exhausted from their climb.
[[They look to you for your next move.]]If you had to guess, their hesitation probably had something to do with the madman at your back.
The fearful wailing of the fallen man behind you announced his arrival. You had no intentions of confirming it for yourself.
Instead, you looked down.
The bottom was closer than you thought, or it may have simply been that it was significantly closer than it was before.
The men in front of you might be cowed into staying away as long as he's behind you.
[[There's a chance they won't stop you at all.]]
[[The bottom isn't that far.]]They look at you expectantly, trying to ignore what's behind you.
A voice sobs from behind you, turning into a shriek accompanied by the sound of bones snapping.
The men in front of you flinch. You take the opportunity and push forward, shoving them aside.
They move to push back against you, but the cry plummeting down the stairwell has shaken them.
[[He abandoned his easy meal to come after you.]]At least that's what you tell yourself.
You've already gripped the rail with both hands and hiked a foot up between them.
You catch fingers shooting towards you out of the corner of your eye.
[[You jump.]]Had you given it a little more thought, you might've anticipated the mass of bodies to move with you down the stairs.
Panic consumes them and they collapse on top of you, tripping over one another to escape the approaching beast.
The stairwell is flooded with the wild shouts of frenzied men, undercut by his deep roar.
Hands press against you and force you in different directions. You swing your arms out and your elbow collides with flesh.
A body drops. You wonder if it was your doing, but more join it. They're losing their balance and tossing each other to him.
You force the men in front of you away and clamber down the steps.
[[Someone's foot cuts you off.]]The steps are far too crowded to move safely.
Your foot slips out from under you. You reach out blindly, wrapping your fingers around what you can only assume is someone's wrist.
They move to fling you off, only to fall backwards alongside you.
That was your only chance to survive the stampede around you.
[[A hard kick to your head seals your fate.]]The yells are gradually shifting into screams of terror.
They sound so far off.
Even the feet stomping you underneath them feel like nothing. You're only vaguely aware of them thanks to the noise of snapping bones thrumming in your skull.
For a moment, you think you can hear your own breathing, heavy and deep against your ear.
[[You don't recall having such a growl to your voice.|Hell]]
<<set $desperation += 1>>Plummeting down the stairwell, it becomes obvious that you've misjudged how high you were.
Above you, yells of confusion turn into screams as he tears into the people in front of you. With you gone, he has no choice but to settle for easier targets.
For once, that's not really your concern. Your priority is surviving this fall.
As high up as you may be, there's only so much time to figure out what you're going to do.
[[Leaning forward, you grab for the next railing.]]
[[You point your feet towards the ground.]]
Momentum and gravity are not kind to you.
You've the strength to latch on.A laugh erupts from you entirely unbidden.
Sure, you know how to land. Not from this height.
The laughter doesn't end when you hit the ground and lean into your outstretched arms, it only stutters ever so slightly as to not interrupt the chorus of snapping bones.
What should be a quick pivot forward turns into a feeble slump, the pain seizing you and sending violent spasms through your body. You drag your face along the concrete beneath you, spit pooling beneath your cheek as your laughter grows.
The pain dissipates. Your hands move to drag your body.
[[You hadn't noticed the bone protruding from your wrists.]]The laughter rings out through the stairwell, echoing and vibrating along each level.
It breaks in your throat, dry and heavy. The pain flares when you try to use your wrists and legs. It paralyzes you, only coaxing out the weakest of whimpers.
You imagine you'll remain here until something appears, though you're quite sure you won't be conscious long enough to find out.
[[Feet slam down on either side of you.]]He's so eager to prove you wrong.
That must be what this is all about. How very mistaken you are.
Even as you sink deeper into the darkness of your mind, you find it so peculiar how he doesn't collapse forward as you did.
Rather, you feel the distance between you lessen ever so gradually, his stance solid and unwavering.
The drop didn't bother him one bit, did it?
You muster a giggle, his breath tickling your neck.
Sharp edges dig deep into your spine, gritting the nerves between them.
[[How absurd.|Hell]]
<<set $desperation += 1>>