beta

Aurora Background `<mv-aurora-background>`

Aurora em CSS com uma única classe: dobras suaves de luz com raios verticais nítidos flutuam e respiram em duas camadas opostas (ou grandes manchas errantes), discreta no modo claro e brilhante no modo escuro, com um elemento opcional que acrescenta um brilho que desliza atrás do mouse ou da caneta. Ela se repete sem emenda, para com movimento reduzido, se atenua em alto contraste e desaparece em forced colors e na impressão.

Categoria	Fundos
Tipo	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

Instalação

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

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

Arquivos copiados (dependências incluídas): 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

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis 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.