GlitchTextLoader

This component is a modern, minimalistic loading animation built using React, TypeScript, and Tailwind CSS with shadcn/ui styling principles. It visually represents a dynamic series of vertical bars that scale rhythmically, creating a smooth pulsating effect similar to an audio equalizer or energy waveform. Each bar animates with a slight delay, giving a sense of movement and depth. The animation’s colors, speed, and size are fully configurable via props, allowing easy integration into different design systems or dark/light modes. Its simplicity, responsiveness, and configurability make it ideal for loading states, dashboard widgets, or landing pages needing a sleek, futuristic vibe.

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

"use client";

import React from "react";
import GlitchTextLoader from "@/components/ui/glitch-text-loader";

const GlitchTextLoaderDemo: React.FC = () => {
  return (
    <div className="flex flex-col items-center justify-center">

      {/* Default Loader */}
      <GlitchTextLoader className="mb-10" />

      {/* Customized Loader */}
      <GlitchTextLoader
        text="CYBERPUNK"
        fontSize="text-6xl"
        color1="text-cyan-400"
        color2="text-purple-500"
        color3="text-pink-400"
        speed={0.9}
      />
    </div>
  );
};

export default GlitchTextLoaderDemo;