Thin glowing line with layered bloom, horizontal or vertical, positioned along its parent. Amber, rose and ice presets; it glows on dark themes and turns into a shaded ink line on light ones.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/glow-linenpx shadcn add @01orbital/glow-lineyarn shadcn add @01orbital/glow-linebunx --bun shadcn add @01orbital/glow-linePart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/glow/glow-line.tsx, as source you own and edit.
import { GlowLine } from "@/components/glow/glow-line"
export default function GlowLineDemo() {
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 h-72 w-full max-w-2xl overflow-hidden rounded-lg">
<GlowLine preset="rose" position="52%" />
</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.
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.
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.