This Website Theme Hasn't Been Perfected Since 1996
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2023
- 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
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 TH-cam landscape. I find the fervent rubbing of creator's egos in modern TH-cam 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
@@justanotherv.n 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
what does he have to do with a mousepad
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.
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!
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
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...
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!
These videos are insane. Thanks so much for sharing your thought process!
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'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
Backwards engineering these is impressive as always, but also shows the care the initial developer showed implementing all this. Just beautiful
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
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.
This is just top notch, amazing work!
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 recreation and thought process!
Lovely video. Much enjoyed with the soundtrack as well
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
I love your explanation strategy ❤
Wow what a video!!
Absolute Masterpiece 👏👏
The quality and teaching of your videos is unmatched.
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!
actually insanely good video to learn the basics. It gives a good overview of how a programmer should think to achieve their goals
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!
wonderful as always!
Amazing video, I like how you break down problems into smaller bits.
This is so cool, like genuinely very good.
you are a gem, thank you!
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!
You are truly magical sir. Thank you so much for this exquisite videos and explanations!
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.
Fantastic video! Thank you!
Amazing video. Props!
The fact that I already know how it's done, and you still make it so entertaining to watch is really a miracle.
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
Mind - blown! Again!
Amazing! You, sir, are a genius!
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 😁
wonderfull as always
The way you analyze things is just sweet.
This feels almost like meditation! 🤤
Really like to listen to your voice and watch you do such amazing masterpieces ☀
You never fail to amaze us with your content!❤
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 ❤😂
You are awesome dude! Not everyone can teach stuff so well.
truly amazing video!
love your work keep it going
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.
Loved it! Thankyou so much!!
You are a genius and highly undervalued
You are my inspiration to keep trying to inspire more people to this universe, thank you man❤
Great vid, great micepad, keep up the good work
Thank you so mich for this.
A!B!S!O!L!U!T!E! masterclass teaching, as always. Every prospective teacher should learn from you 😘
insane art!!!
wonderful as usual 🔥
awesome video, love the channel :)
Sir I don't think it's legal to make such amazing videos!
Loved it
Man, I have to say that you never fail to blow my mind ❤
That's Beautiful
This is a very unique and high signal channel that breaks down UI development to a bunch of simple rules.
Perfect.
Another masterpiece from Hyperplexed!
amazing content 👏
Waking up and eating breakfast with a Hyperplexed video is just soo satisfying.
This is gold.
Amazing 🤩
Why is this so relaxing?
amazing!!
Amazing!!
In every video, I'm always baffled by how simple you make the solution seem
superb ❤
What a video. Subscribed!
Awesome 🎉🎉🎉
Great teacher bro
That's dope!
Speechless 👌
The quality of this video is 🔥
super well made video
I know I won't ever be able to do what you do. But I love to watch you😂
Usually I don't leave any comments, but.. Mindblowing! Thanks for sharing the thinking process.
Bro you are a real magician 💜
Was going to leave the video as I didn't find the effect as amazing as you did, then you started playing Satie!
very great tutorial
Now that's one heck of a website
If there is course and you going to teach this type of method I'll buy it, won't even think once ❤
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.
Genius !!
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
wrong title i would say, but still great content as usual! thank you and keep'em coming
perfect ad transition
Wow! Great