Build a magical animated gradient background that scrolls with the user - Next.js | Three.js | GLSL

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: https://pragmattic-tutorials.vercel.app/examples/scrolling-background-shader

Code on GitHub: https://github.com/prag-matt-ic/pragmattic-tutorials/tree/main/src/app/examples/scrolling-background-shader

React Three Fiber: https://r3f.docs.pmnd.rs/getting-started/introduction
ScreenQuad: https://drei.docs.pmnd.rs/shapes/screen-quad
GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/
Thing Color: https://github.com/thi-ng/umbrella/tree/develop/packages/color#readme
Thing Gradients: http://dev.thi.ng/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 [email protected] to start a conversation

Тэги:

#reactjs #web_animation #gsap #nextjs #threejs #react_three_fiber #glsl

Скачать видео