Floating Orbs
A free floating orbs background for softly animated dark sections.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Floating Orbs is a free floating orbs background React component for Next.js, styled with Tailwind, that sends five soft radial glows upward behind your content. Plain CSS keyframes move only transforms and opacity, while each orb keeps its blur static for smooth compositing.
A subtle noise overlay dithers the wide gradient falloffs so dark screens stay free of visible colour bands. The decorative fill layer ignores pointer input and focus, pauses its ambient loops while fully offscreen, and becomes a complete static composition when the user prefers reduced motion.
Ambient depth
Soft light rises behind the story
Five dithered glow orbs drift at their own pace while this foreground copy stays crisp, readable and completely still.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/bg-orbsUsage
import { BgOrbs } from "@/components/bg-orbs";
export function Example() {
return (
<section className="relative overflow-hidden bg-background">
<BgOrbs />
<div className="relative z-10">
<h2 className="text-4xl font-semibold">Your content here</h2>
<p className="text-muted">Soft light drifts behind this copy.</p>
</div>
</section>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes merged onto the root fill layer. |
Customisation
Floating Orbs exposes three Tier 3 tokens. --orbs-1 defaults to the Template Empire brand colour with --primary as its vanilla semantic fallback, --orbs-2 uses the accent colour with --ring as its fallback, and --orbs-blur controls the static 40px softness. Override them from :root or any ancestor:
:root {
--orbs-1: var(--color-brand-400, var(--primary));
--orbs-2: var(--color-accent-400, var(--ring));
--orbs-blur: 56px;
}Frequently asked questions
- Is Floating Orbs free for commercial use?
- Yes. Floating Orbs is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Floating Orbs accessible and performant?
- Yes. The entire layer is decorative, aria-hidden and unable to receive pointer input or focus. Its loops animate transforms and opacity only, keep blur and noise static, pause while fully offscreen, and stop completely under reduced motion while all five orbs remain visible.
- How do I customise the orb colours and softness?
- Override --orbs-1 and --orbs-2 with semantic colour tokens, and set --orbs-blur to the desired static blur radius. The built-in nested fallbacks keep the component usable in both Template Empire and vanilla shadcn themes.