Meteors
A purely decorative ambient background of small diagonal "shooting star" streaks that repeatedly fall across a container, staggered so several are visible mid-flight at once.
Installation
npx dafink-ui add meteorsDemo
Falling meteors
Props
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | 10 | Number of meteor streaks rendered. |
| children | ReactNode | - | Optional content rendered above the meteors. |
| className | string | '' | Additional CSS classes. |
Accessibility
Meteors' streak layer is aria-hidden, so it's invisible to assistive technology and never intercepts focus or clicks; any optional children render above it and stay fully interactive. Reduced motion is handled with a dedicated CSS media query that sets the entire meteors layer to display: none (rather than just freezing it mid-flight), since a frozen streak doesn't read as an intentional static design. It has no keyboard interaction of its own.