React Circular Text Animation

Powered by

Motion

Most text layouts are linear and predictable—horizontal lines that don't utilize screen space creatively or capture attention through movement. This component arranges text in a perfect circle with continuous rotation, creating eye-catching animations that can respond interactively to user hover states.

Interactive circular spinning text

Text arranged in a circle with customizable hover effects and rotation speed:

import CircularText from '@/components/ui/shadcn-io/circular-text';const CircularTextDemo = () => {  return (    <div className="flex items-center justify-center min-h-screen w-full bg-gradient-to-br from-background via-muted to-background">      <div className="flex flex-col items-center space-y-12">        <CircularText          text="SHADCN/UI • COMPONENTS • "          onHover="speedUp"          spinDuration={15}          className="text-primary tracking-widest"        />      </div>    </div>  );};export default CircularTextDemo;

'use client';import React, { useEffect } from 'react';import { motion, useAnimation, useMotionValue, MotionValue, Transition } from 'motion/react';interface CircularTextProps {  text: string;  spinDuration?: number;  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers';  className?: string;}const getRotationTransition = (duration: number, from: number, loop: boolean = true) => ({  from,  to: from + 360,  ease: 'linear' as const,  duration,  type: 'tween' as const,  repeat: loop ? Infinity : 0});const getTransition = (duration: number, from: number) => ({  rotate: getRotationTransition(duration, from),  scale: {    type: 'spring' as const,    damping: 20,    stiffness: 300  }});const CircularText: React.FC<CircularTextProps> = ({  text,  spinDuration = 20,  onHover = 'speedUp',  className = ''}) => {  const letters = Array.from(text);  const controls = useAnimation();  const rotation: MotionValue<number> = useMotionValue(0);  useEffect(() => {    const start = rotation.get();    controls.start({      rotate: start + 360,      scale: 1,      transition: getTransition(spinDuration, start)    });  }, [spinDuration, text, onHover, controls, rotation]);  const handleHoverStart = () => {    const start = rotation.get();    if (!onHover) return;    let transitionConfig: ReturnType<typeof getTransition> | Transition;    let scaleVal = 1;    switch (onHover) {      case 'slowDown':        transitionConfig = getTransition(spinDuration * 2, start);        break;      case 'speedUp':        transitionConfig = getTransition(spinDuration / 4, start);        break;      case 'pause':        transitionConfig = {          rotate: { type: 'spring', damping: 20, stiffness: 300 },          scale: { type: 'spring', damping: 20, stiffness: 300 }        };        break;      case 'goBonkers':        transitionConfig = getTransition(spinDuration / 20, start);        scaleVal = 0.8;        break;      default:        transitionConfig = getTransition(spinDuration, start);    }    controls.start({      rotate: start + 360,      scale: scaleVal,      transition: transitionConfig    });  };  const handleHoverEnd = () => {    const start = rotation.get();    controls.start({      rotate: start + 360,      scale: 1,      transition: getTransition(spinDuration, start)    });  };  return (    <motion.div      className={`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-foreground text-center cursor-pointer origin-center ${className}`}      style={{ rotate: rotation }}      initial={{ rotate: 0 }}      animate={controls}      onMouseEnter={handleHoverStart}      onMouseLeave={handleHoverEnd}    >      {letters.map((letter, i) => {        const rotationDeg = (360 / letters.length) * i;        const factor = Math.PI / letters.length;        const x = factor * i;        const y = factor * i;        const transform = `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;        return (          <span            key={i}            className="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"            style={{ transform, WebkitTransform: transform }}          >            {letter}          </span>        );      })}    </motion.div>  );};export default CircularText;

Built with TypeScript and Motion for React applications, using precise trigonometric calculations for letter positioning. The component features multiple hover interaction modes including speed changes, pausing, and "bonkers" mode for playful user engagement.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/circular-text.json

npx shadcn@latest add https://www.shadcn.io/registry/circular-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/circular-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/circular-text.json

Usage

import CircularText from "@/components/text/circular-text";

<CircularText
  text="REACT • COMPONENTS • BUILD FAST • "
  onHover="speedUp"
  spinDuration={20}
  className="text-primary"
/>

Why most text layouts are boring

Most developers stick to linear text flows—left-to-right reading patterns that don't explore the full potential of screen real estate. Static text sits there doing nothing, missing opportunities to create visual interest through motion and spatial arrangement.

This React component uses mathematical positioning to place each character along a perfect circle, creating a mesmerizing rotation effect. The hover interactions add playful engagement, allowing users to control the animation speed and feel connected to the visual experience.

The key insight: circular motion draws attention naturally. When text moves in predictable patterns that users can influence, it transforms from static information into an interactive visual element that enhances user engagement.

Features

• Perfect circular text arrangement with precise trigonometric character positioning
• Multiple interactive hover modes: slowDown, speedUp, pause, and goBonkers for varied user experiences
• Smooth rotation animations with customizable duration and linear easing for consistent motion
• Spring-based hover transitions with configurable damping and stiffness for natural feel
• Theme-aware styling with CSS custom properties for seamless design system integration
• Performance optimized with Motion's animation controls and hardware-accelerated transforms
• Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

CircularText

Circular rotating text component with interactive hover effects.

Hover Effect Options

Different interaction modes for user engagement:

Duration Configuration

Control rotation speed with spinDuration values:

Common gotchas

Text doesn't fit in circle: The component uses a fixed 200px circle. For longer text, consider adding separators (• or *) between words or adjusting the container size with custom CSS to accommodate more characters.

Letters appear cut off: Ensure the container has sufficient padding and the parent element doesn't have overflow:hidden that might clip the rotating text. Each letter is absolutely positioned and may extend beyond the base container.

Hover effects feel laggy: The component uses spring animations for smooth transitions. If performance is an issue, consider reducing the spring stiffness or using simpler linear transitions for faster response times.

Animation doesn't restart properly: The component tracks rotation state internally. If you need to reset the animation, consider adding a key prop to force component remounting or implementing a reset function.

Text spacing looks uneven: Character spacing is calculated mathematically based on text length. Very short text might look sparse while very long text might overlap. Consider optimal text lengths of 15-30 characters.

Integration with other components

Perfect for logo animations in Card headers or branding elements in Dialog modals. Works excellently as loading indicators with Progress components or as decorative elements in Badge designs.

For creative interfaces, combine with Avatar components for profile animations or Button components for interactive call-to-action elements. The component integrates seamlessly with Tabs for section identifiers and works well within Sheet overlays for dynamic navigation elements.

Questions developers actually ask