Loading…

Gradient Orb

beta

An animated gradient orb — a rotating conic mesh with a dot screen, sheen and bloom — that can follow an AI state and a live audio level.

Effects & motion
1 file
No extra npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add gradient-orb

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { GradientOrb } from "@/components/ui/gradient-orb";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Sizes
Custom Colours

API

Generated from the component's own types, so a prop cannot appear here without existing.

<GradientOrb>

Prop	Type	Default
`amplitude` Live audio level, 0–1. Tightens the blur and swells the disc while the state listens (`listening`, `streaming`, `speaking`, and — faintly — `thinking`). For a 60fps signal, skip the re-render: set the `--orb-amplitude` custom property on the element through its ref.	`number`	`0`
`colors` Any CSS colours — tokens by default.	`GradientOrbColors`	—
`duration` Seconds per rotation of the mesh at the base tempo.	`number`	`20`
`size` Diameter. A number is pixels; a string is any CSS length.	`number \| string`	`192`
`state` Shared AI state: changes tempo, scale, saturation and bloom. Omit it for plain decoration at the base tempo.	`GradientOrbState`	—

Plus every attribute of <div> except children.

Accessibility

Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role="img". It never reports state on its own — pair it with a text status. Pure CSS; under reduced motion every loop stops and the orb shows its settled first frame.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

amplitude

Live audio level, 0–1. Tightens the blur and swells the disc while the state listens (listening, streaming, speaking, and — faintly — thinking). For a 60fps signal, skip the re-render: set the --orb-amplitude custom property on the element through its ref.

number

0

colors

Any CSS colours — tokens by default.

GradientOrbColors

—

duration

Seconds per rotation of the mesh at the base tempo.

number

20

size

Diameter. A number is pixels; a string is any CSS length.

number | string

192

state

Shared AI state: changes tempo, scale, saturation and bloom. Omit it for plain decoration at the base tempo.

GradientOrbState

—