About Sakura Storm Preload

Sakura Storm Preloader is a Framer code component that displays a full-screen animated sakura transition while your website loads. It features a canvas-based petal simulation, a centered loading interface, and a cinematic fade-out with a wind-blown exit.

Choose from five loading animations, customize every detail from the Framer Property Panel, and decide whether the animation plays once or loops continuously.

Motion Paths

Every loading animation ends with the same cinematic wind-blown exit.

Vortex A classic swirling motion that pulls petals toward the center.

Whirlpool A tighter, more concentrated inward spiral.

Wavy Gentle floating petals with smooth sine-wave movement.

Toward the Screen Creates the illusion of petals rushing toward the viewer.

Scatter Petals burst outward from the center before fading away.

Customization

Everything can be customized 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

Sakura Storm Preloader is fully responsive.

The overlay stays fixed to the viewport and automatically resizes with the browser window, ensuring both the animation and loading interface remain perfectly centered across desktop, tablet, and mobile devices.