A soft, blurred conic gradient turning slowly behind your content, like light moving round a room.
Light, turning
Customize
Usage
import { ConicGlow } from "@/components/motionkit/conic-glow";
<ConicGlow
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</ConicGlow>Motion
The exact curves this component runs, plotted with Motion's own maths.
Turn
Runs on its own
Calm hero sections, sign-up pages and feature intros, where colour should move without drawing attention.
A circle much larger than the area holds a conic gradient that sweeps through your three colours, heavily blurred so its edges never show, and turns on a slow linear loop. A radial gradient keeps the middle dark, so content stays readable while the colour moves round the edges. It's CSS and a transform, so it costs almost nothing.
Works in the App Router as is. Requires Tailwind CSS v4.
One command adds the file and installs its dependencies. Needs a components.json (run npx shadcn@latest init once if you don't have one).
npx shadcn@latest add https://motionkitui.com/r/conic-glow.jsonnpm install motionSave as components/motionkit/conic-glow.tsx.
"use client";
import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
type ConicGlowProps = {
children?: ReactNode;
/** Three colours swept round the glow. */
colors?: [string, string, string];
/** Seconds per full turn. */
duration?: number;
/** Strength of the glow, 0 to 1. */
intensity?: number;
className?: string;
};
/** A soft, blurred conic gradient turning slowly behind your content, like light moving round a room. */
export function ConicGlow({ children, colors = ["#0E7C86", "#A56D5B", "#5FAEB4"], duration = 24, intensity = 0.55, className = "" }: ConicGlowProps) {
const reduceMotion = useReducedMotion();
return (
<div className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}>
{/* oversized and blurred, so the turning edges never show; only the middle colour wash is visible */}
<motion.div
aria-hidden
className="absolute left-1/2 top-1/2 -z-10 aspect-square w-[160%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
style={{ background: `conic-gradient(from 0deg, ${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[0]})`, opacity: intensity }}
animate={reduceMotion ? undefined : { rotate: 360 }}
transition={{ duration, repeat: Infinity, ease: "linear" }}
/>
{/* a dark centre keeps text readable while the colour moves round the edges */}
<div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,rgb(12_16_16/0.85),rgb(12_16_16/0.35)_60%,transparent)]" />
{children}
</div>
);
}
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#0E7C86", "#A56D5B", "#5FAEB4"] | Three colours swept round the glow. |
| duration | number | 24 | Seconds per full turn. |
| intensity | number | 0.55 | Strength of the glow, 0 to 1. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes. Run npx shadcn@latest add https://motionkitui.com/r/conic-glow.json in any project with a components.json. It saves the file to components/motionkit and installs its dependencies.
With reduced motion on, the glow holds still.