Pixel Preloader

Custom Pixel Preloader is a cinematic, canvas-based page transition for Framer that creates a smooth pixel-block cover → hold → reveal animation on every page load. Designed for performance and visual precision, it uses a canvas renderer to avoid seams, supports noise-based dithering, and adapts automatically to screen size, device pixel ratio, and motion preferences.

This component is ideal for designers and developers who want a premium loading experience without impacting layout or interactions. It runs as a fixed overlay, requires no page restructuring, and can optionally run only once per session for subtle branding moments.

Key Features

Animation & Patterns

• Pixel-block cover and reveal transition

• Centered, horizontal, or vertical animation patterns

• Four directional flows (top, bottom, left, right)

• Adjustable speed, delay, and intro hold timing

Visual Control

• Canvas rendering (no hairline gaps)

• Configurable block size and scaling modes

• Uniform, noise-based, or wave-based block sizing

• Optional dithering with intensity, density, and alpha control

• Seeded noise for deterministic visuals

Performance & UX

• High-performance canvas rendering

• Frame throttling for low-power devices

• Hardware-aware performance limits

• Respects prefers-reduced-motion automatically

• Optional “run once per session” behavior

Layout Safety

• Fixed overlay with zero layout shift

• Pointer-events disabled (never blocks interaction)

• Works across all pages when enabled globally

• Fully responsive and DPR-aware

Where to Use

• Website page preloaders

• Page-to-page transitions

• Portfolio and agency websites

• Creative studio landing pages

• Product launches and campaign sites

• Brand-focused experiences requiring polish

Best For

• Designers who want a premium loading experience

• Framer sites that need smooth visual transitions

• High-end branding, motion, and creative projects

• Performance-conscious websites that avoid heavy DOM animation