Back to videos
Reproduce Atmos Awwwards 3D Website with React Three Fiber
Need help while watching this video? Join our Discord community .
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