Smart Preloader

SmartPreloader is a lightweight, customizable Framer component that seamlessly handles page load animations and smooth exit transitions.

FEATURES

1. Dual-Mode Utility: Works as an interactive homepage preloader with smooth session controls, or as a seamless page transition tool.

2. Smart Session Lock: Displays the animation once per session to maintain high retention and avoid repetitive loading screens for returning visitors.

3. Dynamic Counter & Easing: Precise percentage progress indicator synced with a custom Slow-Warp timeline and cubic-bezier curves for a natural, cinematic flow.

4. Bulletproof Scroll Locking: Keeps the layout intact with no sudden jumps, completely locking user scroll interaction until the reveal animation finishes.

5. 4-Way Directional Motion: Choose from four fluid exit directions (Top, Bottom, Left, Right) to match your site layout.

6. Performance First: Lightweight, frame-budget conscious React implementation using Framer Motion with automatic SSR/canvas optimization.

TECHNICAL DETAILS

• 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.