Aurora Blobs
Blurred gradient orbs drifting on transform-only keyframes with a film-grain overlay. The cheapest beautiful background there is — and it renders on the server.
csszero-jsrsc2 files · 88 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/aurora-blobs.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs aurora-blobsUsage
import { AuroraBlobs } from "@/components/opus/backgrounds/aurora-blobs";
<AuroraBlobs className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Up to five blob colours. |
| background | string | — | Base colour. |
| blur | number | 64 | Blur radius (px). |
| duration | number | 22 | Seconds per loop. |
| opacity / grain | number | 0.9 / 0.12 | Blob opacity and grain overlay. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion.