Sakura Petals — Add elegant seasonal motion to any page

Features

• Realistic sakura petal shapes with multiple variations

• 3-layer parallax depth (foreground, midground, background)

• Natural falling motion with sway, rotation, and speed variation

• Background petals have automatic blur for bokeh-like depth

• Lightweight, GPU-accelerated CSS animations

• Works as a full-screen overlay on any section

Customizable Props

Petal Count - Number of petals (default: 25)

Petal Color - Base color of the petals

Petal Size - Scale multiplier for petal size

Fall Speed - Speed of the falling animation

Wind Strength - Horizontal drift intensity

Depth Blur - Toggle blur on background layer petals

Opacity - Overall opacity of the effect

How to Use

1. Remix the project to get started

2. Home page: The standalone component — drag it into your own site

3. /demo page: A hero section demo showing the component in real-world usage

4. Set the component to Position: Absolute with all insets to 0

5. Set pointer-events to "none" so clicks pass through to content below

6. Adjust the 7 props to match your design

What's Included

• Cherry Blossom Effect component with 7 props

• Demo page: Full hero section showing the effect in action (not template)

Use Cases

• Spring / seasonal campaign landing pages

• Japanese travel, ryokan, and restaurant sites

• Wedding and event invitation pages

• Portfolio and creative agency hero sections

• Any site that needs an elegant animated accent