Distorto Slider FX

A professional-grade WebGL slider engineered for Framer creators who want motion, mood, and visual impact without sacrificing performance. Featuring over 30 handcrafted shader transitions, this component brings cinematic production value to image sequences from smooth fades and liquid distortions to particle-style dissolves and experimental refractive wipes.

Every detail is configurable: thumbnails, layout, timing, padding, UI, and transition modes. Fully responsive, GPU-accelerated, and optimised for Framer preview and live browser performance. Just drop it in, add your images, choose a transition, and your site instantly feels premium.

Perfect for photographers, designers, studios, product launches, brand campaigns, and anyone who wants their work to feel alive.FeaturesWebGL Transitions

• 30+ cinematic shader transitions (liquid, ripple, pixelate, wipe, swirl, dissolves, glass distort, prism wipe, iris shutter, and more)

• All transitions GPU-accelerated for smooth browser performance

• Zero-flash, zero-flicker frame handling via custom WebGL logic

Image & Layout Control

• Fully responsive canvas with object-fit cover logic

• Adjustable padding, border radius, and background

• Custom thumbnail system with 9 placement modes

• Optional vertical stack mode

Content Display

• Titles and statuses per slide

• Automatic layout for labels in all thumb modes

• Toggle text visibility in vertical layouts

• Fine control over typography

Thumbnail System

• Customizable size, spacing, radius, highlight, overlays, and animations

• Auto-progress overlay for autoplay mode

• Clean, minimal, accessible design

Playback & Interaction

• Manual navigation or full autoplay

• Customizable transition duration

• Smooth easing curves

• Transition selector UI already built in

Developer Quality

• Clean, commented code architecture

• Built for stability: safeguards for WebGL rebuilds & texture loading

• No external dependencies beyond Three.js

• Memory-safe texture handling

Perfect For

• Photography portfolios

• Cinematic hero sections

• Product reveals

• Fashion/editorial pages

• Studios, agencies, and personal sites

• Story-driven scroll experiences