This Website Theme Hasn't Been Perfected Since 1996
Hyperplexed Merch: bit.ly/HyperplexedStore
Watch as I show you how to recreate a masterfully executed magic wand effect from diagram.com.
CodePen: bit.ly/MagicWandReveal
Music licensed by Artlist:
Yehezkel Raz - Ten Lost Years
Yehezkel Raz - Autumn Wind
Bishara Haroni - Gnossienne No 1
Adrián Berenguer - Premiere
Пікірлер: 347
First ever Hyperplexed Merch drop! Link: bit.ly/HyperplexedStore Pick one up and help support the channel!
@BfdiFan567
Жыл бұрын
Cool!
@CodeF53
Жыл бұрын
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
@TonyMier
Жыл бұрын
You don't ship to Europe, sadly 😢
@Hyperplexed
Жыл бұрын
@@TonyMier sorry about that! I've enabled international shipping now. Let me know if you have any more issues!
@R3ap9r
Жыл бұрын
@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 ❤
@serversus17
Жыл бұрын
His knowledge and understanding is insane
@trashtrash2169
Жыл бұрын
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 KZread landscape. I find the fervent rubbing of creator's egos in modern KZread comment sections disgusting.
@ghassanjarbouh9860
Жыл бұрын
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).
@trashtrash2169
Жыл бұрын
@@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.
@ChaoticNeutralMatt
Жыл бұрын
@@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!
@Hyperplexed
Жыл бұрын
Thanks so much! You are too kind!!
@Oxygenationatom
Жыл бұрын
Actual money shared moment.
@know_how_games
Жыл бұрын
@@OxygenationatomCall the bank!
@renni9813
Жыл бұрын
@@know_how_gamescall the fire department, we just nuked the building
@airspeed_alive
Жыл бұрын
Niceee!
Just landed a UI/UX role, self-taught in 6 months watching your videos (amongst many others). I wanted to say thank you
@ethanp5215
Жыл бұрын
That's dope!
@justvic99
Жыл бұрын
A1 boi {^_^} I have a question. I get the designing bit, but the coding it in bit, how hard was it ?
@htrowii1090
Жыл бұрын
what other youtubers have you watched?
@HemstitchedIrony
Жыл бұрын
Mad impressive bro, I landed a full stack SWE role after a year, these videos help so much with reverse engineering designs
@mongolianstallion8274
Жыл бұрын
@@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!
that was the smoothest, sneakiest merch drop i've ever seen in a video. very nice
Your content is genuinely magical and youre a better teacher than most other UI youtubers. DEFINETELY getting myself a mousepad! Keep it up man
@nido84
6 ай бұрын
what does he have to do with a mousepad
Backwards engineering these is impressive as always, but also shows the care the initial developer showed implementing all this. Just beautiful
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.
Would have tried harder in math class if I knew math helped you create these type of animations.
@BboyKeny
Жыл бұрын
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.
@k_otey
Жыл бұрын
@@BboyKeny freedom is nice
@dustbinsavesyou8283
Жыл бұрын
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.
@jbritain
Жыл бұрын
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
@catchwest.combypuneetgrover
11 ай бұрын
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...
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!
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 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.
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
Your analytical eye for this kind of effects is amazing! I've learnt a lot from you,so thanks!
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!
All of your videos are extremely well made. I always look forward to your next video, amazing work!
These videos are insane. Thanks so much for sharing your thought process!
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 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.
Love your videos , your ability to deconstruct complex designs is fregging awsome
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.
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!
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
Amazing recreation and thought process!
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
The fact that I already know how it's done, and you still make it so entertaining to watch is really a miracle.
I love your explanation strategy ❤
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 :)
Amazing video, I like how you break down problems into smaller bits.
Lovely video. Much enjoyed with the soundtrack as well
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!
wonderful as always!
This is just top notch, amazing work!
Fantastic video! Thank you!
The quality and teaching of your videos is unmatched.
actually insanely good video to learn the basics. It gives a good overview of how a programmer should think to achieve their goals
you are a gem, thank you!
The Effects and Editing in this Video are unreal
Wow what a video!! Absolute Masterpiece 👏👏
Loved it! Thankyou so much!!
Amazing video. Props!
wonderfull as always
This is so cool, like genuinely very good.
insane art!!!
You are truly magical sir. Thank you so much for this exquisite videos and explanations!
Mind - blown! Again! Amazing! You, sir, are a genius!
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 ❤😂
The way you analyze things is just sweet.
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 😁
You are awesome dude! Not everyone can teach stuff so well.
A!B!S!O!L!U!T!E! masterclass teaching, as always. Every prospective teacher should learn from you 😘
truly amazing video!
You are a genius and highly undervalued
Thank you so mich for this.
wonderful as usual 🔥
The range slider part was a bit strange for me. Using its horizontal position to calculate the angle seemed like the most intuitive solution.
@melodyecho4156
Жыл бұрын
Same
@schubertludwig
Жыл бұрын
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.
@liyoks
Жыл бұрын
how? what is the code for it?
@mumujibirb
Жыл бұрын
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
@GabrielSoldani
Жыл бұрын
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 feels almost like meditation! 🤤 Really like to listen to your voice and watch you do such amazing masterpieces ☀
love your work keep it going
Great vid, great micepad, keep up the good work
awesome video, love the channel :)
You never fail to amaze us with your content!❤
You are my inspiration to keep trying to inspire more people to this universe, thank you man❤
Loved it
Sir I don't think it's legal to make such amazing videos!
These videos are art in motion, and the animations are creativity in motion!
Great teacher bro
Now that's one heck of a website
That's Beautiful
This is a very unique and high signal channel that breaks down UI development to a bunch of simple rules. Perfect.
Waking up and eating breakfast with a Hyperplexed video is just soo satisfying.
This is gold.
very great tutorial
amazing content 👏
What a video. Subscribed!
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
Another masterpiece from Hyperplexed!
Speechless 👌
Was going to leave the video as I didn't find the effect as amazing as you did, then you started playing Satie!
super well made video
perfect ad transition
Why is this so relaxing?
Man, I have to say that you never fail to blow my mind ❤
Amazing 🤩
superb ❤
amazing!!
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
The quality of this video is 🔥
If there is course and you going to teach this type of method I'll buy it, won't even think once ❤
Awesome 🎉🎉🎉
That's dope!
Amazing!!
Usually I don't leave any comments, but.. Mindblowing! Thanks for sharing the thinking process.
your merch site was the perfect opportunity to build like a really simple html basic text website haha
Bro you are a real magician 💜
You are a magician, cleary!
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.