Circular Text

Animations

Text arranged in a circle with rotation animation.

Import

import { PixelCircularText } from "@/components/ui/pixel/animations/pixel-circular-text"

Usage

ROUND AND ROUND

Component Source

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

"use client";

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

const pixelCircularTextVariants = cva(
  "font-bold uppercase tracking-wider pixel-font inline-block relative",
  {
    variants: {
      variant: {
        default: "text-black dark:text-[#ffd700]",
        primary: "text-[#ff8c00] dark:text-[#ff8c00]",
        secondary: "text-[#ffd700] dark:text-[#ffd700]",
        accent: "text-[#5227FF] dark:text-[#B19EEF]",
      },
      size: {
        sm: "text-xs w-16 h-16",
        md: "text-sm w-24 h-24",
        lg: "text-base w-32 h-32",
        xl: "text-lg w-40 h-40",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelCircularTextProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelCircularTextVariants> {
  text: string;
  spinDuration?: number;
  onHover?: "slowDown" | "speedUp" | "pause" | "reverse";
}

const PixelCircularText = React.forwardRef<
  HTMLDivElement,
  PixelCircularTextProps
>(
  (
    {
      text,
      spinDuration = 20,
      onHover = "speedUp",
      variant,
      size,
      className,

// ... (more code below)

Props

PropTypeDefaultDescription
textstring-The text to display in a circle
spinDurationnumber20Rotation duration in seconds
onHover"slowDown" | "speedUp" | "pause" | "reverse""speedUp"Hover behavior

Examples

Basic Rotation

ROUND AND ROUND

Accessibility

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