Sakura Storm Preloader
Sakura Storm Preloader is a Framer code component that displays a full-screen animated sakura transition while your site loads. It features a canvas-based petal simulation, a centered loading interface, and a cinematic fade-out with a wind-blown exit.
Choose from multiple loading animations, customize every visual detail from the Framer Property Panel, and decide whether the animation plays once or loops continuously.
Live Demo
https://sakura-loader.framer.media/
Motion Paths
All loading paths share the same cinematic wind-blown exit animation.
- Vortex — Classic swirling pull toward the center.
- Whirlpool — A tighter, more concentrated inward spiral.
- Wavy — Gentle floating petals with smooth sine-wave movement.
- Toward the Screen — Continuous forward motion creating a camera-rush effect.
- Scatter — Petals burst outward from the center before fading away.
Customization
Every setting can be adjusted directly from the Framer Property Panel.
Animation
- Motion path
- Petal count
- Animation speed
- Swirl duration
- Reveal timing
Appearance
- Custom petal image (or use the included Sakura asset)
- Petal trails
- Edge blur
- Color customization
Loader
- Multiple loader styles
- Loader size
- Animation speed
- Loading message
- Text color
- Text blip animation
Behavior
- Scroll lock
- Play once
- Loop animation
Responsive
The component is fully responsive.
The overlay remains fixed to the viewport and automatically resizes with the browser window, ensuring both the petals and loading interface stay perfectly centered across desktop, tablet, and mobile devices.
📦 How to Use This Component
Quick Setup
- Purchase the component.
- Copy the Success Link provided after checkout.
- Open your Framer project.
- Paste the Success Link into your project.
- The component will be imported automatically and is ready to use.
Refund Policy
Because this is a digital product, all sales are final. Refunds are generally unavailable once the files have been downloaded.
If you encounter a technical issue that prevents the component from working as described, please get in touch before requesting a refund. I'll do my best to troubleshoot the issue or provide a fix.
Support
Questions, bug reports, and feature suggestions are always welcome.
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.