Skip to Content
Get full access

Orbital V6

Painted planet orb with extended lighting: adds three-point and eclipse form tiers to the classic shading, with quiet, cinematic and theatrical presets and eleven knobs. Derived lights need OKLCH palette colors.

pnpm dlx shadcn add @01orbital/orbital-v6

Usage

import { ORBITAL_PALETTES } from "@/components/orbs/orbital-palettes"
import { OrbitalV6 } from "@/components/orbs/orbital-v6"

// A quiet palette: its glow is nearly colorless, which the derived rim is for.
const PALETTE = ORBITAL_PALETTES.gold

export default function OrbitalV6Demo() {
  return (
    <div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
      <OrbitalV6 palette={PALETTE} size={280} form="eclipse" />
    </div>
  )
}

Examples

New

orbital-v6-off-lighting

orbital-v6-off-lighting

Off Lighting

OrbitalV6 example with the extended lighting form switched off, leaving the classic painted shading. A baseline gradient planet orb for comparing the three-point and eclipse tiers.

pnpm dlx shadcn add @01orbital/orbital-v6-off-lighting

New

orbital-v6-medium-lighting

orbital-v6-medium-lighting

Medium Lighting

OrbitalV6 example with medium lighting, a painted gradient planet orb between the quiet and strong presets. Shows the balanced three-point light intensity for avatars and hero art.

pnpm dlx shadcn add @01orbital/orbital-v6-medium-lighting

New

orbital-v6-strong-lighting

orbital-v6-strong-lighting

Strong Lighting

OrbitalV6 example with strong lighting, a painted gradient planet orb with pronounced highlights and deep shadow. The most dramatic of the three-point light presets for hero art.

pnpm dlx shadcn add @01orbital/orbital-v6-strong-lighting

New

orbital-v6-three-point-lighting

orbital-v6-three-point-lighting

Three Point Lighting

OrbitalV6 example with three-point lighting, a painted gradient planet orb with a key, fill and rim light. Shows the default extended lighting form of the orb component.

pnpm dlx shadcn add @01orbital/orbital-v6-three-point-lighting

New

orbital-v6-eclipse-lighting

orbital-v6-eclipse-lighting

Eclipse Lighting

OrbitalV6 lighting example using the eclipse form, which backlights the painted orb so a thin rim of light wraps a dark disc. One of the three lighting tiers of the planet orb.

pnpm dlx shadcn add @01orbital/orbital-v6-eclipse-lighting

New

orbital-v6-quiet-lights

orbital-v6-quiet-lights

Quiet Lights

OrbitalV6 example using the quiet light preset on a three-point lit painted orb. A subtle gradient planet orb for avatars and ambient backgrounds that should not draw attention.

pnpm dlx shadcn add @01orbital/orbital-v6-quiet-lights

New

orbital-v6-theatrical-lights

orbital-v6-theatrical-lights

Theatrical Lights

OrbitalV6 example with the theatrical light preset on a three-point lit painted orb. A high-contrast, stage-lit gradient planet orb for dramatic hero art and avatars.

pnpm dlx shadcn add @01orbital/orbital-v6-theatrical-lights

New

orbital-v6-tiny-indicator

orbital-v6-tiny-indicator

Tiny Indicator

Status indicator example: a tiny three-point OrbitalV6 on a light ground, used as a small live or listening dot. Shows the painted orb holding its form at icon size.

pnpm dlx shadcn add @01orbital/orbital-v6-tiny-indicator

New

orbital-v6-large-study

orbital-v6-large-study

Large Study

Large OrbitalV6 example with strong lighting, a big painted planet orb that shows the shading, glow and grain in full detail. Useful as hero art or a close study of the lighting tiers.

pnpm dlx shadcn add @01orbital/orbital-v6-large-study

New

orbital-v6-breathing

orbital-v6-breathing

Breathing

OrbitalV6 animation example: a three-point lit painted orb with the breathing animation on. Shows the slow pulse that suits an assistant avatar or a listening indicator.

pnpm dlx shadcn add @01orbital/orbital-v6-breathing

New

orbital-v6-no-halo

orbital-v6-no-halo

No Halo

OrbitalV6 example with its halo turned off on a light ground. Shows a painted gradient planet orb without the soft ring of light around it, for clean light-theme layouts.

pnpm dlx shadcn add @01orbital/orbital-v6-no-halo

New

orbital-v6-no-glow

orbital-v6-no-glow

No Glow

OrbitalV6 example with its glow turned off, leaving a painted orb with a crisp edge and no outer light. Shows how to remove the glow from the gradient planet orb.

pnpm dlx shadcn add @01orbital/orbital-v6-no-glow

New

orbital-v6-clean-surface

orbital-v6-clean-surface

Clean Surface

OrbitalV6 example with the surface grain removed, on a light ground. Shows a smooth gradient planet orb without the noise texture for clean, modern interfaces.

pnpm dlx shadcn add @01orbital/orbital-v6-clean-surface

New

orbital-v6-rough-surface

orbital-v6-rough-surface

Rough Surface

OrbitalV6 example with a rough, heavy surface grain on the painted orb. Shows the noise texture turned up for a printed, tactile gradient planet orb in avatars and hero art.

pnpm dlx shadcn add @01orbital/orbital-v6-rough-surface

New

orbital-v6-teal-and-ink

orbital-v6-teal-and-ink

Teal And Ink

OrbitalV6 palette example: a three-point lit painted orb in a custom teal and ink palette. Shows how your own OKLCH colors recolor the gradient planet orb.

pnpm dlx shadcn add @01orbital/orbital-v6-teal-and-ink

New

orbital-v6-coral-and-plum

orbital-v6-coral-and-plum

Coral And Plum

OrbitalV6 palette example: a three-point lit painted orb in a custom coral and plum palette. Shows how your own OKLCH colors recolor the gradient sphere.

pnpm dlx shadcn add @01orbital/orbital-v6-coral-and-plum

New

orbital-v6-silver-light

orbital-v6-silver-light

Silver Light

OrbitalV6 palette example: a three-point lit painted orb in a custom silver light palette. Shows how your own OKLCH colors give the gradient sphere a metallic look.

pnpm dlx shadcn add @01orbital/orbital-v6-silver-light

New

orbital-v6-side-lit

orbital-v6-side-lit

Side Lit

OrbitalV6 example of a three-point lit painted orb lit mostly from the side by its light knobs. Shows how to direct the highlights on the gradient planet orb.

pnpm dlx shadcn add @01orbital/orbital-v6-side-lit

New

orbital-v6-listening-companion

orbital-v6-listening-companion

Listening Companion

Assistant avatar example: a small breathing OrbitalV6 beside a Heading and a line of text, as a listening companion. Shows the painted orb as a voice or AI status indicator.

pnpm dlx shadcn add @01orbital/orbital-v6-listening-companion

New

orbital-v6-lighting-comparison

orbital-v6-lighting-comparison

Lighting Comparison

OrbitalV6 lighting comparison: three small painted orbs side by side showing the off, three-point and eclipse forms. A reference for choosing the lighting tier of the gradient planet orb.

pnpm dlx shadcn add @01orbital/orbital-v6-lighting-comparison

API reference

A painted ball: a ground color with an upper and a lower color field blurred over it, an optional glow, a lighting pass and grain. Besides the classic shading tiers it offers three-point and eclipse lighting.

The root is not clipped, so the halo and the eclipse corona spread past the size box. Hidden from assistive tech.

Prop

Type

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

Dependencies

npm: cn. The CLI installs them for you.

Registry pieces it installs with it:

Black Hole Orb

Bloom Orb

Cloudy Nimbus

Felt Orb

Fish Orb Bowl

Fish Orb Rim