Learn how to build an enormous piece of scrolling art.

We’re using the ScreenQuad component to render a full screen shader into our scene.
It uses time, noise and a cool cosine colour function to generate the effect.
The UI controls make it easy and fun to configure.

Groovy!

Ps. If you copy or adapt the code from my repo, please give me a thumbs up and consider subscribing to support the channel. Thanks, Matt

#javascript #react #threejs #gsap #pragmattic


🔗 Resources

Live example: [ Ссылка ]

Code on GitHub: [ Ссылка ]

React Three Fiber: [ Ссылка ]
ScreenQuad: [ Ссылка ]
GSAP ScrollTrigger: [ Ссылка ]
Thing Color: [ Ссылка ]
Thing Gradients: [ Ссылка ]


🔖 Chapters

00:00 Intro
00:55 React component setup
05:04: Basic vertex and fragment shaders
07:03 Controls
07:45 Adjusting the fragment shader with noise and time
10:48 Scrolling with the HTML content
11:20 Wrap up

🤝 Let’s work together
Email pragmattic.ltd@gmail.com to start a conversation

свернуть