/* =========================================================
DARKPLACE VHS / CRT — VHS MEDIUM preset
Drop-in extra.css
Requires:
-
- add: as FIRST child of
- apply .flicker and .crt to a wrapper container
========================================================= */
/* --------------------------
CRT OVERLAY: scanlines
--------------------------- */
.scanlines::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(255, 255, 255, 0.14),
rgba(255, 255, 255, 0.14) 1px,
rgba(0, 0, 0, 0) 2px,
rgba(0, 0, 0, 0) 4px
);
opacity: 0.48;
z-index: 50;
}
/* vignette + stronger glare */
.scanlines::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at center,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.86) 100%
),
linear-gradient(
120deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0) 45%
);
opacity: 1;
z-index: 51;
}
/* --------------------------
Rolling tracking bars (add a div)
--------------------------- */
@keyframes tracking {
0% {
transform: translateY(-30vh);
opacity: 0;
}
8% {
opacity: 0.45;
}
30% {
opacity: 0.2;
}
60% {
opacity: 0.32;
}
100% {
transform: translateY(130vh);
opacity: 0;
}
}
.tracking-bars {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 52;
mix-blend-mode: screen;
}
.tracking-bars::before,
.tracking-bars::after {
content: "";
position: absolute;
left: -10%;
width: 120%;
/* light grey tracking bar instead of red */
background: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(120, 255, 180, 0.22),
rgba(0, 0, 0, 0)
);
filter: blur(0.7px);
animation: tracking 5.2s infinite linear; /* half speed */
}
.tracking-bars::before {
height: 10px;
}
.tracking-bars::after {
height: 18px;
animation-duration: 8s; /* half speed */
opacity: 0.18;
}
/* --------------------------
FLICKER + JITTER + V-HOLD + zoom pulse
--------------------------- */
@keyframes flicker {
0%,
100% {
opacity: 1;
}
78% {
opacity: 0.98;
}
82% {
opacity: 0.93;
}
86% {
opacity: 0.84;
}
88% {
opacity: 0.96;
}
91% {
opacity: 0.9;
}
94% {
opacity: 1;
}
}
/* VHS MEDIUM: slower + less aggressive wobble */
@keyframes jitter {
0%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(-0.8px);
}
20% {
transform: translateX(1.2px);
}
30% {
transform: translateX(-0.6px);
}
40% {
transform: translateX(0.9px);
}
50% {
transform: translateX(-1.1px);
}
60% {
transform: translateX(0.7px);
}
70% {
transform: translateX(-0.5px);
}
80% {
transform: translateX(0.8px);
}
90% {
transform: translateX(-0.7px);
}
}
/* vertical hold slips (still there, but less frequent feeling comes from other timing) */
@keyframes vhold {
0%,
92%,
100% {
transform: translateY(0);
}
93% {
transform: translateY(6px);
}
94% {
transform: translateY(-4px);
}
95% {
transform: translateY(2px);
}
96% {
transform: translateY(0);
}
}
/* tracking lock/unlock “breath” */
@keyframes zoompulse {
0%,
100% {
transform: scale(1);
}
40% {
transform: scale(1.003);
}
55% {
transform: scale(0.997);
}
70% {
transform: scale(1.002);
}
}
/* Apply these to a wrapper container (you already do) */
.flicker {
animation:
flicker 4.8s infinite ease-in-out,
jitter 0.28s infinite linear,
vhold 3.8s infinite linear,
zoompulse 7.5s infinite ease-in-out;
will-change: opacity, transform;
transform-origin: center;
}
/* --------------------------
CRT COLOR / GLOW
--------------------------- */
.crt {
filter: contrast(1.45) saturate(1.55);
text-shadow:
0 0 10px rgba(255, 0, 0, 0.22),
0 0 26px rgba(255, 0, 0, 0.18);
}
/* RGB split (only on elements you mark with data-crt) */
.crt [data-crt] {
position: relative;
}
.crt [data-crt]::before,
.crt [data-crt]::after {
content: attr(data-crt);
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.32;
mix-blend-mode: screen;
}
.crt [data-crt]::before {
transform: translateX(-1.6px);
color: rgba(0, 255, 255, 0.65);
}
.crt [data-crt]::after {
transform: translateX(1.6px);
color: rgba(255, 0, 0, 0.65);
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
.flicker {
animation: none;
}
.scanlines::before {
opacity: 0.18;
}
.scanlines::after {
opacity: 0.35;
}
.tracking-bars {
display: none;
}
}