Corner glow from two blurred conic color wheels, so the hue shifts as the light wraps the edge. A full-bleed overlay for a positioned card; rotation aims which hues land on the corner.
import { cn } from "cn"
// A conic disc: hue varies by angle, so it shifts as the light wraps the corner.
const WHEEL =
"conic-gradient(in srgb, oklch(0.628 0.258 29.2) 0deg, oklch(0.629 0.257 27.4) 54.89deg, oklch(0.698 0.171 243.8) 106.7deg, oklch(0.677 0.173 256.2) 162deg, oklch(0.507 0.277 263.7) 252deg, oklch(0.732 0.186 53) 306deg, oklch(0.628 0.258 29.2) 360deg)"
/**
* A blurred color-wheel glow set behind the top-right corner of its
* positioned parent, so the hue shifts as the light wraps the corner. It
* fills and clips to the parent, ignores the pointer, and is hidden from
* assistive tech.
*/
export function ConicGlow({
rotate = 224,
className,
...props
}: React.ComponentProps<"div"> & {
/**
* Turns the color wheel, in degrees, to choose which hues land on the
* corner. This is the main setting to adjust.
*/
rotate?: number
}) {
return (
<div
aria-hidden="true"
data-slot="conic-glow"
className={cn(
"pointer-events-none absolute inset-0 overflow-hidden",
className
)}
{...props}
>
<div
className="absolute -top-1/2 -right-1/2 size-105"
style={{ transform: `rotate(${rotate}deg)` }}
>
{/* Blur harder than ~32px on a 300px disc and the hues average back
into one color — the blob this exists to avoid. */}
<div
className="absolute top-1/2 left-1/2 size-75 -translate-1/2 rounded-full blur-[32px]"
style={{ background: WHEEL }}
/>
<div
className="absolute top-1/2 left-1/2 size-75 -translate-1/2 rounded-full mix-blend-screen blur-[32px]"
style={{ background: WHEEL }}
/>
</div>
</div>
)
}
pnpm dlx shadcn add @01orbital/conic-glownpx shadcn add @01orbital/conic-glowyarn shadcn add @01orbital/conic-glowbunx --bun shadcn add @01orbital/conic-glowFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/glow/conic-glow.tsx, as source you own and edit.
import { ConicGlow } from "@/components/glow/conic-glow"
// The disc is 420px: it leaks round the top-right corner of a panel about its size.
export default function ConicGlowDemo() {
return (
<div className="dark grid w-full place-items-center bg-background p-6 text-foreground">
<div className="relative isolate h-104 w-full max-w-md overflow-hidden rounded-2xl bg-card">
<ConicGlow />
</div>
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Concentric Rings
Nested outline arcs from outer to inner, built on Arc, with optional content centred on top. Ring count, colors, stroke widths and arc sweep are props; optional spin alternates direction per ring.
Edge Scrim
Overlay that darkens and progressively blurs one edge of the art beneath it so text can sit on images. Direction, strength, reach, blur and an optional tint color are adjustable.