The real code behind a @Hyperplexed video

‪@Hyperplexed‬ is a master at taking really cool and complex-looking designs and effects and breaking them down to their core concepts, showing that, often, they are a lot simpler than they might appear at first. To be able to do that though, and to keep his videos short and to the point, there is often quite a bit of complex code hiding behind those simple ideas.

In this video, I decided to take his latest video, which he had given a Pixar theme, and dive into some of the code that is hiding behind the scenes.

🔗 Links
✅ Hyperplexed’s original video: If Pixar Made Programming Tutorials
✅ Hyperplexed’s channel: @hyperplexed
✅ My final code: https://codepen.io/kevinpowell/pen/Vw...
✅ His final code: https://codepen.io/Hyperplexed/pen/OJ...

⌚ Timestamps
00:00 - Introduction
00:35 - Creating elements as the mouse moves
02:18 - Why this simple step is so important
02:48 - Turning the dot into a star
03:31 - Adding colors to the stars
06:12 - Adding the falling animation
08:28 - Spacing out the stars
11:05 - Adding the glow
11:52 - The other hidden parts

#css

--

Come hang out with other dev's in my Discord Community
💬 Discord: discord

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 Twitch: kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: Patreon: kevinpowell

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

• #education
• #kevin_powell
• #css
• #front_end
• #frontend
• #html
• #web_development
• #hyperplexed
• #coding_tutorial
• #javascript
• #js
• #animation
• #canva_effect
• #css_animation
• #if_pixar_made_coding_tutorials
• #the_code_behind_hyperplexed