Skip to content

component

DistortionSlider

By Talha Manzoor

Details

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: Drop the component into a full-screen or fixed-height frame Add your slides in the Slides array — each with a title and image Choose a background type (solid, linear, radial, conic) and style the title/count overlay Tune Distortion, Wheel/Drag/Touch Speed, and Center/Edge Scale to dial in the feel you want Adjust Min/Max Height and Seed to change the randomized slide rhythm 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.

Introduction

Distortion-wave canvas slider

Rank history

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

120014001600171158/148/228/309/79/15
  • All · #7115