diff --git a/submissions/examples/crt-scanline-55615/README.md b/submissions/examples/crt-scanline-55615/README.md new file mode 100644 index 00000000000..ca24875fa55 --- /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 00000000000..2047df50380 --- /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 00000000000..41e6ee9c717 --- /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; } +}