---
title: "Distorto Slider FX — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Lee Black · Carousels. A WebGL slider engineered for Framer"
canonical: "https://framer.elliotli.dev/component/distorto-slider-fx"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Distorto Slider FX

# Distorto Slider FX

A WebGL slider engineered for Framer

[View on Framer](https://framer.com/marketplace/components/distorto-slider-fx/?via=elliot-li)

![Distorto Slider FX preview image 1](https://framer.elliotli.dev/og/component/distorto-slider-fx/89ead4ac834001a4/1600x1200.jpg)

## 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #775

## Details

- **Author**: Lee Black
- **Price**: $10.00
- **Published**: 2026-05-14
- **Updated**: 2026-05-14
- **Added**: 2026-02-19
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view