---
title: "Distortion Slider — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Imesh Dilshan · Carousels. The Distortion Slider is a premium WebGL slider for Framer — a fully customizable, performance-optimized component built on custom…"
canonical: "https://framer.elliotli.dev/component/distortion-slider"
---

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

# Distortion Slider

Premium WebGL Distortion Slider

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

![Distortion Slider preview image 1](https://framer.elliotli.dev/og/component/distortion-slider/fb84dcb328e55f3b/1600x1200.jpg)

## Summary

The Distortion Slider is a premium WebGL slider for Framer — a fully customizable, performance-optimized component built on custom Three.js shaders.

## Description

**Transform static galleries into immersive, award-winning experiences.** Distortion Slider is a premium WebGL image and video slider for Framer, built with custom Three.js shaders for real-time 3D bend, warp, and distortion effects. Made for standout portfolios, creative agencies, design studios, photographers, and premium digital products, it turns ordinary media into an interactive experience. With a refined aesthetic, this Framer component combines smooth 60fps animation, responsive interactions, and precision-tuned easing across desktop, tablet, and mobile. **Key Features**

-   **Dual WebGL Shader Modes:** Choose "Cylinder" for a sleek horizontal paper-roll bend with crisp edges, or "Bubble" for a dynamic 4-pin center bulge — two visual styles.
    
-   **Cinematic Reveal Animation:** A precisely sequenced, fully customizable fade-and-unbend entrance creates a polished first impression on every load.
    
-   **Smart Media Engine:** Supports images and looping video with built-in hysteresis that automatically pauses and resumes clips by active slide, reducing memory and CPU usage.
    
-   **Fluid Interaction Design:** Touch, drag, and scroll controls combine with elastic rubber-band snapping for satisfying navigation.
    
-   **Interactive Numeric Timeline:** A scroll-synced timeline provides quick-jump navigation with smooth transitions.
    
-   **Total Design Control:** Adjust curve depth, bend frequency, slide dimensions, typography, spacing, and timeline styling directly from Framer's native property panel.
    
-   **Built for Production:** Clean React and TypeScript code uses `ResizeObserver` for accurate WebGL canvas scaling and reliable performance at any screen size.
    

🚀 **Who Is Distortion Slider For?**

-   Creative Agencies & Design Studios
    
-   Freelance Designers & Photographers
    
-   Framer Designers & No-Code Creators
    
-   SaaS, E-commerce & Premium Brands
    

Make your portfolio or website impossible to ignore with a high-end WebGL gallery experience. Add Distortion Slider to your Framer project today for every project.

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

-   All · #2674

## Details

- **Author**: Imesh Dilshan
- **Price**: $14.00
- **Published**: 2026-05-28
- **Updated**: 2026-08-31
- **Added**: 2026-05-12
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow