Starfield `<mv-starfield>`

천천히 회전하며 색을 띤 별들이 다가오는 캔버스 밤하늘입니다. 먼 별은 선명한 픽셀이고, 가까운 별은 반짝이는 빛으로 피어나며, 이따금 별 하나가 회절 스파이크와 함께 타오릅니다.

작동 방식

천천히 회전하며 색을 띤 별들이 다가오는 캔버스 밤하늘입니다. 먼 별은 선명한 픽셀이고, 가까운 별은 반짝이는 빛으로 피어나며, 이따금 별 하나가 회절 스파이크와 함께 타오릅니다. 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.