Glow

Backlight Bloom

Wrapper that casts a blurred halo of light behind its children, as if the panel were lit from behind. Color, blur, intensity and spread are adjustable; an overflow-hidden ancestor clips it.

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.

Installation

pnpm dlx shadcn add @01orbital/backlight-bloom
npx shadcn add @01orbital/backlight-bloom
yarn shadcn add @01orbital/backlight-bloom
bunx --bun shadcn add @01orbital/backlight-bloom

Part 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/backlight-bloom.tsx, as source you own and edit.

The example also uses card. Install it too:

pnpm dlx shadcn add @01orbital/card
npx shadcn add @01orbital/card
yarn shadcn add @01orbital/card
bunx --bun shadcn add @01orbital/card

Usage

import { BacklightBloom } from "@/components/glow/backlight-bloom"
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  title: "Lit from behind",
  body: "The halo spills past every edge of whatever it wraps.",
} as const

export default function BacklightBloomDemo() {
  return (
    <BacklightBloom>
      <Card className="w-72">
        <CardHeader>
          <CardTitle>{COPY.title}</CardTitle>
          <CardDescription>{COPY.body}</CardDescription>
        </CardHeader>
      </Card>
    </BacklightBloom>
  )
}

API reference

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.