Beta

Aurora Background `<mv-aurora-background>`

CSS-Aurora aus einer Klasse: Weiche Lichtfalten mit scharfen senkrechten Strahlen treiben und atmen in zwei gegenläufigen Ebenen (oder als große wandernde Flecken), dezent im hellen Modus und leuchtend im dunklen, mit einem optionalen Element, das einen Schein hinzufügt, der einer Maus oder einem Stift nachgleitet. Sie läuft nahtlos in Schleife, stoppt bei reduzierter Bewegung, nimmt sich bei hohem Kontrast zurück und verschwindet bei erzwungenen Farben und im Druck.

Kategorie	Hintergründe
Typ	Web Component (`<mv-aurora-background>`)
Status	Beta
Keywords	safe-rewrite, aurora, gradient, blur, blobs, hero, css

When to use

A soft, colorful glow is needed behind a hero that looks right in both light and dark themes
The backdrop should move with CSS only, without paying for a canvas or WebGL context
A blurred glow should trail the mouse across a section for a light playful touch

Avoid when

A still, brand-tinted section background is enough and nothing should move → use Backdrop instead
The gradient should read as crisp, flowing brand colors rather than blurred curtains → use Mesh Gradient instead

Installation

node scripts/add.mjs aurora-background --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["aurora-background"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, components/aurora-background/aurora-background.css, components/aurora-background/aurora-background.js.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:grid;grid-template-columns:1.6fr 1fr;min-height:320px">
  <section style="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem">
    <div class="mv-aurora" data-fill aria-hidden="true"></div>
    <div style="position:relative">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">Ship under the northern lights</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">One class, no JavaScript: folds of light drifting behind your headline.</p>
      <a class="mv-button" href="#aurora-background">Start free trial</a>
    </div>
  </section>
  <section style="position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-left:1px solid var(--mv-border);padding:1.5rem">
    <mv-aurora-background data-variant="blobs" data-fill follow></mv-aurora-background>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">Blobs and a cursor glow</strong>
      <span style="font-size:.85rem;color:var(--mv-fg-muted)">data-variant="blobs" follow</span>
    </div>
  </section>
</div>

API

Attributes

Name	Typ	Default	Description
`data-variant`	blobs		Large wandering blobs instead of curtains.
`data-fade`	top-right \| center \| bottom \| none	`top-right`	Fade mask (blobs default to none).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).
`follow`	boolean		`<mv-aurora-background>`: adds a glow that glides after a mouse or pen pointer; it listens on the parent element, so content on top keeps its events. Touch is ignored.
`ease`	number	`0.08`	Glide of the glow: share of the gap closed per 60 Hz frame (0.01 to 0.9, lower is slower).

CSS classes

Name	Description
`mv-aurora`	CSS aurora layer (no JS). Place it behind the content (data-fill), with the content as a sibling: the fade mask applies to the whole layer.
`mv-aurora-pointer`	Glow that follows the pointer, created by `<mv-aurora-background follow>`.

CSS variables

Name	Default	Description
`--mv-aurora-1 … -4`	`around --mv-accent-h (green-teal, accent, blue, pink)`	Colors, alpha included; use light-dark() to adapt them to the theme.
`--mv-aurora-opacity`	`1`	Overall opacity.
`--mv-aurora-blur`	`44px`	Blur of the light (50px for blobs).
`--mv-aurora-speed`	`60s`	Duration of one full slide of the curtains (26s for one turn of the blobs).
`--mv-aurora-mask`		Custom fade mask, replaces data-fade.
`--mv-aurora-pointer / --mv-aurora-pointer-size`	`--mv-aurora-2 / 26rem`	Color and size of the follower glow.

Accessibility

Decorative: aria-hidden and pointer-events: none, so it never covers or intercepts content. Reduced motion (OS or [data-motion="reduce"]): the aurora stays visible but still, and the follower glow jumps to the pointer without gliding. The follower ignores touch, so it never hides what a finger presses. prefers-contrast: more quiets the layer to 45%; forced colors and print remove it.