Gradient Text

Animations

Animated gradient text with smooth color transitions.

Import

import { PixelGradientText } from "@/components/ui/pixel/animations/pixel-gradient-text"

Usage

RAINBOW

Component Source

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

"use client";

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

const pixelGradientTextVariants = cva(
  "font-bold uppercase tracking-wider pixel-font inline-block bg-clip-text text-transparent",
  {
    variants: {
      variant: {
        sunset: "bg-gradient-to-r from-[#ff8c00] via-[#ff0080] to-[#ff8c00]",
        ocean: "bg-gradient-to-r from-[#00d4ff] via-[#5227FF] to-[#00d4ff]",
        forest: "bg-gradient-to-r from-[#00ff00] via-[#ffff00] to-[#00ff00]",
        cyber: "bg-gradient-to-r from-[#ff00ff] via-[#00ffff] to-[#ff00ff]",
        gold: "bg-gradient-to-r from-[#ffd700] via-[#ff8c00] to-[#ffd700]",
      },
      size: {
        sm: "text-sm",
        md: "text-2xl",
        lg: "text-4xl",
        xl: "text-6xl",
      },
    },
    defaultVariants: {
      variant: "sunset",
      size: "md",
    },
  },
);

export interface PixelGradientTextProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelGradientTextVariants> {
  text: string;
  animationSpeed?: number;
  showBorder?: boolean;
}

const PixelGradientText = React.forwardRef<
  HTMLDivElement,
  PixelGradientTextProps
>(
  (
    {
      text,
      animationSpeed = 8,
      showBorder = false,
      variant,
      size,

// ... (more code below)

Props

PropTypeDefaultDescription
textstring-The text to display
animationSpeednumber8Gradient animation speed in seconds
showBorderbooleanfalseShow pixel border around text
variant"sunset" | "ocean" | "forest" | "cyber" | "gold""sunset"Gradient color scheme

Examples

Sunset Gradient

RAINBOW

With Border

RAINBOW

Accessibility

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