Divine Charles · Fullstack Product EngineerLoading
000%
Getting things ready…

(L/02) · webgl

Infinite coverflow

A WebGL photo strip you can drag forever. Click a photo to open it full screen.

01

What this is

This is an image carousel in 3D. Photos sit in a horizontal strip. You can drag, scroll, or use the arrow keys to move through them. The strip loops, so you never hit a hard end. Click a photo and it expands to fill the view. Click the backdrop or press Escape to close it.

02

How it feels to use

While you move, the photos get a light ripple from a custom shader, and a soft glass layer sits on top of the scene. The middle photo sits a bit smaller than its neighbors. When you let go, the strip eases to the nearest photo. If you drag quickly, the easing shortens so photos do not pile through each other. When a photo wraps from one side of the loop to the other, it jumps instead of flying across the middle.

03

How I built it

It is React Three Fiber plus GSAP. Each slide is a textured plane with its own shader. Layout math keeps gaps even as scale changes. A wave value from scroll speed feeds the shader. The project is a Vite app and ships on Vercel.

04

Why I made it

I wanted a coverflow that felt smooth at slow speed and stayed clean at fast speed. A lot of carousels look fine until you yank them. This one is about that interaction detail.