You Need This Hover Effect on Your SVGs ASAP (ReactJS / TailwindCSS)

[@iamrithmic]

You can find me on Twitter / X: twitter.com/rithmio

[@MeekoEdits]

Just a small remark - saving high velocity data into state, such as cursor position, will result in rather unpleasant performance because of the constant barrage or re-renders whenever you move your cursor. I personally would go with either setting those SVG attributes directly via JS in handleMouseMove or I’d use Framer Motion. Also getBoundingClientRect is kinda expensive and doing it in a mouse move handler will slow the whole thing down considerably. It’d be better to cache it (in a ref for example) and use it from there, since it doesn’t change that often…if ever.

[@darshandev1754]

agreed

[@Pixelaze]

I'm calling it now, this channel is gonna blow up. Quality content.

[@iamrithmic]

Woah! Thank you!

[@vinitgupta1648]

I just saw this one video and I agree 💯

[@jamesonb5075]

I usually don't find youtube content useful, at all.. Buut.. This was very informative and straight to the point, it gets a thumbs up from me, well done!

[@iamrithmic]

Im really glad this was of use. Thanks for the comment!

[@NIXO3D]

This tutorial is GOLD. Thank you for sharing. 🍻

[@iamrithmic]

Glad you found it useful :)

[@ardipranata6631]

This channel is a national treasure fr, good & quality content

[@iamrithmic]

Appreciate those word

[@neoney]

Would be nice if there was a constant preview of the browser window next to the code as you're adding classes, so it's easier to remember what which class does

[@iamrithmic]

Will be trying this in future videos

[@thehelldesk5463]

Thx for the share you gain one more subscriber. Great quality content.

[@iamrithmic]

Thanks for the sub! Appreciate that a lot

[@mcstephen]

You just got a new follower

[@iamrithmic]

Thank you!

[@sandercafe]

Wow, simple and beauty! thx!

[@iamrithmic]

Glad you like it!

[@thenightwolf224]

AMAZING KEEP GOING BUDDY

[@iamrithmic]

Thank you for the support!

[@edt34]

love it! thank you for this

[@iamrithmic]

You're so welcome!

[@carlosmorales8237]

Amazing, i have been wanting to do this effect for a while, thanks

[@ericnemo8348]

Very nice ! Thanks for sharing !

[@iamrithmic]

Thanks for watching!

[@Stephinmaju]

Absolutely gorgeous 🥰

[@iamrithmic]

Thank you!

[@dinoDonga]

Somewhat reminds me of @Hyperplexed. Straigt up to the point and visually pleasing. Great stuff no pressure just keep doing your thing

[@iamrithmic]

One of my biggest inspirations on YT. Comment means a lot!

[@msahu2595]

Love the video ❤😍😘

[@iamrithmic]

Thank you!

[@sid4579]

Jeeez the quality

[@iamrithmic]

Thanks! Trying to improve with each video

[@marcusalx]

It's pronounced "veet"! :) Nice video!

[@iamrithmic]

🤦‍♂️

[@diogosoares1309]

Masterclass 👏

[@SolidWorksMastery-hr4sg]

Thanks for the video it's great .... i was trying to replicate also the effect on the 'supabase' website in the "edge function" card the effect that look like an electricity passed or something ... i also see it in vercel website it's so nice but i think i should learn more on animation and svg before i can make it

[@michaelkurzewski2937]

This could be great for bento box gradient borders. Just create svgs wrappers with composed children inside. I think it's just a bit of calculating for it to be dynamic size

[@r4rbit]

I've been wanting to share what I've learned through KZbin videos too but never find the courage to do so. What did motivate you to post videos like this one? You make it look easy, great job! This was very informative and enjoyable 👍🏻

[@Sammysapphira]

I smell a new web design trend

[@farzadmf]

Really cool! Would be nice if you shared the code in a repo or something

[@iamrithmic]

Thanks man, lol yeah will be adding it!

[@farzadmf]

Great, thank you!

[@iamrithmic]

It's there mate :)

[@farzadmf]

Great!

[@DomskiPlays]

Really cool!

[@mohitashliya8750]

Finally some good knowledge using tailwind

[@r-i-ch]

This is a great effect and code explanation but I can’t help but feel it is a messy mix of techs and concerns. I think taking Tailwind out of the equation could clear things up. Ditto for using pure JS instead of react states. (Ex. You could activate the svg border with a :hover pseudo-class) Still. Hella cool.

[@iamrithmic]

I should have stated, i think supabase also uses tailwind on their landing page. But thank you :)

[@r-i-ch]

@@iamrithmic Well then it looks like I gotta have a talk with someone at Supabase 😁 That's the nature of Dev - plenty of ways to do the same thing. (Plus I will always admit to disliking Tailwind) I'll have to find, I think Kevin Powell did something like this in pure CSS maybe🤔. To be continued... Thanks again for great work and inspiration.

[@YashTiwari.official]

Hey brother please start a series on Three js you are amazing on that ❤🎉

[@NekoujiTV]

hmm... it possibly do same effect on text overlay?

[@beehivenetwork2099]

Ok, thanks a lot. Now, how do I build it in plain JS?

[@K조셉]

good tuto brother , but i have a question : how do i deal with big svg in nextjs

[@iamrithmic]

Thank you! The same way, however I would keep an eye out on the viewbox property with SVGs etc. You may have to play around with some values, however the principle shown in this vid would be the same

[@HarshilChaurasiya]

which extension do you use for that equal sign and arrow sign??

[@ralusek]

Here's what I'd change: 1.) This is just semantic, but I'd change the interface of the Flame component to be more agnostic about what is determining where it draws the gradient. Sure, it could be the cursor, but it could also be animated for another reason. Just have it accept gradientCenterX and gradientCenterY rather than implying it should have to do with cursor. Likewise, rather than accepting mouseOnCard prop, which makes it now have assumptions about its parent and where the Flame component will be used, it'd make more sense to just have it have a prop called showGradient 2.) Rather than having gradientCenter/setGradientCenter and the accompanying useEffect inside of Flame, if there's a calculation like that that you need to do, just replace both with a useMemo.

[@varunchakraborty6020]

relatively new in this field and kinda confused of memoization stuff, but what's the point of memoization of the result when cause of animation keeps on changing and so does the input to calculations?

[@ralusek]

@@varunchakraborty6020 He's currently running it in a useEffect hook which is also reacting to the changed input. useMemo is just taking his useState/useEffect and combining them to a more semantically correct representation of his goal. With regards to why you'd memoize in the first place, you're right that the input here will change frequently enough such that many of these cases in which it would be memoized will trigger a rerun for a changed input, but there are plenty of times which react might call a re-render with the input having been unchanged. For example, as a user is typing something, they're not moving the cursor but the renders are happening, this memoization would hold in those cases. React also often renders a few times while squaring away its render state with some other underlying state, and those redundant renders need not recalculate the effect, as the cursor will also have the same position in those cases. But in general, I'd say your intuition is on the right track.

[@holypizza1]

How come that I never discovered your channel before?

[@TenzDelek]

i believe this could be done in an easier way using framer motion

[@_BonsaiBen]

you should see Vercel's 2024 annual conference page...!!!!

[@iamrithmic]

A thing of beauty

[@daleryanaldover6545]

vight innit 😭

[@iamrithmic]

😂 forever conscious of this. was just waiting for someone to pick this up

[@stevebendersky2056]

What about responsiveness?

[@febrisapermana]

what theme do you use in your VSCode ?

[@itszbari]

Look like material ocean dark (material community theme)

[@iamrithmic]

Correct :)

[@achirasilva2567]

Can we get this effect on a button too?

[@ariphharts]

Why does this feel like Hyperflex's style

[@iamrithmic]

My favourite KZbin channel. A lot of inspiration from him

[@SjarMenace]

How do you know all this code out of your head dang

[@AjaySingh-jz8qx]

Amazing

[@Stephinmaju]

What is the Name of the code theme?

[@YassineDorgaa]

can i applied on card or something semilair to png .. etc

[@iamrithmic]

Would have to be an SVG

[@naylord5]

Sweet baby Jesus, you missed the NSFW tag here mate, this is too sexy 🔥 Thank you so much for sharing!

[@iamrithmic]

Haha thank you! Glad you found it useful :)

[@fricze]

fajne

[@babayaga5848]

i find this very complicated, dev is hard for me :(

[@xbsidesx]

Why use that @apply instead of just using class name? If you want that as a component, just do a component, not a class with @apply. It’s counterintuitive and not recommended by tailwind.

[@muslehuddin8847]

Reusable className

[@xbsidesx]

@@muslehuddin8847 not the case here, it's used literally once. Also, if in the future you need it to be reusable, just do a component, it'll be exactly that ;)

[@erentr7167]

@@muslehuddin8847 which tailwind doesnt suggests and warns you to not to do that because whole point of tailwind is to get rid of class names.

[@Sanatani_AyushEdit]

Ezsnippet army like 👍

[@vulbyte]

neat way to do so, but being real i feel like this is massively over coded. i would so something like (skipping most of the verbosity of code just to make it more concise): div: id=followMouse h=25%, w=25% clip:svgOutline then just have a js loop that lerps the xy of the mouse. this way you can also just apply it to every and any element on the page.

[@morespinach9832]

Goodness. Tailwind is one of the worst things to happen to CSS. With the tag spaghetti. Any proper css way to achieve this?

[@erentr7167]

too many states, too many use effects bro. also you use a ref. you dont need to use that many hooks. you also pass them as props. dont do that. just use a single state with single event listener. you do too much calculation on that function.

[@erentr7167]

also you hold cursor x y state in root component which it will rerender each time you move the mouse, it will rerender the whole application, not ideal sorry.

[@rollotomasi1832]

It's clear that you just finished your first React tutorial. Leave the heavy lifting to the big boys.😂

[@erentr7167]

@@rollotomasi1832 I think its just 4th year of me with typescript & react bro

[@ImTheDot]

.

[@Euquila]

10:40 let's take a moment to appreciate how useless typescript is in general

[@Bodom1978]

Would have been better without React or Tailwind.

[@schuste6]

why?

[@vaccariaofsamsara]

why? care to explain?

[@Bodom1978]

Because if this tutorial was done using native JS and CSS it would be useful to anyone regardless of the frameworks they do or do not use.

[@schuste6]

@Bodom1978 is there something wrong with using them? im actually curious because i thought react, tailwind, etc are solid frameworks and they make it easier to create things. also they have more features

[@Bodom1978]

There is nothing wrong with using them, I use them a lot, but I also have many projects that do not. A tutorial with native JS and CSS would be easily ported to any framework. But the other way around limits it to only React and Tailwind.