React Background Circles

Rotating circles that hypnotize like a mandala in motion. Build mesmerizing React backgrounds with smooth orbital animations, TypeScript support, and eight color themes for Next.js applications with shadcn/ui.

Framer Motion

Trying to implement hypnotic animations?

Join our Discord community for help from other developers.

Ever stared at a loading spinner until you forgot what you were waiting for? This React component takes that hypnotic quality and turns it into a full background. Concentric circles rotating in opposite directions, creating an endless mandala effect that's somehow both calming and captivating.

Orbital rotation animation

Watch circles orbit in perfect harmony with customizable colors:

Loading component...

'use client';import { motion } from "framer-motion";import { cn } from "@/lib/utils";import { useState } from "react";interface BackgroundCirclesProps {    title?: string;    description?: string;    className?: string;    variant?: keyof typeof COLOR_VARIANTS;}const COLOR_VARIANTS = {    primary: {        border: [            "border-emerald-500/60",            "border-cyan-400/50",            "border-slate-600/30",        ],        gradient: "from-emerald-500/30",    },    secondary: {        border: [            "border-violet-500/60",            "border-fuchsia-400/50",            "border-slate-600/30",        ],        gradient: "from-violet-500/30",    },    tertiary: {        border: [            "border-orange-500/60",            "border-yellow-400/50",            "border-slate-600/30",        ],        gradient: "from-orange-500/30",    },    quaternary: {        border: [            "border-purple-500/60",            "border-pink-400/50",            "border-slate-600/30",        ],        gradient: "from-purple-500/30",    },    quinary: {        border: [            "border-red-500/60",            "border-rose-400/50",            "border-slate-600/30",        ],        gradient: "from-red-500/30",    },    senary: {        border: [            "border-blue-500/60",            "border-sky-400/50",            "border-slate-600/30",        ],        gradient: "from-blue-500/30",    },    septenary: {        border: [            "border-gray-500/60",            "border-gray-400/50",            "border-slate-600/30",        ],        gradient: "from-gray-500/30",    },    octonary: {        border: [            "border-red-500/60",            "border-rose-400/50",            "border-slate-600/30",        ],        gradient: "from-red-500/30",    },} as const;const AnimatedGrid = () => (    <motion.div        className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"        animate={{            backgroundPosition: ["0% 0%", "100% 100%"],        }}        transition={{            duration: 40,            repeat: Number.POSITIVE_INFINITY,            ease: "linear",        }}    >        <div className="h-full w-full [background-image:repeating-linear-gradient(100deg,#64748B_0%,#64748B_1px,transparent_1px,transparent_4%)] opacity-20" />    </motion.div>);export function BackgroundCircles({    title = "Background Circles",    description = "Optional Description",    className,    variant = "octonary",}: BackgroundCirclesProps) {    const variantStyles = COLOR_VARIANTS[variant];    return (        <div            className={cn(                "relative flex h-screen w-full items-center justify-center overflow-hidden",                "bg-white dark:bg-black/5",                className            )}        >            <AnimatedGrid />            <motion.div className="absolute h-[400px] w-[400px] max-h-[80vh] max-w-[80vw]">                {[0, 1, 2].map((i) => (                    <motion.div                        key={i}                        className={cn(                            "absolute inset-0 rounded-full",                            "border-2 bg-gradient-to-br to-transparent",                            variantStyles.border[i],                            variantStyles.gradient                        )}                        animate={{                            rotate: 360,                            scale: [1, 1.05 + i * 0.05, 1],                            opacity: [0.8, 1, 0.8],                        }}                        transition={{                            duration: 5,                            repeat: Number.POSITIVE_INFINITY,                            ease: "easeInOut",                        }}                    >                        <div                            className={cn(                                "absolute inset-0 rounded-full mix-blend-screen",                                `bg-[radial-gradient(ellipse_at_center,${variantStyles.gradient.replace(                                    "from-",                                    ""                                )}/10%,transparent_70%)]`                            )}                        />                    </motion.div>                ))}            </motion.div>            <motion.div                className="relative z-10 text-center"                initial={{ opacity: 0, y: 20 }}                animate={{ opacity: 1, y: 0 }}                transition={{ duration: 0.8, ease: "easeOut" }}            >                <h1                    className={cn(                        "text-5xl font-bold tracking-tight md:text-7xl",                        "bg-gradient-to-b from-slate-950 to-slate-700 dark:from-slate-100 dark:to-slate-300 bg-clip-text text-transparent",                        "drop-shadow-[0_0_32px_rgba(94,234,212,0.4)]"                    )}                >                    {title}                </h1>                <motion.p                    className="mt-6 text-lg md:text-xl dark:text-white text-slate-950"                    initial={{ opacity: 0 }}                    animate={{ opacity: 1 }}                    transition={{ delay: 0.2 }}                >                    {description}                    <span className="mx-3 opacity-50">·</span>                    shadcn.io                </motion.p>            </motion.div>            <div className="absolute inset-0 [mask-image:radial-gradient(90%_60%_at_50%_50%,#000_40%,transparent)]">                <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,#0F766E/30%,transparent_70%)] blur-[120px]" />                <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,#2DD4BF/15%,transparent)] blur-[80px]" />            </div>        </div>    );}export function DemoCircles() {    const [currentVariant, setCurrentVariant] =        useState<keyof typeof COLOR_VARIANTS>("octonary");    const variants = Object.keys(        COLOR_VARIANTS    ) as (keyof typeof COLOR_VARIANTS)[];    function getNextVariant() {        const currentIndex = variants.indexOf(currentVariant);        const nextVariant = variants[(currentIndex + 1) % variants.length];        return nextVariant;    }    return (        <>            <BackgroundCircles variant={currentVariant} />            <div className="absolute top-12 right-12">                <button                    type="button"                    className="bg-slate-950 dark:bg-white text-white dark:text-slate-950 px-4 py-1 rounded-md z-10 text-sm font-medium"                    onClick={() => {                        setCurrentVariant(getNextVariant());                    }}                >                    Change Variant                </button>            </div>        </>    );}export type { BackgroundCirclesProps };export { COLOR_VARIANTS };

Built for React applications with TypeScript and Next.js. The circles use Framer Motion for butter-smooth 5-second rotation cycles with subtle scale effects. Eight color variants let you match any mood—from zen emerald to energetic fuchsia.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-circles.json

npx shadcn@latest add https://www.shadcn.io/registry/background-circles.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-circles.json

bunx shadcn@latest add https://www.shadcn.io/registry/background-circles.json

Usage

import { BackgroundCircles } from "@/components/ui/background-circles";

export default function Hero() {
  return (
    <BackgroundCircles 
      title="Welcome"
      description="To the hypnotic zone"
      variant="primary"
    />
  );
}

Why most circle animations feel mechanical

Most developers just rotate divs with transform: rotate(). It works, but it feels robotic. No depth, no life, just circles spinning like clock hands. Some add opacity changes, but that's just circles fading in and out.

This React component creates depth with counter-rotation—inner circles rotate opposite to outer ones. Add subtle scale animations and gradient overlays, and suddenly those circles feel alive. The diagonal grid background adds another layer of movement, creating that mandala effect that keeps eyes locked.

Features

Eight color themes from calming emerald to vibrant fuchsia
5-second rotation cycles with counter-rotating layers
Subtle scale animations creating breathing effect
Diagonal grid overlay adding depth and texture
TypeScript support with complete type definitions
Responsive scaling capped at 80vh/80vw for any screen
Hardware-accelerated CSS transforms via Framer Motion
shadcn/ui compatible using Tailwind CSS design tokens

API Reference

BackgroundCircles

Main container component for the rotating circles effect.

Prop	Type	Default	Description
`title`	`string`	`"Background Circles"`	Main text displayed in center
`description`	`string`	`"Optional Description"`	Subtext below the title
`className`	`string`	-	Additional Tailwind CSS classes
`variant`	`ColorVariant`	`"octonary"`	Color theme selection

Color Variants

type ColorVariant = 
  | "primary"    // Emerald and cyan
  | "secondary"  // Violet and fuchsia  
  | "tertiary"   // Orange and yellow
  | "quaternary" // Purple and pink
  | "quinary"    // Red and rose
  | "senary"     // Blue and sky
  | "septenary"  // Gray monochrome
  | "octonary"   // Alternative red and rose

Common gotchas

Text gets lost: The circles can overwhelm text. Use high contrast colors or add a semi-transparent overlay div between circles and content.

Performance on mobile: Multiple rotating layers with gradients can lag on older phones. Consider reducing circles or disabling on low-end devices.

Viewport scaling issues: The 80vh/80vw max prevents circles from extending beyond viewport, but very wide screens might show gaps. Test on ultrawide monitors.

Color variant naming: The variants use ordinal names (primary, secondary, tertiary...). Remember quaternary is 4th, quinary is 5th, etc.

Animation smoothness: If animations stutter, check for other heavy processes. Framer Motion uses will-change but competing animations can still cause issues.

Explore other animated background components for React applications:

Orbital rotation animation

Installation

Usage

Why most circle animations feel mechanical

Features

API Reference

BackgroundCircles

Color Variants

Common gotchas

You might also like

Vortex

Spiral Animation

Aurora

Gradient Animation

Waves

Bubble Background

Questions developers actually ask

On this page

React Background Circles