Soft blue radial glow anchored to one edge of a positioned parent: top, right, bottom or left. Ships with SeamLine, a one-pixel overlay-blended rule for marking a panel edge.
"use client"
import { useId } from "react"
import { cn } from "cn"
const EDGE = {
right: {
cx: "100%",
cy: "50%",
className: "top-[-40%] -right-40 h-[180%] w-7xl",
},
left: {
cx: "0%",
cy: "50%",
className: "top-[-40%] -left-40 h-[180%] w-7xl",
},
bottom: {
cx: "50%",
cy: "100%",
className: "-bottom-40 left-[-40%] h-320 w-[180%]",
},
top: {
cx: "50%",
cy: "0%",
className: "-top-40 left-[-40%] h-320 w-[180%]",
},
} as const
/**
* A soft blue glow that comes in from one edge of a section, for the
* background behind its content. Put it inside a positioned parent: it fills
* that parent, clips itself to it, ignores the pointer and is hidden from
* assistive tech.
*/
function SideGlow({
edge = "right",
className,
...props
}: React.ComponentProps<"div"> & {
/** The edge the glow comes in from. Defaults to "right". */
edge?: keyof typeof EDGE
}) {
// An id passed in names the root; the gradient keeps its own.
const gradientId = `side-glow-${useId().replace(/[^\w-]/g, "")}`
const anchor = EDGE[edge]
return (
<div
aria-hidden="true"
data-slot="side-glow"
className={cn(
"pointer-events-none absolute inset-0 overflow-hidden",
className
)}
{...props}
>
<svg
className={cn("absolute", anchor.className)}
preserveAspectRatio="none"
>
<defs>
<radialGradient id={gradientId} cx={anchor.cx} cy={anchor.cy}>
<stop offset="0%" stopColor="oklch(0.754 0.139 233 / 0.3)" />
<stop offset="53.95%" stopColor="oklch(0.511 0.274 264 / 0.09)" />
<stop offset="100%" stopColor="oklch(0.164 0.02 266 / 0)" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill={`url(#${gradientId})`} />
</svg>
</div>
)
}
/**
* A one-pixel vertical line of white, blended in overlay mode so it lightens
* the surface under it. It is decorative and hidden from assistive tech.
*
* It is absolutely positioned with no height of its own: place it with
* `className`, for example `inset-y-0 right-0`.
*/
function SeamLine({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
aria-hidden="true"
data-slot="seam-line"
className={cn(
"pointer-events-none absolute w-px bg-[oklch(1_0_0)] mix-blend-overlay",
className
)}
{...props}
/>
)
}
export { SideGlow, SeamLine }
pnpm dlx shadcn add @01orbital/side-glownpx shadcn add @01orbital/side-glowyarn shadcn add @01orbital/side-glowbunx --bun shadcn add @01orbital/side-glowFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/glow/side-glow.tsx, as source you own and edit.
import { SeamLine, SideGlow } from "@/components/glow/side-glow"
// The glow and its seam on one edge of a panel.
export default function SideGlowDemo() {
return (
<div className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
<div className="relative isolate h-72 w-full max-w-md">
<SideGlow edge="right" />
<SeamLine className="inset-y-0 right-0" />
</div>
</div>
)
}Side Glow is built from 2 parts. In the example they nest like this:
SideGlow
SeamLineSideGlow: A soft blue glow that comes in from one edge of a section, for the background behind its content. Put it inside a positioned parent: it fills that parent, clips itself to it, ignores the pointer and is hidden from assistive tech.SeamLine: A one-pixel vertical line of white, blended in overlay mode so it lightens the surface under it. It is decorative and hidden from assistive tech.A soft blue glow that comes in from one edge of a section, for the background behind its content. Put it inside a positioned parent: it fills that parent, clips itself to it, ignores the pointer and is hidden from assistive tech.
Prop
Type
It also accepts the HTML attributes of the element it renders.
A one-pixel vertical line of white, blended in overlay mode so it lightens the surface under it. It is decorative and hidden from assistive tech.
It is absolutely positioned with no height of its own: place it with className, for example inset-y-0 right-0.
It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Rim Glow
Wrapper that rims its content with a currentColor glow inside and out, in dim, steady or breathing states. Can also cover the viewport as a presence overlay; breathing holds steady under reduced motion.
Stars
Seeded canvas starfield that fills a positioned parent with a mix of sharp and soft stars. Optional twinkle and fade-in respect reduced motion, and a circular cutout can hide stars behind an orb.