🌟 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! 🌈🚀
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 :)
@@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.
@@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
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.
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
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?
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 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!
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...
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.
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.
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 ;)
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.
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.
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
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.
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
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
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 :)
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
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
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.
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.
Check out Frontend Masters! bit.ly/FrontendMastersTrial
Merch: hyperplexed.store
;)
Here to give my opinion. Please show more code. not complaining though, good video.👍👍
amazing ad i bought all the courses
we need more animations on the website
for more dopamine
MORE MORE MOREEEEE
🌟 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! 🌈🚀
Man, I know your content is always top tier but getting sponsorship just sets you flying to the moon 🚀😂. Congrats!
Bro if they don't use this they're losing on it, it looks so good
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 :)
@@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.
That's what the logo in the tab is for
@@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.
@@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
Your editing skill is actually insane! Everything was so smooth. Also the choice of background music and timing them was also spot on.
Bro, your videos just got an absolutely fascinating auditive upgrade. These sound effects rock, dude! Keep it going!
This style of teaching is really great 👏
Easily one of the best channels on UA-cam. The presentation, everything is just amazing!
I’ve been watching these videos for a decent bit and the quality has improved so much. Good work!
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.
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
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
@@insideme9414 css lore goes hard
This logo effect looks great!
Can't imagine how much effort you have put for this video🤯
Your so talented, I love your channel man!
The most cliche ending... Loved it!
Dude the personality is too strong and you put so professionalism in your video... and damn that Deeeeeeeeeep voice 💕
For some reason, I'm hearing the Grinch. 😂
you showed us a new way to make tutorials. you are amazing
I don't know what's the most amazing : Your design ideas or you video editing skills.
I'm sure someday they'll consider using it
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?
Easing function or 1 - 1/(x+1) could work
you are an artist sir !
ooh ol, that was fun!
the editing on this looks so so so good!!!
I love Ur editing man and your unique style of content mixed with humor.
your videos are always great!
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.
that would need some extra processing, with fix data we get less memory ussage, or at least my Student brain thinks that
@@juandavidguarnizogutierrez4566 no. now it's just added unnecessary network call for other 4 images.
@@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!
@@ScoutOW2 I agree with you, It would definitely take up less storage since its only one image.
@@juandavidguarnizogutierrez4566 Memory usage is definately lower when using the same image - it has to keep 5 images loaded compared to 1.
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...
You the man. Always such cool stuff...
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.
Fire tutorial. I adore it and cant wait to see all the magic you do ✨🔥🎇🎇
Do more "website" (they're really apps) redesign videos, I LOVE them.
Ayoo the editing on this video made me forget i was watching hyperplexed, good job yo
Dude learning never so fun 😂, a masterpiece in terms of story telling and accuracy.
Now excuse me imma watch your other videos
That message at the end imply that you pissed off Career Puck more then once 😂
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.
1:30 - Stop I beg you... It's perfect
that logo is pulled straight from the 90s
I hope frontend masters never run out of money so they could sponsor you
I'll be so happy for you when you get to the million subscribers.
Your videos are so good
its funny seeing people in the comments think the message at the end of the video was real lol
Idea. Use hsl and pull the saturation into it as you move the mouse away
Awesome content. Thanks for the videos!
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 ;)
Man I'm not a programmer but i love and enjoy your videos.keep it up 🔥🤟🏻
Damn this is high quality video
For the first time, I didn't skip an ad 😂😂😂
I’m only mad cause I can’t make videos like this 😏
So educational and still enjoyable and funnyxD
Yea... And Redbull gives me wings
I thought I was having the mandela effect when you pronounced your name as hyperflexed.
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.
Yay, I want it in the site now
That was some aggressive message. Gezz they need to chill out. 🤣
That end music tho
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... 😢
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.
Awesome content
You are the superpower
I love it
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.
damn this was good until the elon musk part
@@asher3311 what should I write instead?
Please upload more Videos!!!
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
newton of frontend
This video sounds more sponsored by CareerPuck than FrontendMasters.
I feel like this could've been done much easier with some basic trigonometry
I use coolers for the exact same reason !!
Script writing at its peak 🛐
make a bookmarklet (look it up)
Thought he meant giving Netflix like fireballs or flight but this is cool too
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.
Most of them are just unnecessary show offs
Ah yes this is why the internet is getting slower, websites need to track our mouse position 24/7 to move their logos accordingly
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.
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
would love to see some examples of cool interactions targeted for mobile, where devs can rely on hover.
dude you always makek try those things
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
You could do one svg, copy it in the DOM programatically and set the fill attribute 😅
Have you played Persona5? That game gives me so many cool ideas of web design stuff.
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
Hyperplexed be flexin'
Amazing as always, just wonder why you used 5 svg files instead of just changing the color of one with html/css
hyperflexed!
Their reaction is waaaay too serious haha
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
I would hire you...
If I had a company.
THEY GOT THE PWIMEAGEN 😱😱😱
this channel is good, i am from UZBEKISTAN
hi hyper!
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 :)
Ah, so that's how you make... that thing.
While I definitely enjoy the new style of video, i think i still prefer the old videos, please bring them back
lol. You awesome bro
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
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
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.
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.
Wow!
My doctor gave me "superpowers", but all I really got was myocarditis
they are all right tbh
I NEED A TUTORIAL
I just laughed so harh! This is so cool
Are you @SHADOWFRAX ?