# 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.

![Atmospheric Depth Gallery screenshot](/resources/screenshot.jpg)

[Article on Codrops](https://tympanus.net/codrops/?p=111409)

[Demo](https://tympanus.net/Tutorials/DepthGallery/)

## Installation

```
npm install
npm run dev
```

For production build:

```
npm run build
npm run preview
```

## Tech Stack

- Node.js >= 18
- [Vite](https://vite.dev/)
- [Three.js](https://threejs.org/)
- Vanilla JavaScript (ES Modules)
- GLSL (via vite-plugin-glsl)

## Credits

- Built with [Three.js](https://threejs.org/)
- Imagery from [Lummi.ai](https://lummi.ai/)
- Color chip editorial layout inspired by [@thisislandscape](https://www.instagram.com/p/DU2JTU_AEwM/?img_index=3) on Instagram

## Misc

Follow Houmahani Kane: [Portfolio](https://houmahani.com), [X](https://x.com/houma_hani), [Instagram](https://www.instagram.com/houma.hani/), [LinkedIn](https://www.linkedin.com/in/houmahanikane/), [GitHub](https://github.com/houmahani/)

Follow Codrops: [X](http://www.x.com/codrops), [Facebook](https://www.facebook.com/codrops), [Instagram](https://www.instagram.com/codropsss/), [LinkedIn](https://www.linkedin.com/company/codrops/), [GitHub](https://github.com/codrops)

## License

[MIT](LICENSE)