Skip to content

add feature/css-glitch-flicker-modal-ag #55609

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
+897 −0
Merged

add feature/css-glitch-flicker-modal-ag #55609

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
55 changes: 55 additions & 0 deletions submissions/examples/css-glitch-flicker-modal-ag/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# CSS Glitch-Flicker Modal for Creative Portfolio Layouts

1. **What does this do?**
Provides a pure HTML and CSS modal dialog with a controlled cyberpunk glitch and flicker entrance animation designed for creative portfolio showcases.

2. **How is it used?**
Apply the `.glitch-modal-overlay` container with an `#id` matching a trigger anchor link `href="#id"`:

```html
<!-- Trigger Link -->
<a href="#portfolio-modal" class="btn-trigger">View Project</a>

<!-- Modal Component -->
<div
id="portfolio-modal"
class="glitch-modal-overlay"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
>
<a
href="#"
class="glitch-modal-backdrop"
aria-label="Close modal overlay"
tabindex="-1"
></a>
<div class="glitch-modal-card">
<div class="glitch-scanlines" aria-hidden="true"></div>
<header class="glitch-modal-header">
<a href="#" class="glitch-modal-close" aria-label="Close modal"
>&times;</a
>
</header>
<div class="glitch-modal-body">
<h2 id="modal-title" class="glitch-title" data-text="CYBER-SYNTH">
CYBER-SYNTH
</h2>
<p>Project details and metrics...</p>
</div>
</div>
</div>
```

3. **Why is it useful?**
It delivers an ultra-lightweight, zero-JavaScript interactive modal system with high-impact creative cyber visuals, smooth keyframe sequencing, full keyboard accessibility, and robust reduced-motion support.

---

## Features

- **Pure HTML + CSS**: State management powered by the native CSS `:target` pseudo-class.
- **Performant Glitch FX**: Hardware-accelerated keyframe transforms (`translate`, `scale`, `skewX`) and dual RGB channel split using pseudo-elements with `clip-path`.
- **EaseMotion Integration**: Built with EaseMotion design tokens (`--ease-color-*`, `--ease-space-*`, `--ease-radius-*`, `--ease-shadow-*`, `--ease-z-modal`).
- **Responsive Layout**: Fluid bounds for mobile, tablet, and desktop screens with adaptive grid and button stacking.
- **Accessibility & Reduced Motion**: Keyboard navigability via native `<a>` anchors, explicit ARIA dialog attributes, and non-distracting reduced-motion overrides via `@media (prefers-reduced-motion: reduce)`.
180 changes: 180 additions & 0 deletions submissions/examples/css-glitch-flicker-modal-ag/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Glitch-Flicker Modal - EaseMotion CSS</title>
<link rel="stylesheet" href="../../easemotion.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main class="portfolio-shell">
<header class="portfolio-header">
<span class="eyebrow">EaseMotion CSS / Creative Portfolio</span>
<h1>Glitch-Flicker Modal System</h1>
<p class="description">
A lightweight, pure CSS/HTML modal system designed for creative
cyber-aesthetic portfolio layouts. Features controlled RGB channel
displacement, subtle opacity flicker, and performant
hardware-accelerated keyframe transitions.
</p>
</header>

<section class="portfolio-grid" aria-label="Featured Projects">
<!-- Interactive Trigger Project Card -->
<article class="project-card featured-card">
<div class="card-badge">Featured Project</div>
<h2 class="card-title">Cyber-Synth Audio Engine</h2>
<p class="card-excerpt">
High-performance web-audio synthesis workstation with real-time
waveform visualization and zero-latency spatial routing.
</p>
<div class="card-tags">
<span class="tag">Audio DSL</span>
<span class="tag">WebGL</span>
<span class="tag">CSS FX</span>
</div>
<a
href="#glitch-portfolio-modal"
class="btn-trigger"
aria-haspopup="dialog"
>
<span>View Case Study</span>
<span class="btn-arrow">&rarr;</span>
</a>
</article>

<!-- Contextual Placeholder Card 1 -->
<article class="project-card dimmed-card">
<div class="card-badge muted-badge">Experimental</div>
<h2 class="card-title">Neural Shader Canvas</h2>
<p class="card-excerpt">
Generative raymarching environment utilizing fragment shaders and
custom motion math.
</p>
<div class="card-tags">
<span class="tag">GLSL</span>
<span class="tag">Canvas2D</span>
</div>
</article>

<!-- Contextual Placeholder Card 2 -->
<article class="project-card dimmed-card">
<div class="card-badge muted-badge">Design System</div>
<h2 class="card-title">Cyber-Grid UI Kit</h2>
<p class="card-excerpt">
Modular component collection with responsive typography,
glassmorphism tokens, and micro-interactions.
</p>
<div class="card-tags">
<span class="tag">Design Tokens</span>
<span class="tag">Pure CSS</span>
</div>
</article>
</section>
</main>

<!-- Pure CSS Modal Component (Activated via :target) -->
<div
id="glitch-portfolio-modal"
class="glitch-modal-overlay"
role="dialog"
aria-modal="true"
aria-labelledby="glitch-modal-title"
>
<!-- Backdrop link to close modal when clicking outside -->
<a
href="#"
class="glitch-modal-backdrop"
aria-label="Close modal overlay"
tabindex="-1"
></a>

<!-- Glitch Modal Window -->
<div class="glitch-modal-card">
<!-- Scanlines effect overlay -->
<div class="glitch-scanlines" aria-hidden="true"></div>

<!-- Modal Header -->
<header class="glitch-modal-header">
<div class="header-meta">
<span class="meta-tag">Case Study / 001</span>
<span class="meta-status">Status: Deployed</span>
</div>
<a href="#" class="glitch-modal-close" aria-label="Close modal"
>&times;</a
>
</header>

<!-- Modal Content Body -->
<div class="glitch-modal-body">
<h2
id="glitch-modal-title"
class="glitch-title"
data-text="CYBER-SYNTH AUDIO ENGINE"
>
CYBER-SYNTH AUDIO ENGINE
</h2>

<div class="glitch-preview-banner">
<div class="preview-waveform" aria-hidden="true">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="preview-overlay-text">LIVE DEMO PREVIEW</div>
</div>

<p class="glitch-modal-desc">
An open-source browser audio workstation built with pure Web Audio
API and hardware-accelerated CSS animations. Designed for
low-latency digital signal processing and immersive visual feedback
loops.
</p>

<div class="glitch-metrics-grid">
<div class="metric-item">
<span class="metric-val">60 FPS</span>
<span class="metric-lbl">Frame Rate</span>
</div>
<div class="metric-item">
<span class="metric-val">0.2 ms</span>
<span class="metric-lbl">DSP Latency</span>
</div>
<div class="metric-item">
<span class="metric-val">12 KB</span>
<span class="metric-lbl">Bundle Size</span>
</div>
</div>

<div class="tech-stack-wrapper">
<span class="tech-title">Technologies Used:</span>
<div class="tech-tags">
<span class="tech-tag">Web Audio</span>
<span class="tech-tag">EaseMotion CSS</span>
<span class="tech-tag">TypeScript</span>
<span class="tech-tag">WebGL</span>
</div>
</div>
</div>

<!-- Modal Footer -->
<footer class="glitch-modal-footer">
<a href="#" class="btn-action btn-secondary">Close Window</a>
<a
href="https://github.com/SAPTARSHI-coder/EaseMotion-css"
target="_blank"
rel="noopener noreferrer"
class="btn-action btn-primary"
>
Explore Repository &rarr;
</a>
</footer>
</div>
</div>
</body>
</html>
Loading
Loading