Build a Paint Reveal Effect using the Canvas API and React
Olivier Larose Olivier Larose
29.6K subscribers
4,245 views
221

 Published On May 5, 2024

A website tutorial on making a paint reveal / erasing effect using the destination out blend mode of the canvas API, made with React and Next.js

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

00:00 Intro
00:37 Project overview
1:28 Initializing the Canvas
4:58 Draw Circles on Mouse Move
7:46 Adding the Erasing effect
9:37 Preparing values for the Lerp
13:03 Lerp explained
14:04 Smoothing out the animation
18:52 Outro

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

Thanks for watching!

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

show more

Share/Embed