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/marvelousMarvelous 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.