Feature/ease text glitch effect

submissions/examples/ease-text-glitch-effect/README.md

@@ -0,0 +1,66 @@
+# Modern CSS Text Glitch Effect Component
+
+A high-performance, lightweight digital glitch and chromatic aberration effect built entirely with pure HTML and CSS. It supports three distinct variants: a periodic display headline, an interactive hover-triggered button, and a continuous micro-vibrating terminal status bar.
+
+---
+
+## 1. What does this do?
+This component simulates digital screen interference, signal failure, and chromatic aberration (cyan/magenta color displacement). It features:
+- **Zero JavaScript**: Animates clip-paths, translations, and colors using pure CSS keyframes.
+- **Burst-Style Loop (Dormant Periods)**: Unlike common glitches that flicker non-stop, the main display text remains static and 100% readable for 85% of the loop cycle. It glitch-flickers only in brief, high-impact bursts, maintaining readability.
+- **Hover Trigger Mode**: Triggers a rapid visual distortion and offset aberration only when the cursor hovers over buttons or links, providing interactive tactile feedback.
+- **Low-Intensity Micro-Glitch**: A continuous, low-amplitude glitch suitable for dashboard indicators, monospaced logs, and HUD overlays.
+- **Adaptive Theme Support**: Automatically adapts to light and dark themes using built-in CSS variables.
+
+---
+
+## 2. How is it used?
+
+### Layout A: Periodic Burst Glitch Headline
+Place the target word inside an element with `.ease-glitch-title` and duplicate it in the `data-text` attribute. This attribute is read by the CSS pseudo-elements (`::before` and `::after`) to align the cyan and magenta layers:
+
+```html
+<h2 class="ease-glitch-title" data-text="NEO-TOKYO 2088">
+  NEO-TOKYO 2088
+</h2>
+```
+
+### Layout B: Interactive Glitch Button (Hover Triggered)
+To create a button that glitches on hover, apply the `.ease-glitch-btn` class and mirror the text in `data-text`:
+
+```html
+<button class="ease-glitch-btn" data-text="INITIATE SYSTEM HACK">
+  INITIATE SYSTEM HACK
+</button>
+```
+
+### Layout C: Continuous Monospace Tag
+To apply a low-intensity, persistent terminal glitch, use the `.ease-glitch-terminal-text` class:
+
+```html
+<div class="terminal-container">
+  <span class="ease-glitch-terminal-text" data-text="SYS_SECURE_CORE: ACTIVE">
+    SYS_SECURE_CORE: ACTIVE
+  </span>
+</div>
+```
+
+---
+
+## Class Catalog
+
+| Class Name | Type | Description |
+| :--- | :--- | :--- |
+| `.ease-glitch-title` | Element | Main display title with a periodic looping burst glitch (6s cycle). |
+| `.ease-glitch-btn` | Button | Interactive button that glitches and vibrates on cursor hover. |
+| `.ease-glitch-terminal-text` | Element | Monospaced text running a continuous, low-intensity micro-glitch. |
+| `.terminal-bg` | Container | Card container with scanline filters simulating a glowing retro monitor. |
+
+---
+
+## 3. Why is it useful?
+1. **Perfect Text Readability**: Confining the primary loop glitch to brief 0.2-second bursts ensures the text remains crisp and readable. This makes it suitable for headlines and body tags.
+2. **High-Performance rendering**: The CSS overlays use `clip-path: inset(100% 0 0 0)` and `opacity: 0` during quiet phases. This prevents the browser from rendering or blending overlapping text except during active glitch moments, keeping repaint cycles at a minimum.
+3. **No Image Assets**: Chromatic aberrations are drawn on the fly by offsetting text layers in CSS, meaning no heavy image loaders or asset requests are needed.
+4. **Universal Background Compatibility**: Since the pseudo-elements use clip-paths rather than background masks, the glitch effects overlay cleanly on top of transparent cards, rich image hero banners, and background videos.
+5. **Reduced Motion Compliant**: The stylesheet honors browser preferences by checking `@media (prefers-reduced-motion: reduce)`, immediately turning off all flashing, translations, and clipping to accommodate motion-sensitive users.

submissions/examples/ease-text-glitch-effect/demo.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Glitch Effect - EaseMotion CSS</title>
+
+  <!-- Link to the component stylesheet -->
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <!-- Pure CSS theme controller (hidden inputs) -->
+  <input type="radio" name="theme" id="theme-light" class="theme-control-input" checked hidden>
+  <input type="radio" name="theme" id="theme-dark" class="theme-control-input" hidden>
+
+  <!-- Main Demo Wrapper -->
+  <div class="demo-wrapper" id="demo-root">
+
+    <!-- Header -->
+    <header class="demo-header">
+      <h1>Text Glitch Effect</h1>
+      <p>A CSS-only, high-performance digital glitch and chromatic aberration effect. Features realistic periodic bursts, interactive hover glitches, and scanlines without JavaScript.</p>
+    </header>
+
+    <!-- Theme Controller Switcher -->
+    <div class="controls-container">
+      <div class="control-group">
+        <span class="control-label">Theme</span>
+        <div class="segmented-control theme-selector">
+          <label for="theme-light" id="theme-light-label">Light</label>
+          <label for="theme-dark" id="theme-dark-label">Dark</label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Glitch Showcase Grid -->
+    <main class="glitch-showcase-grid">
+
+      <!-- CARD 1: Cyberpunk Display Title (Burst Glitch) -->
+      <section class="card-showcase" id="card-hero-glitch">
+        <div class="card-header">
+          <span class="card-badge">Hero Headline</span>
+          <h3>Periodic Burst Glitch</h3>
+        </div>
+        <div class="card-body glitch-bg-display">
+          <!-- The data-text attributes must match the inner HTML exactly -->
+          <h2 class="ease-glitch-title" data-text="NEO-TOKYO 2088">NEO-TOKYO 2088</h2>
+        </div>
+        <div class="card-footer">
+          <p>Ideal for game titles and landing headers. Remains clean and 100% readable for 85% of the loop, then twitches in sudden high-impact digital interference slices.</p>
+        </div>
+      </section>
+
+      <!-- CARD 2: Interactive CTA Button (Hover Triggered) -->
+      <section class="card-showcase" id="card-button-glitch">
+        <div class="card-header">
+          <span class="card-badge badge-blue">Interactive UI</span>
+          <h3>Hover Glitch Trigger</h3>
+        </div>
+        <div class="card-body">
+          <button class="ease-glitch-btn" data-text="INITIATE SYSTEM HACK" id="btn-glitch-hack">
+            INITIATE SYSTEM HACK
+          </button>
+        </div>
+        <div class="card-footer">
+          <p>Triggers chromatic aberration, digital offset, and vibration animations only on cursor hover. Provides high-end interactive feedback for gaming sites.</p>
+        </div>
+      </section>
+
+      <!-- CARD 3: Monospace Status / Terminal Tag (Continuous Micro-Glitch) -->
+      <section class="card-showcase" id="card-tag-glitch">
+        <div class="card-header">
+          <span class="card-badge badge-purple">Console Status</span>
+          <h3>Continuous Micro-Glitch</h3>
+        </div>
+        <div class="card-body terminal-bg">
+          <div class="terminal-container">
+            <span class="ease-glitch-terminal-text" data-text="SYS_SECURE_CORE: CRITICAL">SYS_SECURE_CORE: CRITICAL</span>
+            <span class="terminal-cursor">_</span>
+          </div>
+        </div>
+        <div class="card-footer">
+          <p>A continuous, low-amplitude vibration and horizontal slicing effect. Ideal for background HUDs, security indicators, and tech interfaces.</p>
+        </div>
+      </section>
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="demo-footer">
+      <span>Part of the <strong>EaseMotion CSS</strong> Library</span>
+    </footer>
+
+  </div>
+
+</body>
+</html>