Glitch Text

A hover typography effect with jittering RGB split slices.

"use client";

import { useEffect, useRef, useState } from "react";

const clips = ["inset(10% 0 70% 0)", "inset(40% 0 20% 0)", "inset(60% 0 5% 0)"];

function randomOffset(xRange, yRange) {
  return {
    x: (Math.random() - 0.5) * xRange,
    y: (Math.random() - 0.5) * yRange
  };
}

export default function GlitchText() {
  const text = "Glitch Me";
  const [glitching, setGlitching] = useState(false);
  const [redOffset, setRedOffset] = useState({ x: 0, y: 0 });
  const [blueOffset, setBlueOffset] = useState({ x: 0, y: 0 });
  const [clipIndex, setClipIndex] = useState(0);
  const timerRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, []);

function trigger() {
    if (timerRef.current) clearInterval(timerRef.current);

let frame = 0;
    const activeFrames = Math.max(1, Math.round(24 * 0.75));

timerRef.current = setInterval(() => {
 frame += 1;
 setGlitching(frame < activeFrames);
 setRedOffset(randomOffset(6, 3));
 setBlueOffset(randomOffset(6, 3));
 setClipIndex(Math.floor(Math.random() * clips.length));

if (frame >= 24) {
        setGlitching(false);
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    }, 40);
  }

return (
 <span
 onPointerEnter={trigger}
 style={{
 position: "relative",
 display: "inline-block",
 color: "#ffffff",
 cursor: "default",
 font: "800 clamp(3rem, 9vw, 8rem)/0.95 system-ui",
 letterSpacing: "-0.04em"
 }}
 >
 {text}
 {glitching && (
 <>
 <span
 aria-hidden="true"
 style={{
 position: "absolute",
 left: 0,
 top: 0,
 color: "#ff3b3b",
 clipPath: clips[clipIndex],
 opacity: 0.85,
 transform: `translate(${redOffset.x}px, ${redOffset.y}px)`
 }}
 >
 {text}
 
 <span
 aria-hidden="true"
 style={{
 position: "absolute",
 left: 0,
 top: 0,
 color: "#3b8fff",
 clipPath: clips[(clipIndex + 1) % clips.length],
 opacity: 0.85,
 transform: `translate(${blueOffset.x}px, ${blueOffset.y}px)`
 }}
 >
 {text}
 
 </>
 )}
 
 );
}