---
title: "DistortionSlider — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Talha Manzoor · Carousels. Distortion-wave canvas slider"
canonical: "https://framer.elliotli.dev/component/distortionslider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/DistortionSlider

# DistortionSlider

Distortion-wave canvas slider

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

![DistortionSlider preview image 1](https://framer.elliotli.dev/og/component/distortionslider/07e449b130f5fb28/1600x1200.jpg)

## Summary

Distortion-wave canvas slider

## Description

An infinite vertical image slider rendered entirely on canvas, with a signature wave-distortion effect that reacts to scroll velocity and direction. Slides loop seamlessly, scale toward center, and ripple apart in real time as you scroll, drag, or swipe — no lag, no jank.

Click any centered slide to open a full-screen view with a particle dispersion animation: the image shatters into fragments that fly outward on open and reassemble smoothly on close.

**Best for:**

-   Portfolio and photography sites needing a bold, motion-driven hero or gallery section
    
-   Fashion, editorial, or agency landing pages wanting a tactile, physical feel to image browsing
    
-   Any full-bleed section where scroll-reactive visuals should carry the page's personality
    

**How to use:**

1.  Drop the component into a full-screen or fixed-height frame
    
2.  Add your slides in the Slides array — each with a title and image
    
3.  Choose a background type (solid, linear, radial, conic) and style the title/count overlay
    
4.  Tune Distortion, Wheel/Drag/Touch Speed, and Center/Edge Scale to dial in the feel you want
    
5.  Adjust Min/Max Height and Seed to change the randomized slide rhythm
    
6.  Set Particles to control the density of the click-to-expand dispersion effect
    

**Refund Policy:** All sales are final — no refunds are offered on this component.

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

-   All · #8685

## Details

- **Author**: Talha Manzoor
- **Price**: $6.00
- **Published**: 2026-07-27
- **Updated**: 2026-07-28
- **Added**: 2026-07-27
- **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