Starfield `<mv-starfield>`

ゆっくり回転しながら、色づいた星がこちらへ飛んでくる canvas の夜空：遠くの星はくっきりしたピクセル、近くの星はまたたくきらめきへと開き、ときおり星が回折スパイクを伴って輝きます。

仕組み

ゆっくり回転しながら、色づいた星がこちらへ飛んでくる canvas の夜空：遠くの星はくっきりしたピクセル、近くの星はまたたくきらめきへと開き、ときおり星が回折スパイクを伴って輝きます。warp を使うと、ホバーで光速にジャンプします。先頭は青、尾は赤の光の筋が、ポインターに導かれて流れます。

カテゴリー	背景
タイプ	Web Component（`<mv-starfield>`）
ステータス	安定版
Keywords	safe-rewrite, stars, space, flare, hyperspeed, warp, hero, canvas

When to use

A space, sci-fi or launch page needs stars with real depth that fly toward the viewer
Hovering the hero should trigger a hyperspace jump that the visitor can steer with the pointer
A night-sky section wants a calm, living backdrop with an occasional bright flare, without WebGL

Avoid when

Only a small card needs diagonal shooting stars → use Meteors instead
A still starry texture is enough and nothing should move → use Backdrop instead

インストール

node scripts/add.mjs starfield --out ./src/marvelous

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["starfield"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/i18n.js, core/motion.js, components/starfield/starfield.js, components/starfield/starfield.css。

使い方

基本となるマークアップです。ここから属性、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">
    <mv-starfield data-fill warp></mv-starfield>
    <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">Your next launch starts here</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Hover the sky to jump to light speed. Move the pointer to steer.</p>
      <a class="mv-button" href="#starfield">Book a demo</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;color:oklch(0.97 0 0)">
    <mv-starfield data-fill data-sky flares="1.4" density="1.4"></mv-starfield>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">Deep sky</strong>
      <span style="font-size:.85rem;color:oklch(0.97 0 0 / .78)">data-sky, a flare every 1.4 s</span>
    </div>
  </section>
</div>

API

Attributes

Name	タイプ	Default	Description
`count`	number		Number of stars (otherwise proportional to the area, max 1000).
`density`	number	`1`	Multiplies the automatic count.
`flares`	number	`4`	Average interval between two star flares (s); 0 to disable. The first starfield's shooting attribute is read as an alias.
`warp`	boolean		Hovering the area (the parent with data-fill) jumps to light speed; the vanishing point leans toward the pointer.
`speed`	number	`1`	Flight and roll speed (0 freezes the sky).
`color`	CSS color	`var(--mv-starfield-color)`	Neutral star color (tokens accepted, follows the theme).
`flare-color`	CSS color	`var(--mv-starfield-flare)`	Flare color; shooting-color is read as an alias.
`data-sky`	boolean		Adds a deep dusk background with a faint haze band (identical in both themes).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0) and ignores the pointer itself.

Content structure

Name	Description
`children`	Without data-fill, content placed inside the element sits above the stars.

CSS variables

Name	Default	Description
`--mv-starfield-color`	`fg 62% (light) / near white (dark)`	Neutral stars, about half of the sky.
`--mv-starfield-cool`	`accent hue`	Cool stars, and the head of the warp streaks.
`--mv-starfield-warm`	`amber`	Warm stars, and the tail of the warp streaks.
`--mv-starfield-flare`	`accent hue, bright`	Flare halo, spikes and ring.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events, and content placed inside stays readable by assistive tech; with data-fill the whole element ignores the pointer. The warp is a hover flourish only and carries no information. The loop stops off screen and in hidden tabs. Reduced motion (OS or [data-motion="reduce"]): one still sky with a flare frozen near its peak, no warp. Forced colors and print hide the canvas and the data-sky background.