public 3d-motion repository

codrops-depth-gallery

// houmahani/codrops-depth-gallery

A Three.js depth gallery where images shape their own environment, mood-driven GLSL backgrounds, parallax motion, and velocity-reactive effects.

$ git log --oneline --stat

stars:63forks:15updated:2026-06-01

README.md

readonly

Atmospheric Depth Gallery

A Three.js depth-scrolling image gallery where scroll velocity drives atmospheric mood and subtle motion, while each image defines its own background palette.

Article on Codrops

Demo

Installation

npm install
npm run dev

For production build:

npm run build
npm run preview

Tech Stack

Node.js >= 18
Vite
Three.js
Vanilla JavaScript (ES Modules)
GLSL (via vite-plugin-glsl)

Credits

Built with Three.js
Imagery from Lummi.ai
Color chip editorial layout inspired by @thisislandscape on Instagram

Misc

Follow Houmahani Kane: Portfolio, X, Instagram, LinkedIn, GitHub

Follow Codrops: X, Facebook, Instagram, LinkedIn, GitHub

License

MIT

metadata.json

JavaScriptCreative Coding ShadersscrollshadersThree.js WebGL

[INFO] 4 topics link to curated motion topic pages.