Cyberpunk Glitch Upgrade Modal

This is a Cyberpunk Glitch Upgrade Modal. It transforms a standard confirmation dialog into a highly stylized, cinematic interface. Its function is to provide explicit interaction boundaries using the native HTML Popover API, augmented with aggressive visual distortion (glitches) and integrated audio feedback for a deeply immersive user experience.

Specs

• Weight: ~15 KB (Excluding the external Tweakpane dependency and remote audio files).
• Performance: Moderate. The use of complex clip-path polygon morphing inside the @keyframes glitch can cause GPU spikes during the animation block.
• Theming / Customization: Entirely driven by CSS variables (--accent, --shadow) injected via JS. It includes a built-in Tweakpane configuration panel for real-time light/dark mode and color adjustments.
• Responsiveness: Utilizes clamp() functions for dynamic sizing (clamp(340px, 55vw, 480px)), ensuring the modal fits mobile screens while retaining its rigid geometric structure.
• Web APIs: Popover API (popovertarget, popovertargetaction), Web Audio API, Web Animations API (getAnimations().map(a => a.finished)).
• Graceful Degradation: Relies heavily on modern CSS (@layer, :popover-open, @starting-style). In older browsers, the modal may render as a static block at the bottom of the page without transitions.

Anatomy

The component heavily exploits the new CSS Cascade Layers and native Popover attributes.

• HTML (The Skeleton): The trigger button uses popovertarget="upgrade". The modal itself (id="upgrade") contains .body__backdrop (for the frosted glass), .body__content (the text), and an invisible .modal__glitch container duplicating the text for the distortion effect.
• CSS (The Skin): Organized into strict @layer blocks (normalize, base, demo, backdrop, transition, delays, glitch). Uses clip-path: polygon() to slice off corners, creating the signature sci-fi aesthetic.
• JS (The Nervous System): Controls the audio playback, manages keyboard shortcuts (u to open, Enter/Escape to close), and orchestrates the randomized glitch timing using setTimeout and requestAnimationFrame.

Logic

The core visual trick is the “Synchronized Clip-Path Glitch”:

@keyframes glitch {
  0% { clip-path: var(--clip-one); }
  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  /* ... rapid chaotic keyframes ... */
  31%, 61%, 100% { clip-path: var(--clip-four); }
}

Instead of using canvas noise or animated SVGs, the developer duplicates the entire modal content and positions it absolutely behind the original. The @keyframes animation rapidly swaps between highly irregular clip-path: polygon() shapes while simultaneously shifting the transform: translate. This exposes only fractured, misaligned slivers of the duplicate text, creating a mathematically perfect, resolution-independent digital tear.

Feel

Aggressive, tactile, and cinematic. The staggered entrance of the modal — where the border draws first, followed by the frosted backdrop, the text, and finally the action buttons — feels like a physical HUD booting up. The randomized graphical glitches, paired with the sharp audio cues on click, make the interface feel dangerous and alive.