Build a Wave Distortion Shader using Three.js and React

Опубликовано: 19 Апрель 2025
на канале: Olivier Larose

9,543

352

A website animation tutorial featuring a vertex distortion shader with a wave animation applied on a plane. Made with React Three Fiber, Framer Motion and Next.js

Source Code / Live demo:
https://blog.olivierlarose.com/tutori...

00:00 Intro
00:24 Project set up
01:38 Dynamic import
02:50 Creating a plane
04:44 Wave anatomy and Sine function
06:03 Creating a Basic shader
10:07 Creating a wave deformation
18:53 Adding an image as texture
23:41 Creating a sticky section
25:29 Tracking the progress of the scroll
27:18 Changing the Amplitude on scroll
29:29 Scaling the plane on scroll
31:47 Scaling the Uv on scroll
36:04 Scaling from the center
38:07 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_
Follow me in Instagram:   / olidevs
Discord Channel:   / discord

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #threejs