diff --git a/submissions/examples/css-glitch-flicker-modal-ag/README.md b/submissions/examples/css-glitch-flicker-modal-ag/README.md new file mode 100644 index 00000000000..e3ba6536eb5 --- /dev/null +++ b/submissions/examples/css-glitch-flicker-modal-ag/README.md @@ -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 + + View Project + + + + ``` + +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 `` anchors, explicit ARIA dialog attributes, and non-distracting reduced-motion overrides via `@media (prefers-reduced-motion: reduce)`. diff --git a/submissions/examples/css-glitch-flicker-modal-ag/demo.html b/submissions/examples/css-glitch-flicker-modal-ag/demo.html new file mode 100644 index 00000000000..5ab1275c14e --- /dev/null +++ b/submissions/examples/css-glitch-flicker-modal-ag/demo.html @@ -0,0 +1,180 @@ + + + + + + CSS Glitch-Flicker Modal - EaseMotion CSS + + + + +
+
+ EaseMotion CSS / Creative Portfolio +

Glitch-Flicker Modal System

+

+ 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. +

+
+ +
+ + + + +
+
Experimental
+

Neural Shader Canvas

+

+ Generative raymarching environment utilizing fragment shaders and + custom motion math. +

+
+ GLSL + Canvas2D +
+
+ + +
+
Design System
+

Cyber-Grid UI Kit

+

+ Modular component collection with responsive typography, + glassmorphism tokens, and micro-interactions. +

+
+ Design Tokens + Pure CSS +
+
+
+
+ + + + + diff --git a/submissions/examples/css-glitch-flicker-modal-ag/style.css b/submissions/examples/css-glitch-flicker-modal-ag/style.css new file mode 100644 index 00000000000..d7ea37f954d --- /dev/null +++ b/submissions/examples/css-glitch-flicker-modal-ag/style.css @@ -0,0 +1,662 @@ +/* Reset & Layout Shell */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--ease-font-sans, system-ui, -apple-system, sans-serif); + background: var(--ease-color-bg, #0b1121); + color: var(--ease-color-text, #e2e8f0); + display: grid; + place-items: center; + padding: var(--ease-space-6, 1.5rem); +} + +.portfolio-shell { + width: min(100%, var(--ease-container-max, 1000px)); + display: flex; + flex-direction: column; + gap: var(--ease-space-8, 2rem); +} + +.portfolio-header { + text-align: center; + max-width: 700px; + margin: 0 auto; +} + +.eyebrow { + display: inline-block; + font-size: var(--ease-text-xs, 0.75rem); + font-family: var(--ease-font-mono, monospace); + color: #00ffff; + letter-spacing: 0.15em; + text-transform: uppercase; + margin-bottom: var(--ease-space-2, 0.5rem); +} + +.portfolio-header h1 { + font-size: clamp(2rem, 5vw, 3rem); + margin: 0 0 var(--ease-space-3, 0.75rem); + font-weight: 800; + letter-spacing: -0.02em; + background: linear-gradient(135deg, #ffffff 30%, #a09af8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.description { + color: var(--ease-color-muted, #94a3b8); + font-size: var(--ease-text-base, 1rem); + line-height: var(--ease-leading-normal, 1.6); + margin: 0; +} + +/* Portfolio Grid */ +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--ease-space-6, 1.5rem); +} + +.project-card { + background: var(--ease-color-surface, #141e33); + border: 1px solid var(--ease-glass-border, rgba(255, 255, 255, 0.08)); + border-radius: var(--ease-radius-lg, 1rem); + padding: var(--ease-space-6, 1.5rem); + display: flex; + flex-direction: column; + gap: var(--ease-space-4, 1rem); + position: relative; + transition: + transform var(--ease-speed-medium, 300ms) var(--ease-ease, ease), + border-color var(--ease-speed-medium, 300ms) var(--ease-ease, ease), + box-shadow var(--ease-speed-medium, 300ms) var(--ease-ease, ease); +} + +.featured-card { + border-color: rgba(0, 255, 255, 0.4); + box-shadow: 0 0 20px rgba(0, 255, 255, 0.08); +} + +.featured-card:hover { + transform: translateY(-4px) skewX(-0.5deg); + border-color: #00ffff; + box-shadow: + 0 0 25px rgba(0, 255, 255, 0.25), + -2px 0 0 #ff0055, + 2px 0 0 #00ffff; +} + +.dimmed-card { + opacity: 0.65; +} + +.card-badge { + align-self: flex-start; + font-size: var(--ease-text-xs, 0.75rem); + font-family: var(--ease-font-mono, monospace); + padding: 0.25rem 0.6rem; + border-radius: var(--ease-radius-full, 9999px); + background: rgba(0, 255, 255, 0.12); + color: #00ffff; + border: 1px solid rgba(0, 255, 255, 0.3); +} + +.muted-badge { + background: rgba(255, 255, 255, 0.05); + color: var(--ease-color-muted, #94a3b8); + border-color: rgba(255, 255, 255, 0.1); +} + +.card-title { + font-size: var(--ease-text-xl, 1.25rem); + margin: 0; + color: #ffffff; +} + +.card-excerpt { + font-size: var(--ease-text-sm, 0.875rem); + color: var(--ease-color-muted, #94a3b8); + margin: 0; + line-height: 1.5; +} + +.card-tags { + display: flex; + gap: var(--ease-space-2, 0.5rem); + flex-wrap: wrap; +} + +.tag { + font-size: 0.75rem; + font-family: var(--ease-font-mono, monospace); + color: var(--ease-color-neutral-400, #94a3b8); + background: rgba(255, 255, 255, 0.04); + padding: 0.2rem 0.5rem; + border-radius: var(--ease-radius-sm, 0.25rem); +} + +.btn-trigger { + margin-top: auto; + display: inline-flex; + align-items: center; + justify-content: space-between; + padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem); + background: #00ffff; + color: #080c16; + font-weight: 700; + font-size: var(--ease-text-sm, 0.875rem); + text-decoration: none; + border-radius: var(--ease-radius-md, 0.5rem); + transition: + background var(--ease-speed-fast, 150ms) var(--ease-ease, ease), + transform var(--ease-speed-fast, 150ms) var(--ease-ease, ease), + box-shadow var(--ease-speed-fast, 150ms) var(--ease-ease, ease); +} + +.btn-trigger:hover, +.btn-trigger:focus-visible { + background: #33ffff; + transform: translateY(-2px); + box-shadow: + 0 0 15px rgba(0, 255, 255, 0.5), + -2px 0 0 #ff0055; + outline: 2px solid #00ffff; + outline-offset: 3px; +} + +.btn-arrow { + transition: transform var(--ease-speed-fast, 150ms) var(--ease-ease, ease); +} + +.btn-trigger:hover .btn-arrow { + transform: translateX(4px); +} + +/* ── Glitch Modal System (Pure CSS via :target) ───────────────── */ +.glitch-modal-overlay { + position: fixed; + inset: 0; + background: rgba(8, 12, 22, 0.85); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + display: grid; + place-items: center; + z-index: var(--ease-z-modal, 1000); + padding: var(--ease-space-4, 1rem); + + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: + opacity var(--ease-speed-medium, 300ms) var(--ease-ease, ease), + visibility var(--ease-speed-medium, 300ms) var(--ease-ease, ease); +} + +.glitch-modal-overlay:target { + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.glitch-modal-backdrop { + position: absolute; + inset: 0; + cursor: default; +} + +.glitch-modal-card { + position: relative; + width: min(100%, 620px); + max-height: 90vh; + background: #0d1322; + border: 1px solid rgba(0, 255, 255, 0.35); + border-radius: var(--ease-radius-lg, 1rem); + box-shadow: + 0 0 40px rgba(0, 255, 255, 0.15), + 0 20px 25px -5px rgba(0, 0, 0, 0.5); + overflow-y: auto; + display: flex; + flex-direction: column; + z-index: 1; + transform: scale(0.95); + opacity: 0; +} + +.glitch-modal-overlay:target .glitch-modal-card { + animation: glitch-flicker-enter 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; +} + +/* Scanlines Effect */ +.glitch-scanlines { + position: absolute; + inset: 0; + background: repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.18), + rgba(0, 0, 0, 0.18) 1px, + transparent 1px, + transparent 3px + ); + pointer-events: none; + opacity: 0.6; + z-index: 10; +} + +/* Modal Header */ +.glitch-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--ease-space-4, 1rem) var(--ease-space-6, 1.5rem); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.header-meta { + display: flex; + gap: var(--ease-space-3, 0.75rem); + align-items: center; + font-family: var(--ease-font-mono, monospace); + font-size: var(--ease-text-xs, 0.75rem); +} + +.meta-tag { + color: #00ffff; +} + +.meta-status { + color: var(--ease-color-muted, #94a3b8); +} + +.glitch-modal-close { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: var(--ease-radius-md, 0.5rem); + color: var(--ease-color-muted, #94a3b8); + font-size: 1.5rem; + text-decoration: none; + line-height: 1; + transition: + color var(--ease-speed-fast, 150ms) var(--ease-ease, ease), + background var(--ease-speed-fast, 150ms) var(--ease-ease, ease); +} + +.glitch-modal-close:hover, +.glitch-modal-close:focus-visible { + color: #ff0055; + background: rgba(255, 0, 85, 0.15); + outline: 2px solid #ff0055; + outline-offset: 2px; +} + +/* Modal Body */ +.glitch-modal-body { + padding: var(--ease-space-6, 1.5rem); + display: flex; + flex-direction: column; + gap: var(--ease-space-4, 1rem); +} + +/* Glitch Title with Dual RGB Shift */ +.glitch-title { + position: relative; + font-size: clamp(1.4rem, 3.5vw, 1.8rem); + font-weight: 800; + color: #ffffff; + margin: 0; + letter-spacing: -0.01em; + display: inline-block; +} + +.glitch-title::before, +.glitch-title::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0.75; +} + +.glitch-title::before { + color: #00ffff; + left: -2px; + text-shadow: -1px 0 #00ffff; + clip-path: inset(25% 0 45% 0); + animation: glitch-rgb-anim-1 3s infinite linear alternate-reverse; +} + +.glitch-title::after { + color: #ff0055; + left: 2px; + text-shadow: 1px 0 #ff0055; + clip-path: inset(55% 0 15% 0); + animation: glitch-rgb-anim-2 2.5s infinite linear alternate-reverse; +} + +/* Visual Showcase Banner */ +.glitch-preview-banner { + height: 120px; + background: linear-gradient( + 135deg, + rgba(0, 255, 255, 0.1), + rgba(255, 0, 85, 0.1) + ); + border: 1px dashed rgba(0, 255, 255, 0.3); + border-radius: var(--ease-radius-md, 0.5rem); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--ease-space-3, 0.75rem); + position: relative; + overflow: hidden; +} + +.preview-waveform { + display: flex; + align-items: center; + gap: 6px; + height: 36px; +} + +.preview-waveform .bar { + width: 4px; + background: #00ffff; + border-radius: 2px; + animation: waveform-bounce 1.2s infinite ease-in-out alternate; +} + +.preview-waveform .bar:nth-child(1) { + height: 40%; + animation-delay: -0.4s; +} +.preview-waveform .bar:nth-child(2) { + height: 80%; + animation-delay: -0.2s; +} +.preview-waveform .bar:nth-child(3) { + height: 100%; + animation-delay: 0s; +} +.preview-waveform .bar:nth-child(4) { + height: 60%; + animation-delay: -0.5s; +} +.preview-waveform .bar:nth-child(5) { + height: 90%; + animation-delay: -0.1s; +} +.preview-waveform .bar:nth-child(6) { + height: 50%; + animation-delay: -0.3s; +} +.preview-waveform .bar:nth-child(7) { + height: 70%; + animation-delay: -0.6s; +} + +.preview-overlay-text { + font-family: var(--ease-font-mono, monospace); + font-size: var(--ease-text-xs, 0.75rem); + color: rgba(255, 255, 255, 0.7); + letter-spacing: 0.2em; +} + +.glitch-modal-desc { + font-size: var(--ease-text-sm, 0.875rem); + color: var(--ease-color-muted, #94a3b8); + line-height: var(--ease-leading-normal, 1.6); + margin: 0; +} + +/* Metrics Grid */ +.glitch-metrics-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--ease-space-3, 0.75rem); + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: var(--ease-radius-md, 0.5rem); + padding: var(--ease-space-3, 0.75rem); +} + +.metric-item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.metric-val { + font-family: var(--ease-font-mono, monospace); + font-weight: 700; + font-size: var(--ease-text-base, 1rem); + color: #00ffff; +} + +.metric-lbl { + font-size: 0.7rem; + color: var(--ease-color-muted, #94a3b8); + margin-top: 0.15rem; +} + +/* Tech Stack */ +.tech-stack-wrapper { + display: flex; + flex-direction: column; + gap: var(--ease-space-2, 0.5rem); +} + +.tech-title { + font-size: var(--ease-text-xs, 0.75rem); + color: var(--ease-color-muted, #94a3b8); +} + +.tech-tag { + font-size: 0.75rem; + font-family: var(--ease-font-mono, monospace); + color: #e2e8f0; + background: rgba(0, 255, 255, 0.08); + border: 1px solid rgba(0, 255, 255, 0.2); + padding: 0.2rem 0.5rem; + border-radius: var(--ease-radius-sm, 0.25rem); +} + +/* Modal Footer */ +.glitch-modal-footer { + padding: var(--ease-space-4, 1rem) var(--ease-space-6, 1.5rem); + border-top: 1px solid rgba(255, 255, 255, 0.08); + display: flex; + justify-content: flex-end; + gap: var(--ease-space-3, 0.75rem); +} + +.btn-action { + padding: var(--ease-space-3, 0.75rem) var(--ease-space-5, 1.25rem); + border-radius: var(--ease-radius-md, 0.5rem); + font-size: var(--ease-text-sm, 0.875rem); + font-weight: 600; + text-decoration: none; + transition: all var(--ease-speed-fast, 150ms) var(--ease-ease, ease); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.05); + color: var(--ease-color-muted, #94a3b8); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.btn-secondary:hover, +.btn-secondary:focus-visible { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + outline: 2px solid var(--ease-color-muted, #94a3b8); + outline-offset: 2px; +} + +.btn-primary { + background: #00ffff; + color: #080c16; + border: 1px solid #00ffff; +} + +.btn-primary:hover, +.btn-primary:focus-visible { + background: #33ffff; + box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); + outline: 2px solid #00ffff; + outline-offset: 2px; +} + +/* ── Keyframe Animations ──────────────────────────────────────── */ + +/* Glitch & Flicker Entrance */ +@keyframes glitch-flicker-enter { + 0% { + opacity: 0; + transform: scale(0.9) translate(-10px, 6px) skewX(-4deg); + clip-path: inset(15% 0 25% 0); + filter: hue-rotate(90deg); + } + 15% { + opacity: 0.85; + transform: scale(0.96) translate(8px, -4px) skewX(3deg); + clip-path: inset(45% 0 10% 0); + } + 30% { + opacity: 0.25; + transform: scale(0.93) translate(-4px, 2px) skewX(-2deg); + clip-path: inset(5% 0 65% 0); + } + 50% { + opacity: 0.95; + transform: scale(1.02) translate(3px, -1px) skewX(1deg); + clip-path: inset(0); + filter: hue-rotate(0deg); + } + 70% { + opacity: 0.75; + transform: scale(0.99) translate(-2px, 1px); + } + 100% { + opacity: 1; + transform: scale(1) translate(0) skewX(0); + clip-path: inset(0); + } +} + +/* Title RGB Slice Animations */ +@keyframes glitch-rgb-anim-1 { + 0% { + clip-path: inset(10% 0 80% 0); + transform: translate(-1px, 0); + } + 20% { + clip-path: inset(60% 0 15% 0); + transform: translate(1px, -1px); + } + 40% { + clip-path: inset(30% 0 40% 0); + transform: translate(-2px, 1px); + } + 60% { + clip-path: inset(75% 0 5% 0); + transform: translate(2px, 0); + } + 80% { + clip-path: inset(20% 0 50% 0); + transform: translate(-1px, -1px); + } + 100% { + clip-path: inset(50% 0 30% 0); + transform: translate(1px, 1px); + } +} + +@keyframes glitch-rgb-anim-2 { + 0% { + clip-path: inset(70% 0 10% 0); + transform: translate(1px, 1px); + } + 25% { + clip-path: inset(15% 0 65% 0); + transform: translate(-2px, 0); + } + 50% { + clip-path: inset(40% 0 30% 0); + transform: translate(2px, -1px); + } + 75% { + clip-path: inset(85% 0 5% 0); + transform: translate(-1px, 1px); + } + 100% { + clip-path: inset(25% 0 45% 0); + transform: translate(1px, -1px); + } +} + +/* Waveform Visualizer Animation */ +@keyframes waveform-bounce { + 0% { + transform: scaleY(0.4); + } + 100% { + transform: scaleY(1); + } +} + +/* ── Responsive Behavior ──────────────────────────────────────── */ +@media (max-width: 640px) { + .portfolio-shell { + padding: 0; + } + + .glitch-modal-card { + width: 95%; + max-height: 92vh; + } + + .glitch-metrics-grid { + grid-template-columns: 1fr; + gap: var(--ease-space-2, 0.5rem); + } + + .glitch-modal-footer { + flex-direction: column-reverse; + } + + .btn-action { + text-align: center; + width: 100%; + } +} + +/* ── Accessibility: prefers-reduced-motion ───────────────────── */ +@media (prefers-reduced-motion: reduce) { + .glitch-modal-card, + .glitch-modal-overlay:target .glitch-modal-card, + .glitch-title::before, + .glitch-title::after, + .preview-waveform .bar, + .featured-card:hover { + animation: none !important; + transform: none !important; + clip-path: none !important; + filter: none !important; + transition: opacity var(--ease-speed-fast, 150ms) ease !important; + } + + .glitch-scanlines { + display: none; + } +}