Scroll distortion

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The canvas is put in the marked box and draws its pictures: anything laid over a picture, a badge or a title, needs position: relative and a z-index over 1 to stay in front. A bent picture reaches past its own box for the time of the scroll, so the marked box needs some room around its pictures. The radius and the object-fit of a picture are read on the picture itself.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-scroll-distortion	Marks the box that holds the pictures: a gallery, a section, the wrapper of a whole page. It takes no value: leave the value field empty. One canvas is put in that box and every picture in it bends with the scroll, so mark the box around all the pictures rather than each picture, and one that leaves them some room above and below. Put on a picture itself, it is read as the box around that picture. Without it on any element of the page, the embed marks the section it was pasted into.
   data-scroll-distortion-image	Marks one picture of the box, an Image. It takes no value. Without it on any picture, every picture of the box bends; with it on some, only those do. [ Optional ]
   data-scroll-distortion-state	Written by the engine on the box: live while a picture is bent, idle at rest, still under reduced motion, plain when there is no WebGL or no picture could be read. Never written by hand. [ Optional ]
   data-scroll-distortion-live	Written by the engine on each picture the canvas draws, which the stylesheet then makes clear. A picture without it is shown by the page itself. Never written by hand. [ Optional ]
   data-scroll-distortion-layer	Written by the engine on the canvas it adds to the box. Never written by hand, and removed by destroy(). [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-scroll-distortion-tint	#ffab1a	Colour of the fringe an edge takes while the picture moves: that colour on one side of the edge, its opposite on the other. Options: any CSS colour, a hex, an rgb(), a name.
   data-scroll-distortion-tint-amount	1	How much the fringe follows tint, 0 to 1.
   data-scroll-distortion-bend	0.1	Depth of the bow at full speed, in shares of the picture's width: how far the middle of the picture lags behind its two sides.
   data-scroll-distortion-stretch	0.08	Length the picture gains at full speed, in shares of its height: its trailing edge drags while its leading edge keeps its place.
   data-scroll-distortion-split	0.02	Gap between the colour layers at full speed, in shares of the picture's height.
   data-scroll-distortion-inertia	0.9	Share of the difference left after a frame, at 60 frames a second, between the speed a picture shows and the speed of the page; it sets how long the pictures take to pick the effect up and to lie flat again.
   data-scroll-distortion-speed	2400	Scroll speed that gives the full effect, in px a second.

Two files and their pictures (6), no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call ScrollDistortion.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-scroll-distortion-tint	#ffab1a	Colour of the fringe an edge takes while the picture moves: that colour on one side of the edge, its opposite on the other. Options: any CSS colour, a hex, an rgb(), a name.
   data-scroll-distortion-tint-amount	1	How much the fringe follows tint, 0 to 1.	At 0 the fringe is the plain red and blue of a lens, and tint does nothing	At 1 the fringe is tint and its opposite, nothing else
   data-scroll-distortion-bend	0.1	Depth of the bow at full speed, in shares of the picture's width: how far the middle of the picture lags behind its two sides.	At 0 the picture stays a rectangle; under 0 the bow turns over and the middle leads	Past 0.25 the picture reads as a sheet of rubber, and tall pictures reach into their neighbours
   data-scroll-distortion-stretch	0.08	Length the picture gains at full speed, in shares of its height: its trailing edge drags while its leading edge keeps its place.	At 0 the picture keeps its length	Past 0.2 the tail covers whatever follows the picture, a caption for one
   data-scroll-distortion-split	0.02	Gap between the colour layers at full speed, in shares of the picture's height.	At 0 no fringe at all, and tint does nothing	Past 0.05 the layers come apart into three ghost pictures
   data-scroll-distortion-inertia	0.9	Share of the difference left after a frame, at 60 frames a second, between the speed a picture shows and the speed of the page; it sets how long the pictures take to pick the effect up and to lie flat again.	At 0.8 the effect follows the scroll closely and is gone a third of a second after it stops	At 0.96 the pictures are slow to bend and settle for close to two seconds
   data-scroll-distortion-speed	2400	Scroll speed that gives the full effect, in px a second.	At 1200 a slow wheel already bends the pictures all the way	At 5000 only a flick does, and ordinary reading leaves them almost flat

2. Drive it from JavaScript

   When the pictures of the box change after load, when something other than the scroll should bend them, a page transition for one, or when another element should follow the speed of the scroll.
   JavaScript Expand Copy

   const element = document.querySelector('[data-scroll-distortion]');
   element.addEventListener('scrolldistortion:ready', (e) => {
     console.log(e.detail);
   });
   
   const bend = ScrollDistortion.mount(element);   // the box auto() mounted, or a new one
   bend.push(0, -1);    // every picture bent as by a full speed scroll down, then settling
   bend.speed();        // { x, y }, what the pictures show right now
   bend.refresh();      // after pictures were added to the box or removed
   
   element.addEventListener('scrolldistortion:ready', (e) => {
     console.log(e.detail.live, 'of', e.detail.pictures, 'pictures are on the canvas');
   });
   
   // When the box leaves the page:
   bend.destroy();   // removes the canvas, frees its WebGL context, shows the pictures again

   Show all 16 lines

3. Fit it to your page

   • Structure: one box marked data-scroll-distortion, with pictures in it, at any depth: a gallery, a section, the wrapper of the whole page. The script puts one canvas in the box, data-scroll-distortion-layer, draws every picture of the box on it and never takes a click, so links and pictures underneath keep their clicks and their menu.
   • One canvas per box, on purpose. A browser gives a page a few WebGL contexts and takes the oldest away past that. Mark the box that holds all the pictures, not each picture. The attribute on a picture itself is read as its parent box, so pictures marked side by side still share one canvas.
   • Choosing the pictures: by default every <img> of the box. Mark some with data-scroll-distortion-image and only those bend.
   • No smooth scroll library is needed. The canvas is a child of the box and scrolls with the page like the pictures do, so the browser's own scroll never shows a picture and its copy apart. The easing of the effect is the component's own, inertia.
   • With Lenis, or another smooth scroll, there is nothing to connect. The speed is read on the pictures, from where they are in the window each frame, whatever moved them. A library that moves the page with a CSS transform and sends no scroll event is picked up from the wheel or the finger that started it.
   • A scroller inside the page and a horizontal scroll work the same way: a picture that travels sideways bows sideways.
   • One setting for every box of the page, without opening the file: declare window.ScrollDistortionSettings = { bend: 0.2 } in a script placed before scroll-distortion.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-scroll-distortion-* attribute on the box itself (data-scroll-distortion-bend="0.2"), so one box can still differ from the page-wide setting.
   • Pictures from another site have to allow their pixels to be read: the server sends Access-Control-Allow-Origin, and the script asks for the picture a second time with crossorigin when the first reading is refused. The Webflow CDN allows it (checked on cdn.prod.website-files.com on 04/10/2026: access-control-allow-origin: *). A picture that is refused stays the plain HTML picture, without a word.
   • What the script writes: data-scroll-distortion-state on the box, live while a picture is bent, idle at rest, still under reduced motion, plain when there is no WebGL or no picture could be read; and data-scroll-distortion-live on each picture the canvas draws, which the stylesheet turns clear. On its own canvas, a size and a transform. Nothing else: no inline size on the box or the pictures, no class.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, settings, pictures(), the number of pictures the canvas draws, refresh(), which looks for the pictures of the box again after they changed, resize(), speed(), the speed the pictures show, across and down, in shares of the full effect, push(x, y), which hands every picture a speed as a scroll would, frames() and isRunning(), for a test that wants to see the loop sleep at rest, and freeze() and unfreeze(), which hold the bend as a still picture, for a thumbnail. The box emits scrolldistortion:ready once its pictures have been read.
   • **destroy() leaves the box as it was**: the canvas removed and its WebGL context given back at once, the listeners gone, the pictures visible again, the state attribute taken off, and the inline position: relative removed if the script set it.
   • Touch: the same effect, from the finger's scroll and from the glide that follows it. Nothing is added to the gesture and the page scrolls as it always did.
   • **prefers-reduced-motion**: no canvas at all, the pictures stay as the page set them. The state reads still, and turning the preference off brings the effect back without a reload.
   • Without WebGL the pictures stay as the page set them, and the state reads plain.
   • The words and the pictures of the markup are the preview's, and they ship as they are. Put the user's own in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • The canvas draws over the box. It sits at z-index: 1 inside the box and is clear everywhere but on the pictures; anything laid over a picture, a badge, a title, a play button, takes position: relative and a z-index over 1, or the picture covers it.
   • A bent picture leaves its box. Its tail reaches past its trailing edge, by stretch and bend together, and covers what follows it for the time of the scroll, a caption under it for one. Give the pictures some air, or lower the two settings.
   • The canvas ends where the box ends. A picture that sits against the edge of the marked box is cut there when it stretches. Mark a box with a margin around its pictures, a section rather than the row itself.
   • A picture is drawn as a plain rectangle with rounded corners. The script reads the size, the object-fit, the object-position and the border-radius of the <img> itself. A picture cropped by its parent (overflow: hidden on a wrapper smaller than the picture), a clip-path, a filter or a CSS transform on the picture are not followed: put the radius and the fit on the picture.
   • A parallax that moves the pictures is read as speed like any other movement, which is usually what is wanted. A picture pinned in place, position: sticky or fixed, does not move in the window and stays flat.
   • Pictures that change after load (a filter, a CMS list that loads more) are not seen until refresh() is called on the instance.
   • Every picture of the box is loaded at once, lazy ones included, and kept as a texture at the size it shows: the canvas has to be able to draw a picture before it scrolls in. Meant for the tens of pictures of a page, not for an endless feed.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a box that already carries the effect returns the existing one. A page-wide block goes in window.ScrollDistortionSettings, which auto() reads itself.
   • An animated GIF is drawn as its first frame, and a <video> is not a picture: the effect is for still pictures.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.