Make Your Site Pop With This Mousemove Animation (JavaScript Only)

Learn how to code a captivating mousemove trail animation that will make your website more interactive and visually appealing. This tutorial will guide you through each step, from HTML setup to JavaScript magic, to create this engaging user experience.

Inspiration ▸ Awwwards Element from Neo Culture

Timestamps:
00:00 Demo
00:36 HTML
01:19 CSS
04:08 JavaScript

Music from Artlist.
Thanks for watching!

[harrnish]

Make sure you add #blocks { flex-wrap: wrap; }

I really forgot to add that back while editing! Thanks.

[anubisfifa]

Bro ! These kinds of videos are very much uselfu for us . keep On creating please.. Much appreciated.

[shadowslayer]

Guys in the CSS part I dunno if he missed it, but I faced an error of all the blocks appearing at the top of the screen and not covering the entire screen. To fix this add this css property under #blocks{
flex-wrap: wrap; } so that the blocks can have enough space to move down to the next line as well.

[wasifzaki]

A request/suggestion: Show the live server rendering after every 2-3 small CSS and JS changes. This will help users to correlate which code reflects which kind of changes.

[natalia_srsa]

So pretty! Thank you for the inspiration. I was looking for something like that for a project.
Also, if anybody is having a problem with the blocks not wrapping in the screen and just staying in one line, try using flex-wrap: wrap in the #blocks css.

[ecomAarush]

I just saw your gumroad subscription but what i prefer more is that instead of getting source code and website's templates you can run a paid (or free, depends on you) community on DC where you teach people how to make this OR launch a course that people can buy to learn the skills you have.

(I've my card out for that my G, Love from India ❤)

[OscarObians]

Such an amazing tutorial. I have to ask as a fellow content creator. Do you screen record the process and then record your process voice over after the fact?

[afaqbtc]

Your accent is Indian i guess. Ap boht axha kaam krhy ho, thanks for such tutorials, it really helps a lot. I also convert these projects to react after making them in html from your tutorial

[kLn]

Bhai if you ever made a paid course with such explanations, I would surely buy. Your channel is a gem.

[margooburrahmana]

Hey brother Got some issue can you tell me the possible solution.

The scroll not working with this component.

[irynasachko]

Can I ask you the name of the title font?

[SajidP-pvrd]

Hey bro your videos are awesome I want you to please make complete animated sites bro

[Abilesh-ek]

AM TRYING TO RE_CREATE THIS IN REACT BUT I COULDNT ABLE TO ACHIEVE IT CAN YOU HELP ME OUT HERE!

[karlson]

How build similiar sites how on start of the video?

[Josh]

damn thats nice, it would be cool to see some of those grain effects people have started using
re created, my best example is: emanuelepapale's portfolio