FancyUI
Saved GitHub Get started
Backdrop — meteor shower — preview

Backdrop — meteor shower

FancyUI FANCYUI

A seeded meteor shower with depth, already under way on first paint.

#glow#playful#ambient

Open docs

Use in FancyUI

Type
Interaction
Interaction
Ambient
Style
Glow, Playful
Code availability
Open source

Why it works

Each meteor's delay, scale and speed come from a seeded generator, so the same seed draws the same shower on the server and in the browser. Farther meteors are smaller and slower, which gives a flat backdrop parallax depth; negative delays mean the shower is mid-flight on first paint.

When to use it

A hero or an empty state that needs atmosphere without imagery.

Things to watch

It renders bare spans: the parent must be `relative overflow-hidden`. Reduced motion freezes the meteors part-way along their paths. Check text contrast over the brightest streaks.

Implementation clues

  • seeded PRNG
  • per-meteor delay / scale
  • angle
  • depth → speed