animated crt

Tags: crt, vhs, animated, overlay, filter, horror

Description:

like the crt filter, but animated

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by L8kemz (https://layouts.spacehey.com/layout?id=99271) -->

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 24 comments ( View all | Add Comment )

IM STILL EDITING DONT LOOK	1714568585 using ty! Report Comment
Wicky	1714318274 using Report Comment
♱. . ℜ𝔒𝔐𝔄𝔑	1714022394 using Report Comment
𖤐~🎸🎧𝕵𝖊𝖗𝖗𝖞🎸🎧~ 𖤐	1713496397 I LOVE IT but why dose it only do the effect on mostly the middle part of my profile but on the sides and more at the bottom the effect goes away? :( Report Comment
Techx o_0	1713317322 Soo cool, Using o_O!! Report Comment
k!ll14n	1712960743 using>:3 Report Comment
isaiah	1712920854 awesome as hell ..def using :3 Report Comment
Leif	1711768536 thanks ur saving my life for a blog TvT so ye using!!! hope u have a nice day :> Report Comment
EDIALETSI	1711506089 using! ^_^ Report Comment
Neth	1711349999 using Report Comment
Hah nah	1710831121 Super awesome Report Comment
corpsegoth	1710803254 usingg Report Comment
OniOnn ClOwn	1710420897 Usingg Report Comment
agent 3 !	1709440435 usingg :33 Report Comment
wyll	1709181666 using Report Comment
≪ MITUNA CAPTOR / Lil Hal ≫	1708892073 Using. Report Comment
mejiko	1708336230 is useng Report Comment
𝓗𝓪𝓲𝔀𝓬𝓪𝓵𝓼	1707784201 usingg Report Comment
RAINY RAINER !!!!!! ☆⌒(ゝ。∂)	1707756345 Using! Report Comment