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
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
Mikiko Niwa
