Aurora Background `<mv-aurora-background>`

一个类即可实现的 CSS 极光：带有清晰竖直光线的柔和光幕在两个反向图层中飘动、呼吸（或变成游走的大色块），浅色模式下安静，深色模式下发光，还可以加一个可选元素，让一团光晕跟随鼠标或触控笔滑动。

工作原理

一个类即可实现的 CSS 极光：带有清晰竖直光线的柔和光幕在两个反向图层中飘动、呼吸（或变成游走的大色块），浅色模式下安静，深色模式下发光，还可以加一个可选元素，让一团光晕跟随鼠标或触控笔滑动。它无缝循环，在减少动态效果时停止，在高对比度模式下自动减弱，在强制颜色模式和打印时消失。

分类	背景
类型	Web Component（`<mv-aurora-background>`）
状态	稳定版
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

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["aurora-background"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（含依赖）：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。

用法

标准标记，可在此基础上通过属性、data-* 和 CSS 变量进行定制：

<div style="display:flex;flex-wrap:wrap;min-width:0;min-height:320px">
  <section style="flex:1.6 1 20rem;min-height:320px;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="flex:1 1 14rem;min-height:240px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;box-shadow:-1px 0 0 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	类型	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.