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.
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
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
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
Frame Craft
