webdevpuneet.com

Related Snippets

147 in Cards category
1–6 of 60

WOW.js Staggered Testimonial Wall

WOW.js Scroll Reveal Cards

Popmotion Swipe-Dismiss Stack

Popmotion Drag Inertia Card

AutoAnimate Filter Grid

CountUp.js Stat Cards

Meteor Card — Free HTML CSS JS Shooting Star Snippet

Meteor Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsIntersectionObserverCSS Animation

Copy & paste

Source Code

<div class="mc-stage">
  <article class="mc-card" id="mcCard">
    <div class="mc-meteors" id="mcMeteors" aria-hidden="true"></div>
    <div class="mc-body">
      <div class="mc-icon">✦</div>
      <h3>Cosmic plan</h3>
      <p>Unlimited projects, priority support, and a sky full of shooting stars streaking across the card.</p>
      <button type="button" class="mc-btn">Launch</button>
    </div>
  </article>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Dot-plus-tail meteors
A head and a gradient ::before trail, no images.
Diagonal fall keyframe
Meteors travel and fade across the card.
Randomized timing
Per-meteor start, delay, and duration.
Clipped to the card
overflow hidden frames the streaks.
Off-screen pause
IntersectionObserver stops the shower when hidden.
Content stays readable
Meteors sit behind the body layer.
Cosmic styling
Radial background and indigo glow shadow.
Tunable density
One COUNT constant controls the shower.

About this UI Snippet

Meteor Card — Shooting Stars Streaking Across a Card

Screenshot of the Meteor Card snippet rendered live

The meteor card is the atmospheric effect where thin shooting stars streak diagonally across a dark card, each with a glowing trailing tail — turning a plain pricing or feature card into a tiny night sky. This snippet builds it with plain HTML, CSS, and a small vanilla JavaScript generator, with randomized timing so the shower looks natural and an IntersectionObserver to pause it when off-screen.

A meteor is a dot with a tail

Each meteor is a tiny 2px dot, and its glowing trail is a ::before pseudo-element: a 60px-wide horizontal gradient that fades from light indigo to transparent, attached to the dot's trailing side. The whole thing is rotated -45° so it travels and points diagonally. This two-part construction — a head plus a gradient tail — is what reads as a shooting star rather than a moving dot, and it's pure CSS with no images.

The falling animation

The mcFall keyframe translates each meteor from the top toward the bottom-left by translate(-340px, 340px) while keeping the -45° rotation, and fades it out near the end of its travel. Because the card has overflow: hidden, meteors are clipped to the card's rounded bounds, so they appear and disappear at the edges like real streaks crossing a window. The animation is linear infinite, so each meteor loops forever.

Randomization is the whole trick

If every meteor shared the same start position, delay, and speed, you'd see an obvious grid of synchronized lines. The JavaScript generates 14 meteors, each with a random horizontal start (some beginning beyond the right edge), a random animation-delay up to 6 seconds, and a random animation-duration between 3 and 7 seconds. Those three randomized values mean meteors enter at different times, places, and speeds, so the shower looks scattered and organic — the single most important detail for selling the effect.

Pausing off-screen

A continuously animating shower wastes CPU and battery when nobody's looking at it, so an IntersectionObserver watches the card and toggles each meteor's animationPlayState between running and paused as the card enters and leaves the viewport. With threshold: 0 it switches the moment any part of the card is visible. This is a lightweight, scroll-listener-free way to keep decorative animations efficient.

Layering over content

The meteors live in an absolutely positioned layer behind the card body (which sits at a higher z-index), so the streaks pass behind the icon, heading, and button without obscuring them. The card's radial-gradient background and indigo glow shadow complete the cosmic look, and the content remains fully readable.

Customizing it

Change COUNT for a denser or sparser shower, widen the random duration range for more speed variety, lengthen the tail by editing the ::before width, or recolor the trail gradient to match your theme. Adjust the travel distance in mcFall if you resize the card. Pair it with a pin card or a focus cards grid for a striking set of cards, or use it as a premium pricing card tier.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA dark card renders with meteors streaking diagonally across it.
  2. 2
    Watch the showerThin shooting stars cross the card at scattered times and speeds.
  3. 3
    Note the clippingMeteors appear and vanish at the card's rounded edges.
  4. 4
    Scroll it off-screenThe shower pauses automatically to save cycles.
  5. 5
    Change the densityEdit COUNT for more or fewer meteors.
  6. 6
    Recolor the trailsAdjust the tail gradient and length to your theme.

Real-world uses

Common Use Cases

Premium pricing tiers
Give a pricing card a flashy upgrade, with thin shooting stars streaking diagonally across a dark card on randomised timings.
Feature highlights
Pair with a pin card in a feature grid, building each meteor from a head and a gradient ::before tail with no images.
Launch announcements
Set a cosmic mood near a lamp header, with overflow: hidden framing the streaks inside the card.
Reward screens
Echo the sky behind a confetti button, so a completed task feels celebratory as meteors pass behind the message.
Space-themed sites
Combine with a starfield background, and study per-meteor start, delay and duration as a reference for randomised effects.
Related: Virtual Tour Badge
See the Virtual Tour Badge for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each meteor is a tiny 2px dot with a ::before pseudo-element that is a 60px horizontal gradient fading to transparent — the glowing tail. The whole element is rotated -45 degrees so it travels and points diagonally. The head-plus-tail construction is what makes it read as a shooting star, and it's entirely CSS with no image assets.

The JavaScript gives each of the 14 meteors a random horizontal start, a random animation-delay up to 6 seconds, and a random duration between 3 and 7 seconds. Because they enter at different times, positions, and speeds, the shower looks scattered and organic rather than a grid of identical lines firing together.

An IntersectionObserver with threshold 0 watches the card and toggles each meteor's animationPlayState between running and paused as the card enters or leaves the viewport. That stops the continuous animation work whenever the card isn't visible, without needing a scroll listener.

The meteors live in an absolutely positioned layer, and the card body sits above them at a higher z-index. So the streaks pass behind the icon, heading, and button. The card's overflow: hidden also clips them to its rounded bounds so they enter and exit cleanly at the edges.

Generate the meteor elements from an array in render, applying the random left, delay, and duration as inline styles computed once. Keep the IntersectionObserver in a mount effect with cleanup on unmount, using a ref to the card. The CSS keyframe and tail port directly; in Tailwind, define mcFall in the config and render the meteors with arbitrary inline animation styles.