Glitch Text

'use client';

import './CyberpunkGlitchText.css';

/** CyberpunkGlitchText — ported from astro-component-kit. */
export interface CyberpunkGlitchTextProps {
  text: string;
}

export function CyberpunkGlitchText({ text }: CyberpunkGlitchTextProps) {
  return (
    <>
      <div className="glitch-text" data-text={text} data-rk-2349bb="">{text}</div>
    </>
  );
}

export default CyberpunkGlitchText;

/* CyberpunkGlitchText — ported from astro-component-kit (typography/CyberpunkGlitchText.astro) */

.glitch-text:where([data-rk-2349bb]) { position: relative; font-size: 3rem; font-weight: 900; color: #fff; text-transform: uppercase; }
.glitch-text:where([data-rk-2349bb])::before, .glitch-text:where([data-rk-2349bb])::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-text:where([data-rk-2349bb])::before { left: 2px; text-shadow: -2px 0 #ff003c; clip: rect(44px, 450px, 56px, 0); animation: cyberpunk-glitch-text-glitch-anim 5s infinite linear alternate-reverse; }
.glitch-text:where([data-rk-2349bb])::after { left: -2px; text-shadow: -2px 0 #00e0ff; clip: rect(12px, 450px, 80px, 0); animation: cyberpunk-glitch-text-glitch-anim 2s infinite linear alternate-reverse; }
@keyframes cyberpunk-glitch-text-glitch-anim { 
  0% { clip: rect(10px, 9999px, 20px, 0); transform: skew(0.5deg); } 
  20% { clip: rect(40px, 9999px, 50px, 0); } 
  40% { clip: rect(80px, 9999px, 90px, 0); } 
  60% { clip: rect(20px, 9999px, 30px, 0); } 
  80% { clip: rect(60px, 9999px, 70px, 0); } 
  100% { clip: rect(0, 9999px, 10px, 0); transform: skew(-0.5deg); } 
}
@media (max-width: 768px) { .glitch-text:where([data-rk-2349bb]) { font-size: 2rem; } }