Signature / Molecule

Aurora Background

Animated gradient mesh backdrop with floating blurred blobs.

Edit on GitHub

pnpm dlx @glinui/cli@latest add aurora-background

Branch previews are live

Ship every branch to a live URL

Push to Git and get a shareable preview in under a minute, with logs, rollbacks and per-branch environment variables.

Works with

Vercel
GitHub
Cloudflare
Astro

Installation$

Install from

pnpm dlx @glinui/cli@latest add aurora-background

Prefer the package?

Usage$

Place AuroraBackground inside a relative container. It renders blurred gradient blobs that float with CSS animations. Perfect for hero sections and landing pages.

Examples$

Variants$

Default

Cool tones

Dense

import { AuroraBackground } from "@glinui/ui"


export function Variants() {
  return (
    <div data-glin-theme="dark" className="grid w-full gap-3 sm:grid-cols-3">
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <AuroraBackground intensity={0.6} />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Default</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <AuroraBackground colors={["#06b6d4", "#3b82f6", "#8b5cf6"]} intensity={0.6} />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Cool tones</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <AuroraBackground blobCount={5} duration={12} blur={100} intensity={0.6} />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Dense</span>
      </div>
    </div>
  )
}

import { AuroraBackground, Button, Heading, Input, Label, Text } from "@glinui/ui"


export function SignIn() {
  return (
    <section data-glin-theme="dark" className="relative isolate flex min-h-[26rem] w-full items-center justify-center overflow-hidden rounded-xl bg-[var(--surface-0)] px-4 py-10">
      <AuroraBackground intensity={0.55} />
      <form className="relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left [box-shadow:var(--shadow-lg)]">
        <div className="flex flex-col gap-1">
          <Heading level={2} size="sm">Sign in to Northwind</Heading>
          <Text size="sm" variant="muted">Use your work email to continue.</Text>
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="email">Work email</Label>
          <Input id="email" type="email" autoComplete="email" placeholder="you@company.com" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" autoComplete="current-password" placeholder="At least 12 characters" />
        </div>
        <Button type="submit" className="w-full">Continue</Button>
      </form>
    </section>
  )
}

Accessibility$

The component renders with aria-hidden, invisible to assistive technologies.
Purely decorative; carries no semantic meaning.

Reduced Motion$

When prefers-reduced-motion: reduce is active, all blob animations are paused via motion-reduce:[animation:none]. The static gradient blobs remain visible.

API Reference$

Prop	Type	Required	Default	Description
`blobCount`	`number`	No	`3`	Number of gradient blobs
`blur`	`number`	No	`80`	Blur intensity in px
`colors`	`string[]`	No	`["var(--color-accent)", "var(--tone-info)", "var(--gradient-to)"]`	Base colors for the aurora. Defaults come from theme tokens so the blobs read on light and dark scopes.
`duration`	`number`	No	`8`	Animation duration in seconds
`intensity`	`number`	No	`0.4`	Opacity of the aurora layer (0-1)

Source$

import { AuroraBackground } from "@glinui/ui"

packages/ui/src/components/aurora-background.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/aurora-background.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

AuroraBackgroundProps