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.
"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;