Full-bleed radial darkening layer that shades the corners of a scene, in soft, medium or strong. Focuses the centre and helps text sit on art inside a positioned parent.
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/vignettenpx shadcn add @01orbital/vignetteyarn shadcn add @01orbital/vignettebunx --bun shadcn add @01orbital/vignettePart 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/vignette.tsx, as source you own and edit.
The example also uses celestograph-cover. Install it too:
pnpm dlx shadcn add @01orbital/celestograph-covernpx shadcn add @01orbital/celestograph-coveryarn shadcn add @01orbital/celestograph-coverbunx --bun shadcn add @01orbital/celestograph-coverimport { CelestographCover } from "@/components/celestograph/celestograph-cover"
import { Vignette } from "@/components/glow/vignette"
// The vignette darkens a picture's corners and leaves its centre lit.
export default function Demo() {
return (
<div className="relative isolate aspect-4/3 w-full max-w-lg overflow-hidden rounded-2xl">
<CelestographCover from="vignette" palette="warmth" />
<Vignette />
</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.
Traveling Arc
Circular frame with one short highlight running around its rim, built on the Arc traveling look, with children centred inside. Size, stroke, color or hue and arc length are adjustable; motion is opt-in.
Compare
Every Graphics component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.