Back to videos
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
Need help with this tutorial? Join our Discord community!