proNew224 lines · framer-motion

Meteors

Something is always streaking past. A full-width section backed by a canvas meteor shower: thin fading streaks fall diagonally at staggered delays and respawn once off-screen, under a short glass-card headline.

Use it for: An eye-catching section break for a launch, changelog or announcement page that wants a bit of spectacle without a video asset.
Themes: Light + dark
License: Commercial use

Live

Night sky

Something is always streaking past

Thin meteors fall and fade, then are born again.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width section backed by a canvas meteor shower: thin streaks fall diagonally
 * with fading tails, respawning at random positions above the fold. A glass card
 * holds a short headline on top.
 */

export interface BgMeteorsProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each meteor is a short line with a linear-gradient tail fading to transparent, moving diagonally down-right; a bright dot marks its head.
→Meteors start with a random delay so the shower never looks synchronized, and respawn above the fold once they leave the canvas.
→count sets how many meteors are active; speed scales fall speed; accent picks the streak colour token, re-read from CSS variables on theme change.
→Pauses when the section scrolls offscreen or the tab is hidden; prefers-reduced-motion renders the current frame once and stops.

Accessibility

✓Canvas is aria-hidden; only the heading and copy are in the accessibility tree.
✓Headline sits on a translucent blurred card for contrast against the streaks in both themes.
✓Honours prefers-reduced-motion.