Looking Glass

status

active

version

v0.2.0

stack

React · Three.js · WebGL

id

looking-glass

date

2026-03-28

A scroll-driven Three.js scene where images shift, separate, and become kinetic with velocity.

notes

Scrolling might be one of the most understated but intentional actions in UX. It frustrates us when its bad, and brings UI to life when it's immersive.

So I had this idea: what if scrolling didn't just move content, but changed it? What if the inertia of scrolling could create something that wasn't there before?

I've been exploring Three.js and used it to create a scene that looks like a clean editorial grid when idle, but as you scroll it becomes more dynamic. Strips separate, shift, and distort. The faster you scroll, the more things change.

## What I learned

WebGL fragment shaders are finicky, especially when you're trying to make motion *feel* physical. I definitely have a newfound respect for animators.