Reproduce Atmos Awwwards 3D Website with React Three Fiber

Опубликовано: 08 Сентябрь 2026
на канале: Wawa Sensei

14,428

466

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

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

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

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

#threejs #r3f #react

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

GSAP
https://greensock.com/docs/v3/GSAP

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei

Models
https://poly.pizza/

Lamina library documentation
https://github.com/pmndrs/lamina

CatmullRomCurve3
https://threejs.org/docs/#api/en/extr...

ExtrudeGeometry
https://threejs.org/docs/?q=extru#api...

Text
https://github.com/pmndrs/drei#text

Environment
https://github.com/pmndrs/drei#enviro...

Cubemap
https://threejs.org/examples/?q=cubem...

The book of shaders
https://thebookofshaders.com/

Shader exponential function
http://www.flong.com/archive/texts/co...

Sébastien Tweet
  / 1646609282064961579

Vercel
https://vercel.com/

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:36 - Setup
00:46 - Background
01:37 - Plane & Clouds
02:49 - Curve
04:15 - Scroll movement
06:20 - Adding text to the scene
07:27 - Minor adjustments
07:48 - Better curve, scroll & rotation
11:26 - Scene lighting envMap
13:16 - Final texts
14:46 - Text rail animation
16:11 - Retime effect
17:33 - Gradient animation
19:11 - Final clouds
20:22 - Fade effects
22:29 - Noise
22:48 - Loading Screen
25:10 - Fade & Start animation
27:07 - Scroll like Jagger
28:22 - Ending Screen & animation
29:25 - Responsive
30:08 - Fix glitch effect composer
30:27 - Speed effect
32:43 - Build & Deploy to Vercel
33:52 - FINAL RESULT
34:30 - Conclusion

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
   / @wawasensei

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord

🐦Twitter :
  / wawasensei

📸 Instagram :
  / wawa.sensei

🐦TikTok :
  / wawasensei08

💻 My website :
https://www.wawasensei.dev