The WeatherFx component creates animated weather effects using the native Canvas 2D API. It supports rain, snow, falling leaves, and lightning with customizable colors, speed, and intensity. Perfect for backgrounds, hero sections, or thematic content areas.

Switch between different weather effects: rain, snow, falling leaves, and lightning.

Control the number of particles with the intensity prop. Higher values create denser effects.

Control the fall speed with the speed prop. Higher values make particles fall faster.

Control the direction with the angle prop to simulate wind. Positive values angle to the right, negative to the left.

Use multiple colors for variety. Supports CSS variables and any valid color format.

Overlay content on top of the weather effect.

Use as a full-screen background effect with absolute positioning.

Snow features realistic physics with depth-based sizing, opacity, and organic floating motion.

Leaves feature gradient colors, rotation animation, and tumbling motion for an autumn feel.

Lightning features highly realistic bolt generation with chaotic, organic branching at all angles. Each bolt creates dense networks of branches spreading in multiple directions with up to 4 levels of hierarchy. The effect uses small, erratic segments and high branching probability to create the natural, fractal-like appearance of real lightning. Bolts animate from top to bottom with progressively thinner branches. The intensity prop controls both the frequency and number of simultaneous strikes.

For lightning, the intensity prop controls strike frequency and bolt patterns. The effect alternates between single and multi-bolt strikes for natural variation. Low intensity (1-15) creates single, rare strikes. Medium intensity (16-30) occasionally spawns double bolts. High intensity (31-60) alternates between single and 2-3 bolt strikes. Very high intensity (61+) creates dramatic storms alternating between single and 2-4 simultaneous bolts.

Control how long particles are emitted with the duration prop (in seconds). After the duration, existing particles finish their animation but no new ones spawn.

Use trigger="hover" to only emit particles when hovering over the element.

Use trigger="click" to toggle emission on click.

Use trigger="manual" with the active prop to control emission from parent state.

WeatherFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the animation is completely disabled (no particles are rendered). You can override this with the reducedMotion prop.

See useReducedMotion for details.