Overview
Cyberpunk-style glitch text loader with RGB channel splitting, clip-path distortion, and random character scrambling. Three intensity levels: subtle, medium, and heavy.
Installation
npx shadcn@latest add @elements/loader-glitch-textUsage
import { LoaderGlitchText } from "@/components/elements/loader-glitch-text";
export function Loading() {
return <LoaderGlitchText text="LOADING" intensity="medium" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "LOADING" | Text to display |
intensity | "subtle" | "medium" | "heavy" | "medium" | Glitch intensity |
className | string | - | Additional CSS classes |