Meteors `<mv-meteors>`

빛나는 꼬리를 가진 대각선 유성우입니다. 100% CSS 애니메이션이며, JS는 별똥별을 배치하고 지나갈 때마다 궤도만 바꿉니다.

카테고리	배경
유형	Web Component (`<mv-meteors>`)
상태	안정
Keywords	meteors, shooting-stars, night, card, hero, css

When to use

A card or small panel needs a night-sky accent with shooting stars behind its content
A dark hero wants diagonal motion from a CSS-only animation that stays cheap to run

Avoid when

Streaks should converge on a focal point or burst into sparks on impact → use Beams instead

설치

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

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["meteors"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/observe.js, components/meteors/meteors.css, components/meteors/meteors.js.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;min-width:0;min-height:320px;padding:1.5rem">
  <section style="flex:1.6 1 20rem;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;min-height:272px;border-radius:var(--mv-radius-xl)">
    <mv-meteors data-fill count="24"></mv-meteors>
    <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">Make a wish</p>
      <p style="margin:.6rem auto 1.2rem;max-width:28rem;color:var(--mv-fg-muted)">A shower of CSS shooting stars for your launch pages.</p>
      <a class="mv-button" href="#meteors">Join the waitlist</a>
    </div>
  </section>
  <mv-meteors count="12" angle="325" style="flex:1 1 14rem;box-sizing:border-box;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface);padding:1.5rem;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end">
    <strong style="font-size:1.1rem">Version 2.0 is here</strong>
    <span style="font-size:.9rem;color:var(--mv-fg-muted);margin-top:.25rem">A card with its own meteors, heading left (angle="325").</span>
  </mv-meteors>
</div>

API

Attributes

Name	유형	Default	Description
`count`	number	`20`	Number of meteors (max 120).
`angle`	number	`215`	Angle in degrees (215 = down and to the right, 325 = down and to the left).
`speed`	number	`1`	Speed multiplier.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Content structure

Name	Description
`children`	Without data-fill, content placed inside the element sits on top (ideal for a card).

CSS classes

Name	Description
`mv-meteor`	A single meteor (generated).

CSS variables

Name	Default	Description
`--mv-meteors-color`	`gray 500 / gray 200`	Head and trail color.
`--mv-meteors-tail`	`5rem`	Average trail length.
`--mv-meteors-size`	`2px`	Head size.

Accessibility

Decorative: every meteor span is aria-hidden and ignores the pointer, while content placed inside the element (a card) stays readable by assistive tech; with data-fill the whole layer ignores the pointer. Pure CSS animation, one animationiteration listener per meteor, all removed on disconnect. Reduced motion (OS or [data-motion="reduce"]): meteors stay frozen mid-flight. Forced colors and print hide them.