Starfield `<mv-starfield>`

Fonctionnement

Ciel en canvas d’étoiles teintées qui volent vers vous en tournant lentement : les étoiles lointaines sont des pixels nets, les proches s’ouvrent en éclats scintillants, et de temps en temps une étoile s’embrase avec des aigrettes de diffraction. Avec warp, le survol passe à la vitesse de la lumière : des traînées bleues à l’avant, rouges à l’arrière, guidées par le pointeur.

Catégorie	Arrière-plans
Type	Web Component (`<mv-starfield>`)
Statut	stable
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

Installation

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

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

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

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables 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	Type	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.