Components / Motion / Meteors

Meteors beta

A night sky for a hero: meteors streak across a dark panel on their own schedules.

Preview

Ship it under a night sky

The launch page for a fictional star registry. The sky is the part; the words are yours.

<div class="k-met" data-meteors>
  <div class="k-met-in">
    <h3>Ship it under a night sky</h3>
    <p>The launch page for a fictional star registry. The sky is the part; the words are yours.</p>
  </div>
</div>
/* KATA Meteors — a seeded night sky. */
.k-met{position:relative;overflow:hidden;background:var(--k-zinc-950);color:var(--k-on-color);border-radius:14px;min-height:230px;font-family:var(--k-font)}
.k-met-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:230px;padding:28px 22px;gap:9px}
.k-met-in h3{font-size:21px;font-weight:650;letter-spacing:-.02em}
.k-met-in p{font-size:13px;line-height:1.75;color:var(--k-zinc-400);max-width:340px}
.k-meteor{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--k-on-color);box-shadow:0 0 10px 2px rgba(255,255,255,.3);animation-name:k-met-fall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:0;z-index:1}
.k-meteor::before{content:"";position:absolute;left:2px;top:50%;width:86px;height:2px;transform:translateY(-50%) rotate(-45deg);transform-origin:left center;background:linear-gradient(to right, rgba(255,255,255,.75), transparent);border-radius:2px}
@keyframes k-met-fall{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(-330px,330px,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.k-meteor{display:none}}

// KATA Meteors — seeds the sky: random starts, delays and speeds.
document.querySelectorAll('[data-meteors]').forEach(function (stage) {
  var N = 14;
  for (var i = 0; i < N; i++) {
    var m = document.createElement('span');
    m.className = 'k-meteor';
    m.setAttribute('aria-hidden', 'true');
    m.style.left = (25 + Math.random() * 85) + '%';
    m.style.top = (-8 + Math.random() * 45) + '%';
    m.style.animationDelay = (Math.random() * 9).toFixed(2) + 's';
    m.style.animationDuration = (3.2 + Math.random() * 3.6).toFixed(2) + 's';
    stage.appendChild(m);
  }
});

Installation

CLI

node kata-ui.mjs add meteors

Writes the part’s CSS and JS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs. The part has a script — include it after the markup; it initializes itself.

Usage

A background, not a foreground: the stage is a dark panel and the script seeds about fourteen meteors with random starts, delays and speeds, forever. Put one short line of type over it and stop — a sky with a paragraph on it is weather, not design.

Accessibility

Pure decoration: the meteors are aria-hidden and the words over them are ordinary text. Under prefers-reduced-motion the sky goes still and the meteors hide — the panel and the message remain.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-metclass
.k-met-inclass
.k-meteorclass
data-meteorsdata hook

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

blurrevealtextfocusentrance
Previous
Marquee