Это видео недоступно.
Сожалеем об этом.
This Website Theme Hasn't Been Perfected Since 1996
HTML-код
- Опубликовано: 19 авг 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 RUclips landscape. I find the fervent rubbing of creator's egos in modern RUclips 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
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.
Backwards engineering these is impressive as always, but also shows the care the initial developer showed implementing all this. Just beautiful
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.
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!
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...
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.
A!B!S!O!L!U!T!E! masterclass teaching, as always. Every prospective teacher should learn from you 😘
The Effects and Editing in this Video are unreal
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.
These videos are art in motion, and the animations are creativity in motion!
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
This is a very unique and high signal channel that breaks down UI development to a bunch of simple rules.
Perfect.
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.
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!
This is so cool, like genuinely very good.
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!
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
perfect ad transition
You are a genius and highly undervalued
All of your videos are extremely well made. I always look forward to your next video, amazing work!
The quality and teaching of your videos is unmatched.
Now that's one heck of a website
Wow what a video!!
Absolute Masterpiece 👏👏
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.
you are a gem, thank you!
Your analytical eye for this kind of effects is amazing! I've learnt a lot from you,so thanks!
You always make the process look so effortless. I'm always in awe.
These videos are insane. Thanks so much for sharing your thought process!
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
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 ❤😂
Was going to leave the video as I didn't find the effect as amazing as you did, then you started playing Satie!
Usually I don't leave any comments, but.. Mindblowing! Thanks for sharing the thinking process.
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
The quality of this video is 🔥
This is just top notch, amazing work!
The way you analyze things is just sweet.
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 🤩
Love your videos , your ability to deconstruct complex designs is fregging awsome
Amazing recreation and thought process!
actually insanely good video to learn the basics. It gives a good overview of how a programmer should think to achieve their goals
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 !!
The fact that I already know how it's done, and you still make it so entertaining to watch is really a miracle.
Fantastic video! Thank you!
Amazing video. Props!
Why is this so relaxing?
Lovely video. Much enjoyed with the soundtrack as well
insane art!!!
here for my regular delivery of dope
wonderfull as always
Mind - blown! Again!
Amazing! You, sir, are a genius!
This feels almost like meditation! 🤤
Really like to listen to your voice and watch you do such amazing masterpieces ☀
Holy crap I can't imagine how much they spent to develop that website
That's Beautiful
I was lately losing interest in frontend engineering, until you uploaded this, now I'm falling in love with frontend again
wonderful as always!
I’m so sad I missed this merch drop - hope you let me dump money on you soon
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.
Gnossienne No 1 is a great piece, good taste
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 :)
your merch site was the perfect opportunity to build like a really simple html basic text website haha
This is gold.
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!
Loved it
Thank you so mich for this.
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!
Great vid, great micepad, keep up the good work
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.
I love your explanation strategy ❤
That was a smooth transition to your product 😂
wonderful as usual 🔥
You are a magician, cleary!
These mouspads looks insane.
They fire my 'satisfied' neurons
Amazing video, I like how you break down problems into smaller bits.
I know I won't ever be able to do what you do. But I love to watch you😂
truly amazing video!
Waking up and eating breakfast with a Hyperplexed video is just soo satisfying.
this is dope...🔥(pausing in between for the comment)
You are truly magical sir. Thank you so much for this exquisite videos and explanations!
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)."
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😂
Great teacher bro
awesome video, love the channel :)
Bro you are a real magician 💜
Love the use of Gnossienne No. 1 😅
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 😁
Another masterpiece from Hyperplexed!
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.
Loved it! Thankyou so much!!
You are awesome dude! Not everyone can teach stuff so well.
love your work keep it going
I was breathing so heavily during the wand explanation omg 😳
You never fail to amaze us with your content!❤
The nicest coding explanation I've ever see