---
title: "Sakura Petals — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Mikiko Niwa · Text. Add elegant seasonal motion to any page"
canonical: "https://framer.elliotli.dev/component/sakura-petals"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Sakura Petals

# Sakura Petals

Add elegant seasonal motion to any page

[View on Framer](https://framer.com/marketplace/components/sakura-petals/?via=elliot-li)

![Sakura Petals preview image 1](https://framer.elliotli.dev/og/component/sakura-petals/67e389c7946ff288/1600x1200.jpg)

## Summary

Add elegant seasonal motion to any page

## Description

**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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8450

## Details

- **Author**: Mikiko Niwa
- **Price**: $6.00
- **Published**: 2026-02-17
- **Updated**: 2026-02-19
- **Added**: 2026-02-13
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing