Glitch Text

Animations

Retro glitch effect text animation with cyber aesthetics.

Import

import { PixelGlitchText } from "@/components/ui/pixel/animations/pixel-glitch-text"

Usage

SYSTEM ERROR

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/animations/pixel-glitch-text.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelGlitchTextVariants = cva(
  "font-bold uppercase tracking-wider pixel-font relative inline-block",
  {
    variants: {
      variant: {
        default: "text-black dark:text-[#ffd700]",
        primary: "text-[#ff8c00] dark:text-[#ff8c00]",
        secondary: "text-[#ffd700] dark:text-[#ffd700]",
        cyber: "text-[#00ff00] dark:text-[#00ff00]",
      },
      size: {
        sm: "text-sm",
        md: "text-2xl",
        lg: "text-4xl",
        xl: "text-6xl",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelGlitchTextProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelGlitchTextVariants> {
  text: string;
  speed?: number;
  enableShadows?: boolean;
  enableOnHover?: boolean;
}

const PixelGlitchText = React.forwardRef<HTMLDivElement, PixelGlitchTextProps>(
  (
    {
      text,
      speed = 0.5,
      enableShadows = true,
      enableOnHover = false,
      variant,
      size,
      className,
      ...props

// ... (more code below)

Props

PropTypeDefaultDescription
textstring-The text to display
speednumber0.5Animation speed multiplier
enableShadowsbooleantrueShow glitch shadow effects
enableOnHoverbooleanfalseOnly glitch on hover
variant"default" | "primary" | "secondary" | "cyber""default"Color variant

Examples

Cyber Style

SYSTEM ERROR

Hover Effect

SYSTEM ERROR

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.