Skip to content
A Project Gallery That Bends Like Film

A Project Gallery That Bends Like Film

A row of project cards behaves like a strip of film you can scroll, flex, and shove around with your cursor. Built in Three.js with hand-written GLSL, where scroll velocity drives a vertex-shader bend and a post-process pass adds the grainy, almost celluloid edge shimmer.

Details

Published

What it is

Curvy Gallery is one of those projects that makes you forget you're scrolling a webpage. It lines up a handful of project cards and treats them like a strip of film you can grab, drag, and flex. Then there are the edges: a grainy, faintly celluloid shimmer that flickers along the left and right margins like the project remembers being shot on actual film.

It's Three.js feeding hand-written GLSL, and the whole thing runs on velocity rather than position. The vertex shader reads how fast you're scrolling and offsets each plane in Z with a sine-based bend across screen-space UVs, so the bend intensifies while a card is moving and relaxes as it settles. The cursor warp and the edge noise live in a separate post-processing pass, where the fragment shader measures pixel distance from the mouse for the push and stacks fbm-style noise layers for that film-edge grain, dimming color slightly in the warped zones so it reads as texture instead of glitch. Worth a click into src/shaders/edge-warp to see how little code it actually takes.

How it’s made

Technology
GLSL
Framework & Tool
Three.js