shadcn.io is not affiliated with official shadcn/ui
Centered Gradient Orbs Hero Block for Radix UI
A split hero between solid rails: a headline with a Shine Button and an outline button on one side, and on the other a framed panel where soft orbs of the theme's foreground drift slowly behind three stats.
Installation
Overview
A split hero with ambient orbs, for React with Radix UI, shown here for Nightjar, a sleep app. On the start side, an Announcement link, a headline, a subtitle, a Shine Button and an outline Button. A divider, with a + mark where it meets the top rule, separates it from a framed panel (+ marks on its corners) where out-of-focus orbs in the theme's foreground tones drift and breathe slowly behind three stats at display size: nights logged, minutes faster to fall asleep and soundscapes. The orbs are drawn with radial gradients, without a blur filter, so they stay cheap to animate, they hold still under reduced motion, and they're kept quiet so the stat labels keep their contrast. Below lg the panel sits under the copy and the three stats run in one row. Built with Bokeh, Announcement, Status, Shine Button, Button and Guides, with Lucide icons and Tailwind CSS. Made for creative tools, wellness apps and SaaS landing pages that want quiet visual interest without a screenshot or illustration.
FAQ
How do I change the orbs' colors, number or size?
The orbs are our Bokeh background, used as the panel itself. Edit the ORBS array for their colors: each orb takes one of them, and it holds the theme's foreground tones, so the orbs are monochrome in every theme. For a colored glow use tokens such as var(--primary). Use a token as it is: the theme's colors are oklch values, so hsl(var(--primary)) would be an invalid color. count sets how many orbs (4 here), and minSize and maxSize their diameters in pixels.
Can I choose where each orb sits?
Not one by one: Bokeh spreads the orbs evenly over the panel from their index, so the same count always gives the same layout, on the server and in the browser, and a different count gives a different one. Try a few counts and sizes until the orbs sit behind the numbers the way you like. For blobs that wander over a whole surface, use our Gradient or MeshGradient background.
How do I make the orbs stronger or quieter?
intensity sets their strength, and the panel sets [--bokeh-alpha:0.18], below the default, so the stat labels keep at least 4.5:1 contrast over the orbs in light and dark themes. Raise it for a bolder glow and measure the small muted labels when you do. speed scales their drift (0.6 here, slower than the default 1).
What moves, and what happens with reduced motion?
Each orb drifts on its own slow CSS loop and gently grows and dims, using transforms only, so nothing repaints. The announcement, headline, subtitle, actions and panel fade up once on load through Tailwind's starting: variant. With reduced motion the orbs hold their place and size, and motion-reduce:transition-none renders the content in place. The block has no state and runs no script.
Is the gradient orbs hero accessible?
Yes. The headline is the page's one h1, and the orbs are decorative and hidden from assistive technology. The announcement and both calls to action are links named by their text, and the stats are a description list, so each figure is read with its label, with each value in a bdi so units stay in place in right-to-left languages.
Each button renders its a through asChild, so the button's styles land on the link.
When should I use gradient orbs instead of a gradient mesh?
Use orbs when you want separate pools of light with empty panel between them, held to a frame beside the copy. Use a gradient mesh when you want one continuous wash of tone across a whole section behind a showcase, and a plain split hero when the visual should be the product itself.