Two lit divider marks: GlowSeam, a rose horizontal section seam, and StandingSeam, a cool vertical line that lights only the active tab trigger. Each glows on dark and becomes ink on light.
import { cn } from "cn"
// Diegetic seams, two marks. GlowSeam is the horizontal section divider
// (rose); StandingSeam is the vertical line marking the active item (cool).
// Each follows its ground: a lit seam on dark, the same hue as ink on light.
/**
* A thin horizontal divider between sections: a rose line, brightest in the
* middle and fading out at both ends, with a soft blurred bloom around it.
* In dark mode it glows; in light mode it is a deeper rose ink.
*
* It is decorative, hidden from assistive tech, and spans the width of its
* container.
*/
export function GlowSeam({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
aria-hidden="true"
data-slot="glow-seam"
className={cn(
"pointer-events-none relative h-0.5",
"[--gs-bloom:oklch(0.45_0.14_20/0.28)] [--gs-core:oklch(0.3_0.1_20)] [--gs-edge:oklch(0.45_0.13_15/0.9)]",
"dark:[--gs-bloom:oklch(0.68_0.14_20/0.55)] dark:[--gs-core:oklch(0.88_0.08_25)] dark:[--gs-edge:oklch(0.72_0.13_15/0.9)]",
className
)}
{...props}
>
<div
className="absolute inset-x-[6%] top-0 h-[1.5px]"
style={{
background:
"linear-gradient(90deg, transparent, var(--gs-edge) 38%, var(--gs-core) 52%, var(--gs-edge) 66%, transparent)",
}}
/>
<div
className="absolute inset-x-[12%] -top-1.75 h-3.75 blur-[9px] dark:mix-blend-screen"
style={{
background:
"radial-gradient(50% 100% at 50% 50%, var(--gs-bloom), transparent 75%)",
}}
/>
</div>
)
}
/**
* A vertical line of cool blue light that marks the active item, such as the
* selected tab. Like `GlowSeam`, it glows in dark mode and is a deeper ink in
* light mode. It is decorative and hidden from assistive tech.
*
* It is absolutely positioned with no size of its own: place it with
* `className`, for example `inset-y-0 left-0 w-3.5`, inside a positioned
* item. Inside a tab trigger it shows only while that tab is active.
*/
export function StandingSeam({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
aria-hidden="true"
data-slot="standing-seam"
className={cn(
// In a tab trigger it lights only the active one.
"pointer-events-none absolute in-data-[slot=tabs-trigger]:opacity-0 in-data-[slot=tabs-trigger]:in-data-active:opacity-100",
"[--ss-bloom:oklch(0.45_0.1_232/0.3)] [--ss-core:oklch(0.32_0.07_235)] [--ss-edge:oklch(0.45_0.09_230)]",
"dark:[--ss-bloom:oklch(0.7_0.1_232/0.55)] dark:[--ss-core:oklch(0.92_0.05_235)] dark:[--ss-edge:oklch(0.8_0.09_230)]",
className
)}
{...props}
>
<span
className="absolute inset-y-2 left-0 w-[1.5px]"
style={{
background:
"linear-gradient(180deg, transparent, var(--ss-edge) 30%, var(--ss-core) 50%, var(--ss-edge) 70%, transparent)",
}}
/>
<span
className="absolute inset-y-1 -left-1.5 w-3.5 blur-[7px] dark:mix-blend-screen"
style={{
background:
"radial-gradient(50% 60% at 50% 50%, var(--ss-bloom), transparent 78%)",
}}
/>
</span>
)
}
pnpm dlx shadcn add @01orbital/glow-seamnpx shadcn add @01orbital/glow-seamyarn shadcn add @01orbital/glow-seambunx --bun shadcn add @01orbital/glow-seamFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/glow/glow-seam.tsx, as source you own and edit.
import { GlowSeam } from "@/components/glow/glow-seam"
export default function GlowSeamDemo() {
return (
<div className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
<GlowSeam className="w-full" />
</div>
)
}Glow Seam is built from 2 parts. In the example they nest like this:
GlowSeamGlowSeam: A thin horizontal divider between sections: a rose line, brightest in the middle and fading out at both ends, with a soft blurred bloom around it. In dark mode it glows; in light mode it is a deeper rose ink.StandingSeam: A vertical line of cool blue light that marks the active item, such as the selected tab. Like GlowSeam, it glows in dark mode and is a deeper ink in light mode. It is decorative and hidden from assistive tech.A thin horizontal divider between sections: a rose line, brightest in the middle and fading out at both ends, with a soft blurred bloom around it. In dark mode it glows; in light mode it is a deeper rose ink.
It is decorative, hidden from assistive tech, and spans the width of its container.
It accepts the HTML attributes of the element it renders.
A vertical line of cool blue light that marks the active item, such as the selected tab. Like GlowSeam, it glows in dark mode and is a deeper ink in light mode. It is decorative and hidden from assistive tech.
It is absolutely positioned with no size of its own: place it with className, for example inset-y-0 left-0 w-3.5, inside a positioned item. Inside a tab trigger it shows only while that tab is active.
It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Glow Rig
Full-bleed lighting layer that hangs one hooded picture light above the top edge, screen blended. Overhead or corner placement, intensity and bulb color; needs a dark ground and a positioned parent.
Glow Section
Dark section wrapper lit by a Glow Rig lamp with optional film grain over a fixed near-black ground. Passes the bulb color to cards inside; lamp position, intensity and grain are configurable.