Skip to content

Instantly share code, notes, and snippets.

@MbarkT3STO

MbarkT3STO/cyberpunk-error-page.markdown

Created June 16, 2020 08:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MbarkT3STO/f4f563c4a6ec793cb47c125fb9322c4a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MbarkT3STO/f4f563c4a6ec793cb47c125fb9322c4a to your computer and use it in GitHub Desktop.
Download ZIP
Cyberpunk Error page
Raw
cyberpunk-error-page.markdown
Raw
index.html
<section class="error-body">
<video preload="auto" class="background" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/396624/err.mp4" autoplay muted loop></video>
<div class="message">
<h1 t="404">404</h1>
<div class="bottom">
<p>You have lost your way</p>
<a href="#">return home</a>
</div>
</div>
</section>
Raw
style.scss
$bg: #11111b;
$red: #ff6778;
$green: #afd33d;
$blue: #1122ff;
$text: $green;
@function font($to, $from, $toWidth, $fromWidth) {
$slope: ($to - $from) / ($toWidth - $fromWidth);
$base: $from - $slope * $fromWidth;
@return calc(#{$base} + #{100vw * $slope});
}
@mixin dotgrid($dot: #aaa,$dot-background: #000,$dot-size: 1px,$dot-spacing: 22px) {
background: linear-gradient(90deg, $dot-background ($dot-spacing - $dot-size), transparent 1%) center, linear-gradient($dot-background ($dot-spacing - $dot-size), transparent 1%) center, $dot;
background-size: $dot-spacing $dot-spacing;
background-position: center;
}
:root {
box-sizing: border-box;
cursor: default;
}
::selection {
color: $bg;
background-color: lighten($text, 10%);
}
html, body {
width: 100%;
height: 100%;
background-color: $bg;
color: $text;
font-size: font(22px, 9px, 1920px, 320px);
}
.error-body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
&:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $text;
mix-blend-mode: overlay;
z-index:1;
}
&:after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include dotgrid($dot: lighten($bg, 100%), $dot-background: $bg);
opacity: .2;
z-index:1;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
filter: grayscale(1);
mix-blend-mode: luminosity;
}
.message {
position: relative;
width: 100%;
height: 100%;
text-align: center;
z-index:3;
h1 {
$faded: rgba($text, .3);
position: absolute;
top: 10%;
left: 0%;
width: 100%;
font-size: 10em;
margin: 0;
animation: shake 600ms ease-in-out infinite alternate;
text-shadow: 0 0 .07em $text,
-.2em 0 2em $faded,
.2em 0 2em $faded;
user-select: none;
&:before {
content: attr(t);
position: absolute;
left: 50%;
transform: translate(-50%, .34em);
height: .1em;
line-height: .5em;
width: 100%;
animation: scan 500ms ease-in-out infinite alternate random(600)+ms,
glitch-anim 300ms ease-in-out infinite alternate;
overflow: hidden;
opacity: .7;
}
&:after {
$n:random(30);
content: attr(t);
position: absolute;
top: -$n+px;
left: 50%;
transform: translate(-50%, .34em);
height: .5em;
line-height: .1em;
width: 100%;
animation: scan 665ms ease-in-out infinite alternate random(600)+ms,
glitch-anim 300ms ease-in-out infinite alternate;
overflow: hidden;
opacity: .8;
}
}
.bottom {
position: absolute;
top: 65%;
left: 0;
width: 100%;
}
p, a {
font-size: 2em;
font-family: monospace;
text-shadow: 0 0 5px $text;
filter: blur(.8px);
}
a {
$dd: 225ms;
position: relative;
color: $text;
text-decoration: none;
font-weight: 700;
border: 2px solid $text;
text-transform: uppercase;
padding: 5px 30px;
box-shadow: inset 0 0 0 0 rgba($text, .2);
transition: 25ms ease-in-out all 0ms;
overflow: hidden;
animation: attn 3s ease-in-out infinite;
&:hover {
cursor: crosshair;
box-shadow: inset 0 -2em 0 0 rgba($text, .2);
transition: 225ms ease-in-out all $dd;
animation: none;
&:before,
&:after {
transform: translate(-50%, 0) scale(0, 1);
}
}
&:active {
box-shadow: inset 0 -2em 0 0 rgba($text, .5);
transition: 225ms ease-in-out all $dd;
}
&:before,
&:after {
content: '';
position: absolute;
left: 50%;
transform: translate(-50%, 0) scale(1, 1);
transform-origin: center;
background-color: $bg;
width: 90%;
height: 5px;
transition: $dd ease-in-out all;
mix-blend-mode: hard-light;
}
&:before {
top: -4px;
}
&:after {
bottom: -4px;
}
}
}
}
@keyframes scan {
$num: random(30);
$numVal: $num * .01em;
from , 20%, 100%{
height: 0;
transform: translate(-50%, .44em);
}
10%,15% {
height: 1em;
line-height: .2em;
transform: translate(-55%, $numVal);
}
}
@keyframe pulse {
$faded: rgba($text, .3);
from {
text-shadow: 0 0 0 $text,
0 0 0 $faded,
0 0 0 $faded;
}
to {
text-shadow: 0 0 .07em $text,
-.2em 0 2em $faded,
.2em 0 2em $faded;
}
}
@keyframes attn {
0%, 100% {
opacity: 1;
}
30%, 35% {
opacity: .4;
}
}
@keyframes shake {
0%, 100% {
transform: translate(-1px, 0);
}
10% {
transform: translate(2px, 1px);
}
30% {
transform: translate(-3px, 2px);
}
35% {
transform: translate(2px, -3px);
filter: blur(4px);
}
45% {
transform: translate(2px, 2px) skewY(-8deg) scale( .96, 1);
filter: blur(0);
}
50% {
transform: translate(-3px, 1px);
}
}
@keyframes glitch-anim {
$steps: 10;
@for $i from 0 through $steps {
#{percentage($i*(1/$steps))} {
clip: rect(random(100)+px, 9999px, random(100)+px, 0);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment