Elevate your Framer projects with a highly performant, accessible WebGL image transition gallery. Ditch simple crossfades and broken TV static. Our optimized component provides smooth, organically clumpy sand clusters, intelligent adaptive edge lighting, and bulletproof mobile performance, ensuring your gallery works flawlessly on all devices.
🌟 Key Features:
Intelligent Adaptive Edge Glow: Say goodbye to manual color picking. This advanced shader uses Adaptive Edge Sampling to read the exact pixels of the incoming image, causing the dissolving dust pieces to naturally glow with the colors of the next slide. Dial the glow intensity from a subtle blend to bright, burning embers.
Advanced Clumpy Noise WebGL Distortion: Fine-tune the physics of your transition. Control organic clumpy sand clusters or fine dust with fully adjustable properties for Noise Scale and Distortion Strength.
Marketplace-Ready Performance: Mobile DPR Cap & Optimizations: Mobile performance is bulletproof with a strict 2.0 DPR cap on 120Hz screens, a memory-efficient WebGL context (depth/stencil disabled), and fluid performance via ResizeObserver.
Complete SEO & A11y (Accessibility) Integration: Built-in hidden div with a standard <img> list for crawlers, ARIA roles, tabIndex, and full keyboard support (Enter, Space, Tabbing) make your site accessible to all users and strict search engine bots.
Native Framer Image 'Fill' & 'Fit' Sizing: Custom UV coordinate math perfectly replicates Framer's built-in object-fit: cover/contain sizing behavior, making your images look and feel completely native.
Precision Cycle Controls (Click, Hover, Auto Play): Dial-in Wait Time, Animation Duration, and an infinite gallery loop. Interact with click, hover (stay or reverse on mouseleave), or automatic playback with GPU acceleration.
📦 What you get:
A Framer Remix link containing the fully optimized, accessible, production-ready React component.
Lifetime updates if the Framer API changes.
Víctor Señoráns
