About Sakura Petals
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
Remix the project to get started
Home page: The standalone component — drag it into your own site
/demo page: A hero section demo showing the component in real-world usage
Set the component to Position: Absolute with all insets to 0
Set pointer-events to "none" so clicks pass through to content below
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