ScrollWarpImage

Options

paper #fbfaf4

css colour

Shown wherever the warp has pulled the sheet away from the frame. Match it to the page behind, or a border appears out of nowhere as soon as anyone scrolls.

bend 0.07

0 to 0.3

How hard the edges lag behind the middle. This is the bow, and it is the option you came for. Each axis is displaced by how far the other one is from the centre, which is what curves the edges rather than stretching the sheet.

slip 0.02

0 to 0.15

How far the whole sheet slides against the direction of travel, the way anything with mass does when it is pulled. Small: this is the part you feel rather than see.

fringe 0.005

0 to 0.03

Separation between the colour channels while the sheet is moving. A press strikes one plate per ink and a moving web lands them a fraction apart. Keep it under about 0.01 or it reads as a broken monitor.

grain 0.4

0 to 1

Paper tooth over the image.

reference 1.6

0.2 to 6

The scroll velocity that counts as full speed, in screens per second. Above it the effect stops growing. Lower makes the sheet bow more readily; too low and an ordinary wheel click maxes it out.

What it needs

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1 ms · 1 context

Pinned to

v0.6.2

• The picture is the host element's own <img> child. It is hidden from sight and left in the document, so the alt text is whatever you wrote and a page with no JavaScript still shows it
• The same deformation as ScrollSlideshow, run on both axes rather than one, so every edge of the sheet bends instead of just the top and bottom
• At rest nothing is distorted. The whole effect is a function of scroll velocity, so a reader who has stopped scrolling is looking at a photograph
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Three texture reads per pixel, one per channel, because the colour fringe evaluates the bow three times
• The image uploads once, on load. Nothing is uploaded per frame
• Scroll velocity is measured on the scroll event and decayed in the frame loop. A per-frame difference reads zero on most frames, because scroll events do not fire every frame, and the effect stutters