Skip to content

component

Distorto Slider FX

By Lee Black

Details

Summary

A WebGL slider engineered for Framer

Description

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. Features WebGL 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

Introduction

A WebGL slider engineered for Framer

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100113868/148/228/309/79/15
  • All · #314