I Gave a Website Logo Superpowers

[@Hyperplexed]

Check out Frontend Masters! bit.ly/FrontendMastersTrial Merch: hyperplexed.store

[@oamioxmocliox8082]

;)

[@KB04]

Here to give my opinion. Please show more code. not complaining though, good video.👍👍

[@markopolo2224]

amazing ad i bought all the courses

[@neurod6013]

we need more animations on the website for more dopamine MORE MORE MOREEEEE

[@DevMadeEasy]

🌟 Wow, what an incredible piece of content! 🌟 Thanks a million for sharing this gem, my dear friend! 😍💫 This is truly a treasure trove of knowledge! Keep shining bright and sharing more fantastic stuff like this! 🌈🚀

[@semaforogms.1998]

Bro if they don't use this they're losing on it, it looks so good

[@stealth3122]

In all seriousness, although a fun thing to do, logos should be static. Logos are used so that your company can be recognized from a small icon, making this icon have different states makes it harder for peoples brain to make connections with how the logo actually looks. In addition to this it is fairly intrusive and is much too eye catching. I am not saying that hyperplexed is a bad designer or anything, you can tell he recognizes that most of these fun little gimmicky animations shouldn't really be used as they are often tacky or too distracting. I am also not trying to say that you should stay away from things like this in design, but just try to remember sometimes less is more :)

[@maxpro751]

@@stealth3122I feel like it should be like a hidden easter egg, and if you find the hidden easter egg then this feature would be unlocked.

[@CindiG6936]

That's what the logo in the tab is for

[@stealth3122]

@@CindiG6936 But that is the exact problem, (other than the visual distraction) the difference in logo between other ones shown and the one that would move strangely makes it harder to recognize what the logo should actually look like.

[@absolutewisp]

​@@stealth3122yeah, a gimmick like this might be fine for some kind of eye candy welcome page, but the logo in the footer should absolutely be calm and recognisable

[@daleryanaldover6545]

Man, I know your content is always top tier but getting sponsorship just sets you flying to the moon 🚀😂. Congrats!

[@MarkTow]

Your editing skill is actually insane! Everything was so smooth. Also the choice of background music and timing them was also spot on.

[@trueberryless]

Bro, your videos just got an absolutely fascinating auditive upgrade. These sound effects rock, dude! Keep it going!

[@Llamaful]

I’ve been watching these videos for a decent bit and the quality has improved so much. Good work!

[@MRJMXHD]

Easily one of the best channels on KZbin. The presentation, everything is just amazing!

[@Shaheer-xs5os]

Dude the personality is too strong and you put so professionalism in your video... and damn that Deeeeeeeeeep voice 💕

[@DBZM1k3]

For some reason, I'm hearing the Grinch. 😂

[@megamind452]

This style of teaching is really great 👏

[@maxwebstudio]

I don't know what's the most amazing : Your design ideas or you video editing skills.

[@AnjeshBhattarai]

I love Ur editing man and your unique style of content mixed with humor.

[@account9949]

Your so talented, I love your channel man!

[@VagabondSoftware]

1:30 - Stop I beg you... It's perfect

[@darahk88]

you showed us a new way to make tutorials. you are amazing

[@БогданШовкопляс-ш7ж]

Can't imagine how much effort you have put for this video🤯

[@clouis906]

A way easier way would've been to position the logo and tie the cursor point to a CSS translate property and just adjust that value to a maximum. Didn't test this but it seems like it would work.

[@pokefreak2112]

Yeah that's how I did it on a website I worked on, define --cursor-x and --cursor-y, then you can do all the transform logic using calc() in CSS

[@insideme9414]

why fear when js is here why to make it in css a wise man once said: "if you can make it in css make it" the wise man was then captured and sent to alabama

[@notpea]

@@insideme9414 css lore goes hard

[@NaudVanDalen]

This logo effect looks great!

[@kipchickensout]

what if you made the spacing non-linear, so that it travels quite some distance but the more you move away from the logo, the less spacing increases, so that it never crosses the actual line of looking weird?

[@khodis2002]

Easing function or 1 - 1/(x+1) could work

[@ScoutOW2]

If your goal was efficiency, why didn't you just use 5 of the same image that's white and just tint them on awake? With the added bonus of also having a key binding to change their colour palettes.

[@juandavidguarnizogutierrez4566]

that would need some extra processing, with fix data we get less memory ussage, or at least my Student brain thinks that

[@AnwarulIslamYT]

@@juandavidguarnizogutierrez4566 no. now it's just added unnecessary network call for other 4 images.

[@ScoutOW2]

@@juandavidguarnizogutierrez4566 Iunno, could be because i work in games and not websites, but if it only ever changes the colour its tinted by, on awake rather than render an entirely new image 5 separate times, iunno it seems like that will be less memory usage. Because 1 is just setting a value by line of code and the other is physically downloading temp files. If it was on tick it would def take up too much memory but if the colour change only happens once at the start and another time if you want it on a button press, that would be next to no memory used. Especially because i think colours assigned by code is built into the browser itself. I could be completely wrong though, I don't work on anything but games!

[@bobbysmurf9915]

​@@ScoutOW2 I agree with you, It would definitely take up less storage since its only one image.

[@unicodefox]

@@juandavidguarnizogutierrez4566 Memory usage is definately lower when using the same image - it has to keep 5 images loaded compared to 1.

[@hrobbins_alt]

Heya Hyperplexed! Loved this video, as usual - you always explain everything in a way that makes it so much easier to digest (even though this video wasn't entirely explanation based, i really liked how you did it with the polyrhythms one!). Anyways, flattery aside, I've come to present to you a challenge. Redesign a website WITHOUT using dark mode. More specifically, I think it would be interesting to see what you do with 4chan and its abundance of boards... It's like Craigslist, in that its UI hasn't changed for literal years, so I'd be interested in how you could keep it faithful while adding that extra splash of stylisation that comes with a Hyperplexed design. That's if you see this comment though lmao.

[@taiwojolomi]

The most cliche ending... Loved it!

[@chinmaykumar7975]

you are an artist sir !

[@and_rotate69]

Ayoo the editing on this video made me forget i was watching hyperplexed, good job yo

[@lolous-studio]

Yay, I want it in the site now

[@abdullahisalihu8107]

I'm sure someday they'll consider using it

[@GenXinvenits]

Am definitely going to use this concept, on my own... Loved it... I was looking for some ideas like this... This concept of urs completed my needs... Kudos to you...

[@enoughwithandles]

Fire tutorial. I adore it and cant wait to see all the magic you do ✨🔥🎇🎇

[@locowachipanga561]

I'll be so happy for you when you get to the million subscribers.

[@Aria_4real]

its funny seeing people in the comments think the message at the end of the video was real lol

[@shinkanade1552]

Dude learning never so fun 😂, a masterpiece in terms of story telling and accuracy. Now excuse me imma watch your other videos

[@markopolo2224]

your videos are always great!

[@DiluteOxygen]

the editing on this looks so so so good!!!

[@youtubercell]

I hope frontend masters never run out of money so they could sponsor you

[@ThisIsLumpi]

I think there is one more thing you could try: Part1: Step1: Get personal infomation of the CEO. (dox the CEO) Step2: Use a fake Email to text the CEO. Step3: Tell him that you know where he lives and you are going to make this information public, if he won't use your Logo. If Part1 didn't work continue with Part2: Step4: Hire a Hacker on the Darkweb. (VPN recommended) Step5: Tell the CEO that you can do a DDoS-Attack, if he won't use your Logo continue with the plan. Step6: Tell the Hacker to do a DDoS-Attack on the website. (If hacker fails learn hacking and do it by yourself.) Now wait for the company to rebuild their Website. Part3: Step7: Hire a Hitman from the Darkweb. (VPN recommended) Step8: Tell him to ki** the CEO. (If the Hitman fails get a Silverballer and do it by yourself.) Repeat Part3 until the Logo is added, or continue with Part4: Step9: Ask Elon Musk to give you money. Step10: Buy the company. Step11: Add the Logo by yourself.

[@asher3311]

damn this was good until the elon musk part

[@ThisIsLumpi]

@@asher3311 what should I write instead?

[@r-i-ch]

You the man. Always such cool stuff...

[@LiPvrsa]

Man I'm not a programmer but i love and enjoy your videos.keep it up 🔥🤟🏻

[@DennisIvy]

I’m only mad cause I can’t make videos like this 😏

[@VaibhavShewale]

ooh ol, that was fun!

[@InterPixelYoutube]

Great video but why not copy and paste the same svg 5 times in HTML and give them all a different background colour. This way you can change the colour palette in CSS or based on the cursor position.

[@joaopbeltrami]

Awesome content. Thanks for the videos!

[@paimonbutter]

Ah yes this is why the internet is getting slower, websites need to track our mouse position 24/7 to move their logos accordingly

[@CRutgerX]

Idea. Use hsl and pull the saturation into it as you move the mouse away

[@cowboyglizzy1883]

Your videos are so good

[@mdrifat6941]

Brother, please make 2 videos a month. I don't know about others but I love your content so much that I can't wait that long... 😢

[@alex.g7317]

That message at the end imply that you pissed off Career Puck more then once 😂

[@PenguinByte]

Do more "website" (they're really apps) redesign videos, I LOVE them.

[@thetrends5670]

This video sounds more sponsored by CareerPuck than FrontendMasters.

[@wheresmyskin]

You can color SVG shapes with CSS. It was enough to use one SVG logo and add some styling. Not only it would be lightweight, it would also scale better, because, well, vectors ;)

[@lahcencodery]

Amazing content as usual, I wonder if you can do a video on how you edit/create your videos, what tools, softwares, equipments, websites you use.

[@k-yo]

I like clean markup and non-performant properties for animations, so I'd use a single image with multiple filter shadows and manipulate their positions with custom css props

[@ingelegenial]

For the first time, I didn't skip an ad 😂😂😂

[@timawolola5565]

Watching your videos literally makes me want to give up coding, and I only just began my journey. If there are people this good out there, why bother.

[@ACEmmanuel]

Most of them are just unnecessary show offs

[@blue_berry_pie64]

So educational and still enjoyable and funnyxD

[@fadilnatakusumah195]

Damn this is high quality video

[@subberwizzard]

Yea... And Redbull gives me wings

[@Z3ROR]

Instead of 5 different images it would more interesting to do this with a single svg, where you generate the other colors with js and animate it. And make it scalable with svg as well.

[@ToadyEN]

why not use 1 svg and colour it using CSS?

[@Taiga.x]

Amazing as always, just wonder why you used 5 svg files instead of just changing the color of one with html/css

[@torgeirl]

I feel like this could've been done much easier with some basic trigonometry

[@fernandotaveira7573]

That was some aggressive message. Gezz they need to chill out. 🤣

[@SayounGaming]

Script writing at its peak 🛐

[@cuzimbanane]

although this was probably overkill, being able to interact with a logo is a thing i would appreciate. it should be more hidden and act as an easteregg

[@wlockuz4467]

I thought I was having the mandela effect when you pronounced your name as hyperflexed.

[@somarjaber1275]

You are the superpower

[@krateskim4169]

Awesome content

[@AJ-vy4yu]

My doctor gave me "superpowers", but all I really got was myocarditis

[@seveto3911]

I love it

[@mridxl]

This is a cinematic masterpiece (idk if i make sense). It's so good!

[@began2]

Even though you didnt got accepted, you earned HUGE respect from me 💪

[@_cryptr_5104]

make a bookmarklet (look it up)

[@viriv]

how about using box shadow for this?

[@Kyanoxia]

0:30 what's the font you're using there?

[@mirjalol49]

this channel is good, i am from UZBEKISTAN

[@shapelessed]

Hyperplexed be flexin'

[@vetronus1082]

Cool vid but I’m a little confused on why you didn’t just do this: Take an image and find the angle from the image position to the mouse position (just using atan2) and just use original position + cos(theta) * desired distance. Should be only a couple lines of code..? Something like this for a given layer: var theta = atan2(imgY-mouseY,imgX-mouseX); var newImgY = imgY+sin(theta)*desiredDist; var newImgX = imgX+cos(theta)*desiredDist; Please excuse any mistakes I’ve made, only gave this an ounce of thought.

[@Asty__]

I've always been fascinated (positively) by people who know maths solving problems in a few lines whereas someone else would have spent days just thinking about the logic behind it. Though sometimes it makes you be even more creative with how you find a solution. Thanks for sharing your potential solution and how math solves it

[@dannyman5751]

Thought he meant giving Netflix like fireballs or flight but this is cool too

[@wchorski]

would love to see some examples of cool interactions targeted for mobile, where devs can rely on hover.

[@thewebstylist]

YO first time seeing a vid of yours and Holy WOW 🎉⚡️❤️💥🥳👏🏻👏🏻👏🏻 Def wonder how much time talent and $ cost for a vid of this insane quality

[@Cookies-cv3nd]

I use coolers for the exact same reason !!

[@moritzdeiaco2798]

Please upload more Videos!!!

[@nitaki_]

While I definitely enjoy the new style of video, i think i still prefer the old videos, please bring them back

[@FatDawlf]

Just the other day I was experimenting with front end for a potential page on my site and made a similar effect to this, except the images weren't overlaid on top of each other and had to move independently.

[@floebro]

They could've made it an Easter egg where if u click on the logo it enables it and if u click it again it disables it

[@asyncasync]

Ah, so that's how you make... that thing.

[@gasparsigma]

Awesome video. Can you do some mobile design effects next? A lot of cool websites are only cool in desktop with parallax and stuff and in the mobile view its.. meh

[@Teshuva-j1b]

I just laughed so harh! This is so cool

[@satyarthtiwari7750]

newton of frontend

[@hz3192]

You could do one svg, copy it in the DOM programatically and set the fill attribute 😅

[@budosfasz]

Hi. there is an easier way. if the image is that simple, you need only 1 image. And box shadow. Box shadow have own color, and position. So change position in JS and thadaaaam :) Oh and you could change color too in JS while moving the mouse.

[@tysbc]

Their reaction is waaaay too serious haha

[@Lik4nGaming]

I'm always amazed by your videos, each one better than the last. My only question is how do you calculate the aspect-ratio property for the #logo?

[@tercmd]

1/1 (1:1) because the logo dimensions are equal

[@samisalama3033]

I would hire you... If I had a company.

[@bigs2469]

THEY GOT THE PWIMEAGEN 😱😱😱

[@igmtink]

To be honest I love all your works, that pure javascript because I'm not fan of library like I want also to recreate all animation that need the library into vanilla js, I would like to suggest if you can recreate the 'Embla Carousel Opacity' library in vanilla js :)

[@thegodfather3024]

My way of doing this would be making big invisible circle over the logo and add mouseOver listener to it. And use some math to transform it in opposite way of the mouse. You can make circle as big as you want. Bigger circle - bigger range for effect

[@bossysmaxx]

dude you always makek try those things

[@bozzhik]

Hi bro! cool video, I constantly enjoy your insanely cool videos, especially about web development. could you repeat this unreal effect in the new video, when you click on the search in the header on the site (airbnb) and the search goes out.

[@thelyricndbuzzz6657]

That end music tho

[@pu239]

hyperflexed!

[@illus1ve]

Enjoyable - but I have to ask. Why not just go with one SVG and recolour it using CSS? That would make it much more interchangable than it is now - and you could easily change or even expand the concept ad naseum.