Re-build Starlight.Money Futuristic Glow Animation | Webflow Tutorial

Javascript snippet: tinyurl.com/sm-js-snippet
===
[NEW] Practical User Research & Strategy Masterclass (100+ students. 8+ hours)
👉 thedesignership.com/courses/p...
My Ultimate Figma Design Masterclass (5,000+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

[@omrlxs]

Simple, straightforward, and comprehensive. Awesome interaction. Thanks for sharing!

[@samirfarid5539]

Man this is really amazing, simple explanation, and high value as usual!

[@littleblackhatco]

Yes! More Webflow tutorials please!

[@aysenuronaran726]

It worked! I did this in light mode because my background color in the website was white, still looks good. Thank u!

[@lexib9516]

Amazing as per usual! I'm patiently waiting for your full course for Webflow 😁😁😁

[@dawn4063]

I was looking for a tutorial on this and you made one! You're the best Mizko!

[@Mizko]

🫣 Small world!!

[@TheHumanistX]

Just discovered you today... blown away by how easy it was to set that up in figma!

[@luk5]

Awesome content, the bits you include in between the major information, like the little bit about the x2 images for the retina display, are so useful for us beginners. Thank you for doing what you do!

[@Mizko]

Thanks Luke! Yep, I try to foresee any questions people have and answer them in the process :)

[@redoy2011]

Need more content like this, thank you

[@UserfeedbackbyTea]

spent the last 12 hrs looking for this on KZbin

[@elprofessor3213]

Wow, thank you for this. I like the way you teach and explain. U deserve 500k subs atleast. Keep it up!

[@julianTrichardson]

Super video once again Mizko!

[@Mizko]

Super thank you!

[@Salvoiera]

I love it. Thanks Mizko.

[@Rahuluyadav]

Awesome. Thanks for sharing

[@danilobatista251]

Awesome! Thanks, Mizko.

[@Mizko]

Glad you enjoyed it!

[@cjoyceheart]

Thank you as always. 🎉

[@Mizko]

Anytime Camille!

[@20-krunaldhanawade80]

Your videos are really inspiring. Really following your figma tutorial. Love from India.🇮🇳

[@Mizko]

Thanks Krunal!

[@eli.alcaraz]

Amazing man! Any chance you can also teach how the moving glow lines are created?

[@KaloyanGeorgiev92]

neat trick, thanks for it :)

[@Mizko]

🙏

[@davidisiekwene]

more Webflow content woop 🤩

[@Mizko]

✌️

[@surendarr2177]

thank you Mizko happy to learn webflow from you In my search for gold, you are a gem teacher.

[@Mizko]

Hahah thanks Surendar. So are you the explorer and I am the gold?

[@surendarr2177]

No.. I’m trying to say that you are gem 💎😂❤ thank you for your guidance

[@njengathegeek]

Perfect timing, in fact I have two client websites I'm currently designing and implementing them in webflow and firebase

[@Mizko]

Nice!! Add a nice texture or the back 🫠

[@njengathegeek]

@@Mizko absolutely sir

[@byebyebirdie8027]

Very easy and simple explanation as usual. Thank you! I hope you make more videos about webflow in the future. Ps. you’re the only person with Australian accent that I understand easily 😂

[@Mizko]

Glad you enjoyed Birdie! I will definitely be introducing more Webflow workflows. Hahaha! We are a unique species down here 😂

[@frysh]

Very incredible! Thanks. Do you teach how to make these moving lines on the website?

[@yunusjagot3673]

I discovered your channel yesterday - I implemented this animation following this tutorial today! Just want to say thanks! Amazing stuff man. Question, I am using this on a landing page which contains multiple sections with different backgrounds. How do I limit the cursor glow to the hero section? Thanks again!

[@PalmRenders]

how do i put sections under that now? Everytime i put a section under it it hovers over the background and i cant do anything when I scroll.

[@EmilioGarciaRios]

did you figured it out?

[@jacobengelbreth6227]

Awesome! Can you try to re-create the "lasers" coming from the logos on the hero? 😊

[@kaushals_vlog]

yes, we want more weflow tutorials Mizko....

[@Mizko]

😅 sure!

[@m.ehtizan]

Hey Mizko, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you.

[@SofiiaDidenko]

Thank you so much, hope you will create your own Webflow course in Udemy or courser.

[@vandrap7816]

Is it possible to use svg squares insead of the pngs, to have smaller file size and faster page speed?

[@NiveditaKulkarnni]

hey Mizko, can you pls create a tutorial on how to recreate the animated lines that are moving from left-to-right and up-down? thanks for this video man! this was helpful

[@peushjha110]

Why didn't you used follow mouse interaction fir the glow to follow the curser?

[@mazarakhsh27]

👌

[@iamaboyeji]

@Mizko, adding code customization seems not to be available for the free plan

[@iamaboyeji]

Or is it just me?

[@mirza6572]

I am not getting body tag section in webflow to add the code. Can someone let me know why this is happening ?

[@scut55]

@mizko do you use a Framework in Webflow?

[@Mizko]

I tend to build from scratch :) But there are some great frameworks like Finsweet and Relume

[@DesignDen673]

Could you please make more indepth webflow tutorials?

[@Mizko]

Yep! I'll be rolling out even more Webflow tutorials moving forward

[@marvinkr]

The code snippet doesn't work on my side, it creates huge white space below the hero section. Has anyone tried the code?

[@evandavidms_Oficial]

Does anyone know of a course for JS, CSS, or React?

[@AdaReinhold]

Hey, nice video. There is the option to use interactions, why you decided to write a code for the animation?

[@Mizko]

Thank you! Which interaction allows you to set the circle to follow the cursor?

[@AdaReinhold]

@@Mizko Mouse move in viewport. You set the movement for X and Y axis so the circle will follow.

[@katoetonic]

Alright Mizko, when is the Webflow course coming out? :)

[@Mizko]

Hahah! I do plan to do one but I’ve got a few other courses coming out before Webflow

[@katoetonic]

@@Mizko Lmao..nice! I still have to finish the UX course you developed, so it will give me time.

[@kavineesh12]

Now Framer is also in the market what would you suggest leaning Webflow or Framer ( PS : I don't know 1% of coding )

[@Mizko]

Tools are just tools. Whichever you feel comfortable with. I personally don't like investing time in learning 'brand new tools', because there is more risk they might not work out. Framer looks very promising, but it's still quite new. I would rather have everyone else test it, break it and improve it before I spend time learning it. My time is precious :)

[@AJ-yj6kd]

I wonder if you can recreate this effect on figma while hovering anywhere.... Kinda useless, but could be good practice. I'm guessing you would have to create a grid of blurs that light up when you hover on them, but the darker squares on top would be in the way so the blurs wouldn't be able to detect the cursor. Interesting.

[@Mizko]

Like you said, the only issue is that you can not track the cursor. You could try, 'force' the mouse in and out trigger, but still it won't be exact.

[@AJ-yj6kd]

@@Mizko Guess I better start learning WebFlow 🤣

[@Mizko]

@@AJ-yj6kd You should always learn how to build your own designs, it's fun :)