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

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

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

@iamrithmic

2 ай бұрын

Woah! Thank you!

@vinitgupta1648

2 ай бұрын

I just saw this one video and I agree 💯

This tutorial is GOLD. Thank you for sharing. 🍻

@iamrithmic

2 ай бұрын

Glad you found it useful :)

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

@iamrithmic

2 ай бұрын

Appreciate those word

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

Very nice ! Thanks for sharing !

@iamrithmic

2 ай бұрын

Thanks for watching!

love it! thank you for this

@iamrithmic

Ай бұрын

You're so welcome!

AMAZING KEEP GOING BUDDY

@iamrithmic

2 ай бұрын

Thank you for the support!

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

2 ай бұрын

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

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

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

@iamrithmic

Ай бұрын

Thanks for the sub! Appreciate that a lot

Wow, simple and beauty! thx!

@iamrithmic

Ай бұрын

Glad you like it!

Masterclass 👏

I've been wanting to share what I've learned through KZread 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 👍🏻

Absolutely gorgeous 🥰

@iamrithmic

2 ай бұрын

Thank you!

Really cool!

Love the video ❤😍😘

@iamrithmic

2 ай бұрын

Thank you!

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

You just got a new follower

@iamrithmic

25 күн бұрын

Thank you!

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

Jeeez the quality

@iamrithmic

2 ай бұрын

Thanks! Trying to improve with each video

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

Finally some good knowledge using tailwind

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

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

How did you even edit this video, and what program did you use for it? Looks crazy good bro. Also, very interesting video!

@iamrithmic

Ай бұрын

Thank you! I used Premiere Pro

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

I smell a new web design trend

How come that I never discovered your channel before?

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

@iamrithmic

2 ай бұрын

Thanks man, lol yeah will be adding it!

@farzadmf

2 ай бұрын

Great, thank you!

@iamrithmic

2 ай бұрын

It's there mate :)

@farzadmf

2 ай бұрын

Great!

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

@iamrithmic

2 ай бұрын

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

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

2 ай бұрын

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

@r-i-ch

2 ай бұрын

@@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.

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

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

@iamrithmic

Ай бұрын

🤦‍♂️

What is the Name of the code theme?

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

@iamrithmic

Ай бұрын

A thing of beauty

fajne

vight innit 😭

@iamrithmic

2 ай бұрын

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

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

@iamrithmic

2 ай бұрын

Would have to be an SVG

Amazing

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

what theme do you use in your VSCode ?

@itszbari

2 ай бұрын

Look like material ocean dark (material community theme)

@iamrithmic

2 ай бұрын

Correct :)

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

@iamrithmic

2 ай бұрын

Haha thank you! Glad you found it useful :)

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.

Why does this feel like Hyperflex's style

@iamrithmic

25 күн бұрын

My favourite KZread channel. A lot of inspiration from him

"Too smooth" means "so smooth its a bad thing".

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

Ezsnippet army like 👍

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.

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

2 ай бұрын

Reusable className

@xbsidesx

2 ай бұрын

@@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.

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

.

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

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

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.

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

@iamrithmic

2 ай бұрын

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