Dual-Mode Utility: Works as an interactive homepage preloader with smooth session controls, or as a seamless page transition tool.
Smart Session Lock: Displays the animation once per session to maintain high retention and avoid repetitive loading screens for returning visitors.
Dynamic Counter & Easing: Precise percentage progress indicator synced with a custom Slow-Warp timeline and cubic-bezier curves for a natural, cinematic flow.
Bulletproof Scroll Locking: Keeps the layout intact with no sudden jumps, completely locking user scroll interaction until the reveal animation finishes.
4-Way Directional Motion: Choose from four fluid exit directions (Top, Bottom, Left, Right) to match your site layout.
Performance First: Lightweight, frame-budget conscious React implementation using Framer Motion with automatic SSR/canvas optimization.
Framework Support: Built natively for Framer using React and TypeScript.
Animation Engine: Powered by Framer Motion (useMotionValue, useTransform, animate) for 60fps performance.
Scroll Lock Strategy: Event-level interaction trap paired with scrollbar-gutter: stable to ensure zero layout shift.
Customization Controls: Complete control over Base/Load colors, start delay, reveal time, exit duration, slow steps, counter typography, and alignment.
Easing Profiles: Built-in Cinematic, Expo, and fully customizable Bezier curves (cubic-bezier).
Canvas & SSR Ready: Features a dedicated Canvas preview mode and static rendering safety to protect site SEO.
Dual-Mode Utility: Works as an interactive homepage preloader with smooth session controls, or as a seamless page transition tool.
Smart Session Lock: Displays the animation once per session to maintain high retention and avoid repetitive loading screens for returning visitors.
Dynamic Counter & Easing: Precise percentage progress indicator synced with a custom Slow-Warp timeline and cubic-bezier curves for a natural, cinematic flow.
Bulletproof Scroll Locking: Keeps the layout intact with no sudden jumps, completely locking user scroll interaction until the reveal animation finishes.
4-Way Directional Motion: Choose from four fluid exit directions (Top, Bottom, Left, Right) to match your site layout.
Performance First: Lightweight, frame-budget conscious React implementation using Framer Motion with automatic SSR/canvas optimization.
Framework Support: Built natively for Framer using React and TypeScript.
Animation Engine: Powered by Framer Motion (useMotionValue, useTransform, animate) for 60fps performance.
Scroll Lock Strategy: Event-level interaction trap paired with scrollbar-gutter: stable to ensure zero layout shift.
Customization Controls: Complete control over Base/Load colors, start delay, reveal time, exit duration, slow steps, counter typography, and alignment.
Easing Profiles: Built-in Cinematic, Expo, and fully customizable Bezier curves (cubic-bezier).
Canvas & SSR Ready: Features a dedicated Canvas preview mode and static rendering safety to protect site SEO.
Igor Reif
