Skip to content

feat(submission): add retro crt monitor scanline & flicker overlay #55627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jul 25, 2026
+99 −0
Merged

feat(submission): add retro crt monitor scanline & flicker overlay #55627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions submissions/examples/crt-scanline-55615/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<div class="ease-crt-container">
<!-- Your content goes here (e.g., text, images, videos) -->
<h1>> SYSTEM BOOT_</h1>
</div>
```

## 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)
50 changes: 50 additions & 0 deletions submissions/examples/crt-scanline-55615/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro CRT Scanline Demo</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
height: 100vh;
background-color: #0b0b0b;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
}

.monitor {
width: 400px;
height: 300px;
background-color: #111;
border: 20px solid #333;
border-radius: 16px;
color: #0f0;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 0 50px rgba(0,255,0,0.1);
}

.monitor h1 {
margin-top: 0;
font-size: 24px;
}

.monitor p {
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="ease-crt-container monitor">
<h1>> SYSTEM BOOT_</h1>
<p>Loading kernel modules...</p>
<p>Initializing graphics...</p>
<p>Welcome back, User.</p>
</div>
</body>
</html>
30 changes: 30 additions & 0 deletions submissions/examples/crt-scanline-55615/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
}
Loading