beta

Meteors — `<mv-meteors>`

Diagonal meteor shower with glowing trails: 100% CSS animation; the JS only distributes the shooting stars and changes their lane on each pass.

Category	Backgrounds
Type	Web Component (`<mv-meteors>`)
Status	beta
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

Install

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

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["meteors"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/observe.js, components/meteors/meteors.css, components/meteors/meteors.js.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;align-items:center;min-height:320px;padding:1.5rem">
  <section style="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="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	Type	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: aria-hidden, pointer-events: none with data-fill. Reduced motion: meteors stay frozen mid-flight.