Recreating The Hover Effect That Shocked Frontend Devs

This CSS & JavaScript hover effect blew my mind when I first saw it, and I saw a ton of requests to explain it. So in this video, we're going to try to recreate it from scratch!

Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:
https://www.frontendexpert.io/conner
TikTok: https://tiktok.com/@connerardman
LinkedIn: https://linkedin.com/in/connerardman
Video/Coding Gear: https://www.amazon.com/shop/connerardman
Business/brands 👉 youtube@connerardman.com
Timestamps:
0:00 Particle Hover Animation Effect
0:18 Creating The Image Particles
1:26 Canvas Setup
2:22 Getting Image Data
2:55 Converting Pixels To Particles
5:04 Drawing Particles To The Canvas
5:56 Tracking The Mouse
6:21 Repelling Particles
9:25 Returning Particles
10:31 Load Animation
10:59 Performance Optimizations

Видео Recreating The Hover Effect That Shocked Frontend Devs канала Conner Ardman