A teal domed glow on dark felt with coarse and fine grain layers, sized as a section background. Dome opacity acts as the darkness dial, and an optional vignette dissolves the edges for footers and CTAs.
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/felt-orbnpx shadcn add @01orbital/felt-orbyarn shadcn add @01orbital/felt-orbbunx --bun shadcn add @01orbital/felt-orbPart 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/orbs/felt-orb.tsx, as source you own and edit.
import { FeltOrb } from "@/components/orbs/felt-orb"
export default function FeltOrbDemo() {
return <FeltOrb size={340} className="aspect-3/2 min-h-96 w-full" />
}Felt Orb is built from 4 parts. In the example they nest like this:
FeltOrbFeltOrb: A dark felt panel with a teal sphere at its center, for the background of a section or card. Anything you put inside sits above the sphere and the grain.FeltGrain: The felt texture: two layers of grain, one coarse and one fine, laid over whatever is under it. It fills its positioned parent, ignores the pointer and is hidden from assistive tech. FeltOrb includes one.SectionVignette: Darkens the edges of its positioned parent with a soft inner shadow. It fills the parent, ignores the pointer and is hidden from assistive tech. FeltOrb adds one when dissolve is set.FeltDome: The teal felt sphere on its own, lit softly from the top, with grain on its surface. It is absolutely positioned with no placement of its own: set left and top with className or style. FeltOrb centers one for you.A dark felt panel with a teal sphere at its center, for the background of a section or card. Anything you put inside sits above the sphere and the grain.
It takes its height from its content or from a class you give it, and clips the sphere to its edges. Lower the sphere's opacity with orbStyle to make the panel darker.
Prop
Type
It also accepts the HTML attributes of the element it renders.
The felt texture: two layers of grain, one coarse and one fine, laid over whatever is under it. It fills its positioned parent, ignores the pointer and is hidden from assistive tech. FeltOrb includes one.
It accepts the HTML attributes of the element it renders.
Darkens the edges of its positioned parent with a soft inner shadow. It fills the parent, ignores the pointer and is hidden from assistive tech. FeltOrb adds one when dissolve is set.
It accepts the HTML attributes of the element it renders.
The teal felt sphere on its own, lit softly from the top, with grain on its surface. It is absolutely positioned with no placement of its own: set left and top with className or style. FeltOrb centers one for you.
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.
Cloudy Nimbus Moss
The Cloudy Nimbus disc in a moss palette, baked at 512px for larger placements such as heroes and cards. Grain overlays the paint from 48px up; smaller discs trade it for a half-pixel inner rim.
Key Light Orb
A near-black sphere lit by one dominant cyan key light from the lower right, drawn with SVG inset filters and a cast glow. A key, fill and rim palette reskins it, and fog mode softens the edge into a halo.