Digital Glitch

"Digital Glitch" effect, reminiscent of retro CRT monitors and cyberpunk visuals. It moves away from the previous organic noise to a more geometric and distorted style. I've built it with the same high-quality, performant structure as before. You now have controls for Glitch Intensity, RGB Shift, and Scanline Density, along with new presets like "Damaged VCR" and "Cyberpunk" to showcase the different effects you can create.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Digital Glitch to your project and fits it to your theme.

import DigitalGlitch from "@/components/ui/digital-glitch";

const settings = {
  baseColor: "#00ffcc",
  glitchIntensity: 1,
  rgbShift: 0.005,
  scanlineDensity: 400,
  scanlineOpacity: 0.5,
  speed: 1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="relative h-screen w-screen overflow-hidden">
      <DigitalGlitch {...s} />
    </div>
  );
}