Retour

Reproduce Atmos Awwwards 3D Website with React Three Fiber

In this react three fiber tutorial we will reproduce the beautiful 3D website Atmos.

The technical topics we will cover are:

Lamina animated gradient background
Curved line
Extrude path
Scroll animations
Environment map & Cubemap
2D Text in a 3D scene
Postprocessing effects
Fade in effect with customized shader
Speed effect
Deploying threejs project to production
Responsive 3D
Loading / Ending screen

Get the starter pack here 🔗
https://github.com/wass08/r3f-wawatmos-starter

Final result
https://r3f-wawatmos-final.vercel.app/

Final source code
https://github.com/wass08/r3f-wawatmos-final

Atmos Awwwards Website
https://atmos.leeroy.ca/