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.

WeatherFx

<Media
  src="/image.jpg"
  alt="Preview"
/>
<WeatherFx
  fill
  position="absolute"
  top="0"
  left="0"
  angle={-30}
  speed={2}
  colors={["static-white"]}
  type="rain"
  intensity={75}
/>

Weather Types

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

Types

Rain

Snow

Leaves

Lightning

<WeatherFx
  height={20}
  type="rain"
  colors={["brand-solid-medium"]}
  intensity={60}
/>

<WeatherFx
  height={20}
  type="snow"
  colors={["neutral-solid-weak"]}
  intensity={60}
/>

<WeatherFx
  height={20}
  type="leaves"
  colors={["warning-solid-strong", "danger-solid-strong"]}
  intensity={40}
  speed={0.7}
/>

<WeatherFx
  height={20}
  type="lightning"
  colors={["brand-solid-strong"]}
  intensity={20}
/>

Intensity

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

Intensity

Light

Medium

Heavy

<WeatherFx
  height={16}
  type="rain"
  intensity={30}
  colors={["brand-solid-medium"]}
/>

<WeatherFx
  height={16}
  type="rain"
  intensity={75}
  colors={["brand-solid-medium"]}
/>

<WeatherFx
  height={16}
  type="rain"
  intensity={150}
  colors={["brand-solid-medium"]}
/>

Speed

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

Speed

Slow

Fast

<WeatherFx
  height={16}
  type="rain"
  speed={0.5}
  colors={["brand-solid-medium"]}
/>

<WeatherFx
  height={16}
  type="rain"
  speed={1.5}
  colors={["brand-solid-medium"]}
/>

Angle

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

Angle

Left -15°

Straight 0°

Right 15°

<WeatherFx
  height={16}
  type="rain"
  angle={-15}
  colors={["brand-solid-medium"]}
/>

<WeatherFx
  height={16}
  type="rain"
  angle={0}
  colors={["brand-solid-medium"]}
/>

<WeatherFx
  height={16}
  type="rain"
  angle={15}
  colors={["brand-solid-medium"]}
/>

Colors

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

Colors

<WeatherFx
  height={24}
  type="rain"
  colors={[
    "success-solid-strong",
    "warning-solid-strong",
  ]}
  intensity={100}
/>

With Content

Overlay content on top of the weather effect.

With Content

Rainy Day

Animated weather effects with native Canvas 2D

<WeatherFx
  height={24}
  type="rain"
  colors={["neutral-solid-weak"]}
  intensity={100}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-xl">
      Rainy Day
    </Heading>
    <Text variant="body-default-l">
      Animated weather effects
    </Text>
  </Column>
</WeatherFx>

Background Effect

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

Background Effect

Weather Effect

<Row
  fill
  center
  padding="24"
  border="neutral-alpha-weak"
  radius="l"
  overflow="hidden"
>
  <WeatherFx
    position="absolute"
    top="0"
    left="0"
    type="rain"
    colors={["brand-solid-weak"]}
    intensity={80}
    speed={1.2}
  />
  <Background
    fill
    position="absolute"
    left="0"
    top="0"
    x="0"
    y="0"
    gradient={{
      display: true,
      colorStart: "neutral-background-weak",
    }}
    pointerEvents="none"
  />
  <Column align="center" horizontal="center" pointerEvents="none">
    <Logo dark icon="/trademarks/icon-dark.svg" />
    <Logo light icon="/trademarks/icon-light.svg" />
  </Column>
</Row>

Snow Effect

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

Snow Effect

Winter Wonderland

Snowflakes with depth and floating motion

<WeatherFx
  height={24}
  type="snow"
  data-solid="contrast"
  colors={["brand-solid-strong", "neutral-solid-weak"]}
  intensity={100}
  speed={0.8}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-l">
      Winter Wonderland
    </Heading>
    <Text variant="body-default-l">
      Snowflakes with depth and motion
    </Text>
  </Column>
</WeatherFx>

Leaves Effect

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

Leaves Effect

9°C

Saturday, 11:30 AMPrecipitation: 0%
Humidity: 72%
Wind: 8 km/h

<WeatherFx
  height={24}
  type="leaves"
  colors={["warning-solid-strong", "danger-solid-strong", "success-solid-medium"]}
  intensity={50}
  speed={0.6}
  angle={5}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-xl">
      Autumn Breeze
    </Heading>
    <Text variant="body-default-l">
      Rotating leaves with gradients
    </Text>
  </Column>
</WeatherFx>

Lightning Effect

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.

Lightning Effect

Thunderstorm

Dynamic lightning with branching bolts

<WeatherFx
  height={24}
  type="lightning"
  data-solid="contrast"
  colors={["warning-solid-strong"]}
  intensity={15}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-l">
      Thunderstorm
    </Heading>
    <Text variant="body-default-l">
      Dynamic lightning with branching bolts
    </Text>
  </Column>
</WeatherFx>

Lightning Intensity

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.

Lightning Intensity

Rare (5)

Frequent (20)

Storm (50)

<WeatherFx
  height={16}
  type="lightning"
  intensity={5}
  colors={["brand-solid-strong"]}
/>

<WeatherFx
  height={16}
  type="lightning"
  intensity={20}
  colors={["brand-solid-strong"]}
/>

<WeatherFx
  height={16}
  type="lightning"
  intensity={50}
  colors={["brand-solid-strong"]}
/>

Duration

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.

Duration

3 Second Burst

Snow stops emitting after 3 seconds

<WeatherFx
  height={24}
  type="snow"
  colors={["brand-solid-medium"]}
  intensity={80}
  duration={3}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-l">
      3 Second Burst
    </Heading>
  </Column>
</WeatherFx>

Trigger

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

Hover Trigger

Hover for leaves!

Hover for rain!

<WeatherFx
  height={16}
  type="leaves"
  trigger="hover"
  colors={["warning-solid-strong", "danger-solid-strong"]}
  intensity={40}
/>

<WeatherFx
  height={16}
  type="rain"
  trigger="hover"
  colors={["brand-solid-medium"]}
  intensity={60}
/>

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

Click Trigger

Click to toggle rain

<WeatherFx
  height={16}
  type="rain"
  trigger="click"
  colors={["brand-solid-medium"]}
  intensity={60}
/>

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

Manual Trigger

"use client";

import React from "react";
import { WeatherFx, Row, ToggleButton } from "@once-ui-system/core";

export function Demo() {
  const [on, setOn] = React.useState(false);

  return (
    <Row gap="8" fillWidth>
      <ToggleButton onClick={() => setOn((v) => !v)}>
        {on ? "Stop" : "Start"}
      </ToggleButton>
      <WeatherFx height={16} type="snow" trigger="manual" active={on} intensity={60} />
    </Row>
  );
}

Performance

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.

API reference

Prop	Type	Default
type Which weather to render.	rainsnowleaveslightning	rain
speed Fall multiplier. Not a duration.	number	1
colors Palette for the drops or flakes.	string[]	["brand-solid-medium"]
intensity How much of it there is.	number	50
angle Fall angle, in degrees.	number	0
duration Stop after this long, in milliseconds. Runs indefinitely if unset.	number	—
trigger What starts it. "manual" hands control to active.	mounthoverclickmanual	mount
active Run it, when trigger is "manual".	boolean	false
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	auto
children	React.ReactNode	—
…and every FlexProps prop	inherited	—