Circles

Hypnotic rotating circles that mesmerize and captivate. This React component creates ethereal orbital animations perfect for Next.js meditation apps, creative portfolios, and spiritual wellness platforms.

Framer Motion

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 };

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

Features

Eight color variants including emerald/cyan, violet/fuchsia, and six additional themes
Smooth rotation animations with 5-second cycles and subtle scale effects using Framer Motion
Responsive design with automatic scaling (max 80vh/80vw) to fit all screen sizes
Animated grid background with moving diagonal patterns for added visual depth
Customizable content with configurable title and description text
TypeScript support with full type definitions and IntelliSense
shadcn/ui integration using Tailwind CSS design tokens
Performance optimized with hardware-accelerated CSS transforms

Examples

Interactive Variant Switcher

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 };

Use Cases

This free open source React component works well for:

Landing pages - Hero sections with calming animated backgrounds
Creative portfolios - Subtle backgrounds that don't compete with content
Wellness apps - Meditation and mindfulness interfaces built with Next.js
Dashboard layouts - Ambient backgrounds for data-heavy interfaces
Music applications - Visual accompaniment for audio players
Loading states - Engaging animations during content loading

API Reference

BackgroundCircles

Prop	Type	Default	Description
`title`	`string`	`"Background Circles"`	The main title text displayed in the center
`description`	`string`	`"Optional Description"`	The description text displayed below the title
`className`	`string`	`undefined`	Additional CSS classes to apply to the component
`variant`	`keyof typeof COLOR_VARIANTS`	`"octonary"`	The color variant to use for the circles and gradients

Color Variants

primary - Emerald and cyan gradient
secondary - Violet and fuchsia gradient
tertiary - Orange and yellow gradient
quaternary - Purple and pink gradient
quinary - Red and rose gradient
senary - Blue and sky gradient
septenary - Gray monochrome
octonary - Alternative red and rose gradient

Implementation Notes

Place component within a relative positioned container
Circles automatically scale to fit viewport (max 80vh/80vw)
Uses Framer Motion for smooth animations
Compatible with shadcn/ui design system
Supports both light and dark themes

Reactbackground-circles

Reactbackground-circles

On this page