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 🔗

Final result

Final source code

Atmos Awwwards Website