Omni Curve Preloader

A high-fidelity preloader utilizing a unified SVG masking engine to execute fluid, cinematic reveals. Engineered to transition seamlessly from a precise loading slit into a continuous, omnidirectional curve wipe.

Features

• Customizable solid overlay for establishing the initial baseline brand canvas.

• Adjustable slit thickness for fine-tuning the visual weight of the initial loading state.

• Multi-axis motion routing (Horizontal, Vertical, Diagonal) for aligning the reveal with specific layout geometry.

• Dynamic origin points (Edge or Center) for dictating the spatial direction and focal point of the wipe.

• Staggered multi-layer echo trails for adding visual momentum and spatial depth to the transition.

• Independent trail color assignments for integrating complex brand palettes directly into the motion path.

• Dedicated loading transition controls for dictating the speed, easing, and rhythm of the initial line entrance.

• Independent curve transition controls for pacing the final dimensional reveal sequence.

• Unified SVG path architecture for eliminating sub-pixel rendering artifacts and overlapping edge bleeds.

• Dynamic bounding box tracking for maintaining exact mathematical thickness proportions across varying viewport sizes.

• Continuous keyframe interpolation for ensuring zero momentum loss during center-origin expansions.

• Automated pointer-event routing for preventing accidental user interactions during the active loading phase.

• Canvas-aware static rendering for maintaining clean visibility and stability while editing within Framer.

How to Use

• Drag and drop the component onto your Framer canvas.

• Set Position to Fixed and resize it to fit your layout.

• Set Pointer Events to None under the Styles panel.

• Customize the motion and styling properties to match your design.

• Publish your project to view the component live.

Transform the standard page load into a composed visual sequence.