Video Gallery With Hypnotic MouseMove Animation (React)

Learn how to create a stunning React video gallery with dynamic mousemove animations to elevate your landing page experience!

Inspiration ▸ Awwwards Element from KeepGrading

Timestamps:
00:00 Demo
00:38 Project Setup
01:29 Data
02:16 Creating Items
04:06 JSX
06:00 Styling
09:16 Adding Mousemove Effect

Music from Artlist.
Thanks for watching!

[javieralbertoarias]

I love you bro <3. Grateful for discover your work

[Forsvinne]

Thanks dude, +1 for uploading react stuff

[berkipekoglu]

Awesome! Thank you bro! Please more react videos :)

[afaqzzz]

Thanks for the react, now my hassle to convert that html to react will be free 😄

[zhanezar]

urgh, this is great, but what was really good about your videos in using vanilla js is that any one on any frame work could do it. i hope you will still do vanilla js videos.

[gregorycorin]

Awesome bro! Could you do the animation after: when you click on an image

[davidadedeji]

Please was this Hypnotic MouseMove Animation also built with javascript only? a link will be appreciated

[ailofimaster]

Can You please reply to this comment and tell what themes and font you using i really like the and want to install

[RyzenGod-knil]

Bro also make some project video on canvas with react

[goneaway-oz]

very difficult i dont understand a single line of code

[z_YouCef_w]

Can u use react with all your videos pls

[_motvation]

Nice bro ! Can you make a Next Portfolio ?? Pls

[shadowslayer]

Crowd going wild: More React! More React! 🔥🔥🎉🎊

[taunado]

Nice. Svelte 5 tut please ;) Just kidding, though a tutorial will be amazing as Svelte is a much better dev experience than React imo and I'm sure you'll enjoy it as it's heavily based on JS and not a virtual DOM.

[donecorleone]

I already wrote this a couple of times in the discord but since most of the scriptkiddies obviously dont know - react is trash for a static website and SE crawlers can't read the apps properly.

So since u guys spamming react react I have a informaiton for you guys: u dont understand react and u wont in near feature cuz u dont understand webdevelopment lol

but thanks for you content keep going :) but please dont go full react

[akrishnadevotee]

You shouldn't be using document.addEventListener inside react like that. You should be using onMouseMove prop on the container div directly.

You also shouldn't be declaring functions inside useEffect, they'll be created everytime a render happens. Create functions once, outside, and then call them inside useEffect if you want them to load on mount once.

[SarwarUmrzakoff-yv]

how bro i liked your brain can i copy it