This Website Theme Hasn't Been Perfected Since 1996
Vložit
- čas přidán 7. 09. 2024
- Hyperplexed Merch: bit.ly/Hyperpl...
Watch as I show you how to recreate a masterfully executed magic wand effect from diagram.com.
CodePen: bit.ly/MagicWa...
Music licensed by Artlist:
Yehezkel Raz - Ten Lost Years
Yehezkel Raz - Autumn Wind
Bishara Haroni - Gnossienne No 1
Adrián Berenguer - Premiere
First ever Hyperplexed Merch drop! Link: bit.ly/HyperplexedStore
Pick one up and help support the channel!
Cool!
While I don't need a mouse pad, I would love the opportunity to buy a sticker to support the channel and put on my laptop
You don't ship to Europe, sadly 😢
@@TonyMier sorry about that! I've enabled international shipping now. Let me know if you have any more issues!
@Hyperplexed why are the animation on the top 3 diffrent to the 5 on the bottom please fix ur merge store or maybe add a better transition to your top 3 items like the mouse pad moving to the position of the secound image
Not everyone with the ability to analyze and abstract complex UI elements feels comfortable sharing their thinking process, You're much appreciated hyperplexed ❤
His knowledge and understanding is insane
This is not complex. If you couldn't figure out what was happening before this guy said a single word, you are actually stupid. The solutions were all incredibly simple and only made use of very basic math, ones that you should have been able to find on your own. What you shouldn't be complimenting is the writing, it's dry and not inventive in any way, but the editing. The editing is decent enough in the current CZcams landscape. I find the fervent rubbing of creator's egos in modern CZcams comment sections disgusting.
Well if you didn't get the meaning behind the comment, I was complementing the altruistic aspect of his content, he wants to share a process of thinking that encourages the ones eager to learn and get better to try, and show them that what seems hard and complex is actually trivial if you abstract it and split it into smaller pieces and tackle it (divide and conquer).
@@ghassanjarbouh9860 Well okay now. That's just funny. Altruistic? Are you joking? My guess would be yes. You are playing into the role of being a total ass kisser now. This creator, for breaking down an incredibly basic UI element, must be the new messiah. I guess this is the total and honest truth now, huh? Even though nobody with even half a brain would consider that a complex UI element, he's so generous for breaking it down for the greater good. Let's all clap. Yeah, that'd be good. Let's all come together for a big round of applause. You suck.
@@trashtrash2169rns out not knowing something doesn't make you stupid. Good news too, or you would be included.
That confidence just irked me for a second, apologies. As for the rest of the comment, sure. It was well done.
An absolute masterpiece of a video as always!
Thanks so much! You are too kind!!
Actual money shared moment.
@@OxygenationatomCall the bank!
@@know_how_gamescall the fire department, we just nuked the building
Niceee!
Just landed a UI/UX role, self-taught in 6 months watching your videos (amongst many others). I wanted to say thank you
That's dope!
A1 boi {^_^}
I have a question. I get the designing bit, but the coding it in bit, how hard was it ?
what other youtubers have you watched?
Mad impressive bro, I landed a full stack SWE role after a year, these videos help so much with reverse engineering designs
@@justvic99 Learning how to code front end isn't that hard, the hard part is reaching the point where you can create things in your head, which requires practice and experience rather than watching tutorials and learning.
This one looked really daunting at first, but you broke it down so meticulously that I understood every last detail of it! Thank you, Hyperplexed!
Your content is genuinely magical and youre a better teacher than most other UI youtubers. DEFINETELY getting myself a mousepad! Keep it up man
what does he have to do with a mousepad
that was the smoothest, sneakiest merch drop i've ever seen in a video. very nice
Backwards engineering these is impressive as always, but also shows the care the initial developer showed implementing all this. Just beautiful
Would have tried harder in math class if I knew math helped you create these type of animations.
I don't think math can be fun in school. However math is incredibly fun outside of school 😄 where you can actually apply things and are free to puzzle around without having to worry about deadlines or punishment.
@@BboyKeny freedom is nice
You can relearn most of these things in a few hours to a few days. Sin cos graphs, basic trigonometry, mapping functions - it's really not that complex in terms in math. You just need to be able to think about what you require in a particular situation, once you have that figured out, actually executing the idea isn't hard at all.
Really, the maths itself here isn't hard, it's just basic multiplication and division, and an understanding of how sin waves work.
The hard part is knowing what maths you need to do
As said above the numeric or algebraic maths is basic here, the complex thing is programmatical maths like in Excel knowing what are the capabilities of pivot table or vlookup, but here you should also be prepared of contradicting lines of programs with each other, what can mess the other frontend graphics is sometimes unbelievable...
One small deatail that really sells the visual appeal is that the gradient of the wand shifts as well, emulating a light source in the middle of the screen. So if you animate that as well as the shadow drop direction, you really get the illusion of moving around an object above the content plane.
This was so beautifully done, the editing, music, your voice and the words chosen combined with the small animations with actual code... I had to stop half way and start this over again.
The range slider part was a bit strange for me. Using its horizontal position to calculate the angle seemed like the most intuitive solution.
Same
Agreed, that’s reasonable feedback. These videos are very sweet and helpful, but this example felt like it treated its viewers as a bit too dense imho.
how? what is the code for it?
also seems like that you could apply a bit of trig and get the position for the opacity slider, just get the angle between the horizontal and the card horizontal
The less intuitive but more natural-looking solution would be to make the wand rotate around a pivot point outside the viewport that also moves based on the mouse’s position, and use some basic trig.
This is a very unique and high signal channel that breaks down UI development to a bunch of simple rules.
Perfect.
I love these videos so much! The visual effects are stunning and some Eric Satie ontop makes just an amazing experience. Never stop uploading these, I'm always so excited whenever I get a new notification!
6:13 for this slider thing, the „proper“ way to do it is a lerp (linear interpolation) of the angle basically. And if you want to be fancy there are more options then just linear interpolation, then you want to look into bezier curves, then you could control also something like acceleration and have a smooth acceleration.
breaking things down like this (In IT and software engineering) is called -> computational thinking
"Computational thinking (CT) refers to the thought processes involved in formulating problems so their solutions can be represented as computational steps and algorithms.[1] In education, CT is a set of problem-solving methods that involve expressing problems and their solutions in ways that a computer could also execute.[2] It involves automation of processes, but also using computing to explore, analyze, and understand processes (natural and artificial)."
Please don't stop making these videos. As someone who's struggled bridging the gap between vanilla HTML/CSS/JS and more modern/complex web design - and who's felt like their only option was to learn some random UI library, your content felt like a breath of fresh air.
The Effects and Editing in this Video are unreal
I hope you understand how smart your are,your videos are from another dimension,when I receive the notification that you upload a new video I run to watch it on my tv
A!B!S!O!L!U!T!E! masterclass teaching, as always. Every prospective teacher should learn from you 😘
You make breaking down complex ideas into simple steps so easy! When I try doing this I end up going down the wrong path and also spending way too much time trying to conceptualize what is going on!
These videos are art in motion, and the animations are creativity in motion!
Was going to leave the video as I didn't find the effect as amazing as you did, then you started playing Satie!
You are honestly my hero for frontend dev. I'm a very new developer, just 2.5 years under my hat, and these videos are the most helpful resource I know for vanilla html/js/css. And they teach me how to think about UX. I love this.
I was lately losing interest in frontend engineering, until you uploaded this, now I'm falling in love with frontend again
I really like your work and want to thank you for sharing it with us. Also, the way how you deal with individual problems and break it down into smaller pieces is appliable at many lifetime situations. Always getting overwhelmed by seeing the whole big difficulty/issue, don't make it easy it solve. Keep up the genius work and be proud of your work.
When i saw your channel, I thought why this channel copied logo style from Fireship , now my mind was changed. Your videos are absolutely amazing 🤩
I just saw myself crying over that music, effect, voice, teaching. Please don't ever stop
Usually I don't leave any comments, but.. Mindblowing! Thanks for sharing the thinking process.
i just LOVE how you break down and explain things in simpler steps. You're really helping me slowly shift how i approach these situations and making me feel more versatile. Love the content dude
Absolutely love these! I'd love to see a behind the scenes of the editing though - it's so amazingly well done and it must take hours and hours!
your merch site was the perfect opportunity to build like a really simple html basic text website haha
i've been watching these typa videos for a while now and i must say, i've never seen one with such understanding and skill, big ups man
Please please please, make a course on front-end. PLEASE. GOD PLEASE.... lol No seriously, the world needs a recent, updated front-end course. I've done front-end for 3 years now, and you are still the only person I keep coming back to for learning and ideas. I love the mousepads, but really, make a $100 course or something. Thanks.
The fact that I already know how it's done, and you still make it so entertaining to watch is really a miracle.
actually insanely good video to learn the basics. It gives a good overview of how a programmer should think to achieve their goals
Now that's one heck of a website
Holy crap I can't imagine how much they spent to develop that website
I’m so sad I missed this merch drop - hope you let me dump money on you soon
The amount of a small details and interactions on the Diagram website is insane, it you look closer at the wand while moving it, you will notice that the gradient on it moves as well
Your analytical eye for this kind of effects is amazing! I've learnt a lot from you,so thanks!
All of your videos are extremely well made. I always look forward to your next video, amazing work!
I am not a front end developer, I am a Flutter Developer so i spent few hours trying to do it in Flutter and I succeed.
The quality and teaching of your videos is unmatched.
I'm surprised nobody has mentioned the reflections on the original website's wand, it actually moves and lightens or darkens depending on where in the frame it is. Not the biggest thing, but it adds a lot to the overall feel.
This is hands down one of the best videos I've ever seen on this platform... I mean even the mousepad segue was well done
Keep up the great work man I love it
I've just discovered your channel, and I have no words on how amazing your videos are. The animations and explanations are incredible. Keep it up !!
You always make the process look so effortless. I'm always in awe.
Discovered your channel recently, amazing level of quality, I'm talking fireship level. It's hard to get the right balance when making educational tech videos and keeping it visually and audibly interesting, but you've smashed it. Keep up the great work!
perfect ad transition
You are a genius and highly undervalued
I don't create the dope, i'm just a dope delivery guy @0:24 🤣🤣
These videos are insane. Thanks so much for sharing your thought process!
Just come accross the channel, really enjoyed this reverse engineer. always seems so complicated - but when its split into smaller managable chunks its totally do'able amazing job keep it up!
This is so cool, like genuinely very good.
These mouspads looks insane.
They fire my 'satisfied' neurons
My God this is amazing I have not seen a video in my life explained with such clarity and eloquence man I was really amazed man this is mad really really mad man like you said dope ❤😂
Amazing video, I like how you break down problems into smaller bits.
DUDE. EVERY TIME I WATCH YOUR CHANNEL, I GET MOTIVATED TO START BIG BRAINING WEB DEV. I HONESTLY HATED WEB DEV BEFORE COMING ACROSS YOUR CHANNEL. I LOVE YOU. THANKS.
Love your videos , your ability to deconstruct complex designs is fregging awsome
Waking up and eating breakfast with a Hyperplexed video is just soo satisfying.
The way you analyze things is just sweet.
I love how every commercial software website gives off vercel vibes now. what a pain. the creativity is gone
At last, someone recognised that he has a yt channel. We've been waiting for so long, hyperplex.
I absolutely love your channel, brilliant instruction and obviously amazing designs. I'm making an internal system for the company I'm at right now and you've helped me to think deeply about every front end choice and all of the small ways that I can make it much better. Now that I think about it, I need a mousepad at work :)
Gnossienne No 1 is a great piece, good taste
Great video! I'm not 100%, but I know Diagram is a huge lover of Webflow. All of this is possible with the Webflow animator, so chances are they most likely did all of this without code.
Just checked it, they offer nothing similar or even close... You need a programmer for such amazing websites or website animations, it's not a video or visual animations that can be accomplished by ai.
Amazing recreation and thought process!
here for my regular delivery of dope
Not gonna lie, I want to buy these products not because they look awesome but because I like you! Because of you I feel less like I suck at coding and learnt math stuffs too😂
The quality of this video is 🔥
You can avoid the multiplier by just having the transform origin being far below the wand. You still need to squash the vertical range
Hey, this is actually the first good video I have seen from this guy other than the nonsensical website overhauls. Probably gonna watch more.
Why is this so relaxing?
That was a smooth transition to your product 😂
Really interesting video, as always. I think I have really gotten better in front-end developer because I finally understand what are you talking about and not just wait to see the cool final result 😁
I was breathing so heavily during the wand explanation omg 😳
Wow what a video!!
Absolute Masterpiece 👏👏
This is just top notch, amazing work!
I know I won't ever be able to do what you do. But I love to watch you😂
In every video, I'm always baffled by how simple you make the solution seem
Lovely video. Much enjoyed with the soundtrack as well
This feels almost like meditation! 🤤
Really like to listen to your voice and watch you do such amazing masterpieces ☀
Didn't understand anything but was happy to get that explanation 😄
Mind - blown! Again!
Amazing! You, sir, are a genius!
you are a gem, thank you!
I love how you can just tell the person who originally made it is a game developer
Looks like to wand animation does not seems to work well on Safari web browsers. But I do love the how simple the code is and it works great on Chrome.
this is dope...🔥(pausing in between for the comment)
The song in the background is Chopin, nocturnes 55.
Love the use of Gnossienne No. 1 😅
Fantastic video! Thank you!
You are awesome dude! Not everyone can teach stuff so well.
Every frontend developer should know about this GOAT teacher
How do you edit so good…
Great vid, great micepad, keep up the good work
Amazing video. Props!
You are truly magical sir. Thank you so much for this exquisite videos and explanations!
I love the designs for the mousepads but I really want some poppins font for the hyperplexed text
That's Beautiful