From fbab8e6f8d9fe59a99ad02a3ef475b9495345822 Mon Sep 17 00:00:00 2001 From: anuragbraveboy-sudo Date: Sat, 25 Jul 2026 11:20:32 +0530 Subject: [PATCH] feat(submission): add retro crt monitor scanline & flicker overlay (#55615) --- .../examples/crt-scanline-55615/README.md | 19 +++++++ .../examples/crt-scanline-55615/demo.html | 50 +++++++++++++++++++ .../examples/crt-scanline-55615/style.css | 30 +++++++++++ 3 files changed, 99 insertions(+) create mode 100644 submissions/examples/crt-scanline-55615/README.md create mode 100644 submissions/examples/crt-scanline-55615/demo.html create mode 100644 submissions/examples/crt-scanline-55615/style.css diff --git a/submissions/examples/crt-scanline-55615/README.md b/submissions/examples/crt-scanline-55615/README.md new file mode 100644 index 0000000000..ca24875fa5 --- /dev/null +++ b/submissions/examples/crt-scanline-55615/README.md @@ -0,0 +1,19 @@ +# Retro CRT Monitor Scanline & Flicker Overlay + +## What does this do? +A highly stylized overlay component that gives any image, video, or container a retro 80s/90s CRT monitor vibe. It uses CSS `repeating-linear-gradient` for scanlines and subtle `opacity` keyframes for screen flicker. + +## How is it used? +```html +
+ +

> SYSTEM BOOT_

+
+``` + +## Why does it fit EaseMotion CSS? +It relies purely on the `::after` pseudo-element and `linear-gradient` backgrounds to draw scanlines without any heavy image assets. Combined with `pointer-events: none` and a lightweight opacity animation, it provides an incredible retro vibe while staying incredibly performant and CSS-only. + +## Tech Stack +- HTML +- CSS (No JavaScript) diff --git a/submissions/examples/crt-scanline-55615/demo.html b/submissions/examples/crt-scanline-55615/demo.html new file mode 100644 index 0000000000..2047df5038 --- /dev/null +++ b/submissions/examples/crt-scanline-55615/demo.html @@ -0,0 +1,50 @@ + + + + + + Retro CRT Scanline Demo + + + + +
+

> SYSTEM BOOT_

+

Loading kernel modules...

+

Initializing graphics...

+

Welcome back, User.

+
+ + diff --git a/submissions/examples/crt-scanline-55615/style.css b/submissions/examples/crt-scanline-55615/style.css new file mode 100644 index 0000000000..41e6ee9c71 --- /dev/null +++ b/submissions/examples/crt-scanline-55615/style.css @@ -0,0 +1,30 @@ +.ease-crt-container { + position: relative; + overflow: hidden; + /* Add your content here, e.g., images or text */ +} + +/* The scanline and flicker overlay */ +.ease-crt-container::after { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); + z-index: 2; + background-size: 100% 2px, 3px 100%; + pointer-events: none; + animation: ease-crt-flicker 0.15s infinite; +} + +/* Subtle CRT Flicker Animation */ +@keyframes ease-crt-flicker { + 0% { opacity: 0.95; } + 5% { opacity: 0.85; } + 10% { opacity: 0.95; } + 15% { opacity: 1; } + 100% { opacity: 1; } +}