beta

Aurora Background `<mv-aurora-background>`

Aurora en CSS con una sola clase: suaves pliegues de luz con nítidos rayos verticales flotan y respiran en dos capas opuestas (o grandes manchas errantes), discreta en modo claro y luminosa en modo oscuro, con un elemento opcional que añade un resplandor que se desliza tras el mouse o el lápiz. Se repite en bucle sin costuras, se detiene con movimiento reducido, se atenúa con alto contraste y desaparece con colores forzados y al imprimir.

Categoría	Fondos
Tipo	Web Component (`<mv-aurora-background>`)
Estado	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

Instalación

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

Agente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["aurora-background"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Archivos copiados (dependencias incluidas): 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.

Uso

Marcado de referencia: parte de él y personalízalo con atributos, data-* y 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	Tipo	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.