Falling Petals: Free React + Tailwind Component

Seasonal falling background: sakura petal, maple leaf and snowflake presets, per-particle tumbling and sway with wind turbulence, adjustable density and wind, optionally accelerated by scroll.

The seasonal-limited member of the background family: a 2D canvas that rains sakura petals, maple leaves or snowflakes, each particle with its own sway phase, spin and tumbling flip, and a tunable wind (negative values blow left). Particle parameters come from a deterministic pseudo-random generator seeded by index, so the scatter is identical on every reload; the background is transparent by default and layers straight over your own backdrop — a good fit for cherry-blossom season, autumn foliage and winter campaign pages.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add falling-petals.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Petal stylevariant

Countcount

Windwind

0.6

Fall speedspeed

Size scalesize

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<FallingPetals/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/falling-petals.en.json

Or, once registries are configured in components.json, install it as @webberui/falling-petals.

Usage

import { FallingPetals } from "@/components/ui/falling-petals";

<FallingPetals
  variant="sakura"
  count={28}
  wind={0.6}
  className="flex h-[320px] items-center justify-center rounded-xl bg-slate-900"
>
  <h2 className="text-3xl font-bold text-white">Spring - Cherry Blossom Snow</h2>
</FallingPetals>

// Maple leaves blowing left, with scroll boost enabled
<FallingPetals variant="maple" wind={-1.2} scrollBoost className="h-[320px]" />

Props

Prop	Type	Default	Description
`variant`	`"sakura" \| "maple" \| "snow"`	`"sakura"`	Shape preset: sakura petal, maple leaf or snowflake
`count`	`number`	`28`	Number of particles alive at once
`wind`	`number`	`0.6`	Wind direction and strength (-2 to 2, negative blows left; values outside the range are clamped)
`speed`	`number`	`1`	Fall-speed multiplier
`size`	`number`	`1`	Particle size scale factor
`colors`	`string[]`	—	Overrides the preset palette (sakura pink-whites, maple orange-red-browns, snow white); particles cycle through it
`scrollBoost`	`boolean`	`false`	Temporarily speeds up the fall based on window scroll velocity, easing back once scrolling stops
`opacity`	`number`	`0.9`	Overall particle opacity
`children`	`ReactNode`	—	Foreground content layered above the particles
`className`	`string`	—	Forwarded to the outermost container

petalPresetColors(variant) (returns a copy of that variant's preset palette, handy as a starting point before passing colors) and the PetalVariant type are also named exports.

How it works

Particle positions and parameters come from a deterministic pseudo-random generator (mulberry32, seeded by particle index); Math.random is never called during render, so the first frame after SSR and every reload scatter identically
Every shape is a programmatic path — the sakura petal is a single closed bezier with a notched tip, the maple leaf a simplified five-lobe zigzag outline, the snowflake six short-branched strokes — with no image assets involved
The canvas renders at a device-pixel-ratio capped at 2, a ResizeObserver reseeds particles when the container resizes, and an IntersectionObserver pauses the animation loop while the component is scrolled off-screen
With scrollBoost on, the animation frame reads the scroll-position delta and converts it into a temporary speed boost (up to roughly 4x), decaying exponentially back to normal once scrolling stops
Particles falling past the bottom respawn from the top, and ones drifting off the sides wrap around, so the on-screen density stays constant

Accessibility

The canvas is aria-hidden and pointer-events-none — pure decoration that never interferes with interaction or screen readers; foreground content passed as children participates in the accessibility tree normally
When the user has "reduce motion" enabled at the system level, a single static frame of scattered petals is drawn and the animation loop never starts

Falling Petals