Distort Switch
A smooth, interactive image transition component featuring Distort, Ripple, Wave, and Zoom effects — ideal for elevating visuals in portfolios and hero sections.
Made with Workshop
Build your own component with AI
About this Component
Distort Switch is an advanced WebGL-powered image transition component that brings your visuals to life through motion and fluid distortion. Designed for Framer creators, it offers four stunning effects — Distort, Ripple, Wave, and Zoom — each crafted to deliver unique depth and movement.
Distort: Creates fluid, abstract morphing transitions — perfect for futuristic, creative sites.
Ripple: Adds a natural water ripple effect for organic, calming transitions.
Wave: Introduces flowing, directional motion that feels cinematic and smooth.
Zoom: Produces a sleek in-and-out depth animation for dynamic focus shifts.
Each effect is fine-tuned with full control over transition duration, distortion intensity, and lerp strength, allowing smooth or snappy animations that fit your brand’s tone.
This component is perfect for:
Portfolios to make image showcases stand out with elegant transitions.
Landing pages to give hero sections a visually captivating first impression.
Product galleries for adding motion-based storytelling to visuals.
By integrating DistortSwitch, your project instantly gains a polished, motion-rich aesthetic — making your work look more immersive, modern, and distinctly premium.
