Blur Cascade creates a staggered reveal where elements enter from below, blurred and offset, sharpening and settling into place.
Blur Cascade creates a staggered reveal where elements enter from below, blurred and offset, sharpening and settling into place. The blur adds a layer of depth that a plain fade-up can't deliver.
Configurable easing means the same animation can feel sharp and editorial with expo.out, or bouncy and alive with elastic.out. The stagger controls how sequential or simultaneous the reveal feels — subtle differences that change the whole personality.
Animates opacity, transform (translateY), and CSS filter (blur) in a single GSAP tween. clearProps: 'filter' removes the GPU compositing layer once the animation completes, keeping memory footprint clean.
The mobile build uses Reanimated's withTiming and Easing to match the blur-cascade feel on-device at 60–120fps. The blur is approximated via opacity and shadow since React Native doesn't support CSS filter on all targets.
Content feeds and list reveals
Each row staggered in — makes a page feel alive on load.Marketing and landing pages
Editorial entrances for feature sections and hero content.Dashboard panels
Data loads with purpose, not a flash of unstyled content.Mobile app screens
Smooth, easing-aware reveal that adapts to any screen size.