bêta

Aurora Background `<mv-aurora-background>`

Aurore en CSS avec une seule classe : de doux plis de lumière traversés de rayons verticaux nets dérivent et respirent en deux couches opposées (ou de grandes taches errantes), discrète en mode clair et lumineuse en mode sombre, avec un élément facultatif qui ajoute une lueur glissant à la suite d’une souris ou d’un stylet. Elle boucle sans raccord visible, s’arrête en mouvement réduit, se fait plus discrète en contraste élevé et disparaît en couleurs forcées et à l’impression.

Catégorie	Arrière-plans
Type	Web Component (`<mv-aurora-background>`)
Statut	bêta
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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["aurora-background"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<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	Type	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.