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

  • @Hyperplexed
    @Hyperplexed Жыл бұрын

    First ever Hyperplexed Merch drop! Link: bit.ly/HyperplexedStore Pick one up and help support the channel!

  • @BfdiFan567

    @BfdiFan567

    Жыл бұрын

    Cool!

  • @CodeF53

    @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

    @TonyMier

    Жыл бұрын

    You don't ship to Europe, sadly 😢

  • @Hyperplexed

    @Hyperplexed

    Жыл бұрын

    ​@@TonyMier sorry about that! I've enabled international shipping now. Let me know if you have any more issues!

  • @R3ap9r

    @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

  • @ghassanjarbouh9860
    @ghassanjarbouh9860 Жыл бұрын

    Not everyone with the ability to analyze and abstract complex UI elements feels comfortable sharing their thinking process, You're much appreciated hyperplexed ❤

  • @serversus17

    @serversus17

    Жыл бұрын

    His knowledge and understanding is insane

  • @trashtrash2169

    @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

    @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

    @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

    @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.

  • @andrewwoan
    @andrewwoan Жыл бұрын

    An absolute masterpiece of a video as always!

  • @Hyperplexed

    @Hyperplexed

    Жыл бұрын

    Thanks so much! You are too kind!!

  • @Oxygenationatom

    @Oxygenationatom

    Жыл бұрын

    Actual money shared moment.

  • @know_how_games

    @know_how_games

    Жыл бұрын

    ​@@OxygenationatomCall the bank!

  • @renni9813

    @renni9813

    Жыл бұрын

    @@know_how_gamescall the fire department, we just nuked the building

  • @airspeed_alive

    @airspeed_alive

    Жыл бұрын

    Niceee!

  • @sudhitheboat
    @sudhitheboat Жыл бұрын

    Just landed a UI/UX role, self-taught in 6 months watching your videos (amongst many others). I wanted to say thank you

  • @ethanp5215

    @ethanp5215

    Жыл бұрын

    That's dope!

  • @justvic99

    @justvic99

    Жыл бұрын

    A1 boi {^_^} I have a question. I get the designing bit, but the coding it in bit, how hard was it ?

  • @htrowii1090

    @htrowii1090

    Жыл бұрын

    what other youtubers have you watched?

  • @HemstitchedIrony

    @HemstitchedIrony

    Жыл бұрын

    Mad impressive bro, I landed a full stack SWE role after a year, these videos help so much with reverse engineering designs

  • @mongolianstallion8274

    @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.

  • @lix2146
    @lix2146 Жыл бұрын

    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!

  • @pauldudley1273
    @pauldudley1273 Жыл бұрын

    that was the smoothest, sneakiest merch drop i've ever seen in a video. very nice

  • @naughtyninja764
    @naughtyninja764 Жыл бұрын

    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

    @nido84

    6 ай бұрын

    what does he have to do with a mousepad

  • @smoens
    @smoens Жыл бұрын

    Backwards engineering these is impressive as always, but also shows the care the initial developer showed implementing all this. Just beautiful

  • @PostMeridianLyf
    @PostMeridianLyf Жыл бұрын

    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.

  • @coolingvexation3226
    @coolingvexation3226 Жыл бұрын

    Would have tried harder in math class if I knew math helped you create these type of animations.

  • @BboyKeny

    @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

    @k_otey

    Жыл бұрын

    @@BboyKeny freedom is nice

  • @dustbinsavesyou8283

    @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

    @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

    @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...

  • @Hxttrick
    @Hxttrick Жыл бұрын

    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!

  • @NFSHeld
    @NFSHeld Жыл бұрын

    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.

  • @PicSta
    @PicSta Жыл бұрын

    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.

  • @christopheviens6468
    @christopheviens64689 ай бұрын

    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

  • @tsharkgamerbr
    @tsharkgamerbr Жыл бұрын

    Your analytical eye for this kind of effects is amazing! I've learnt a lot from you,so thanks!

  • @brendanashmore
    @brendanashmore Жыл бұрын

    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!

  • @WhereDidItAllGoWrong
    @WhereDidItAllGoWrong Жыл бұрын

    All of your videos are extremely well made. I always look forward to your next video, amazing work!

  • @PoorlySoup
    @PoorlySoup Жыл бұрын

    These videos are insane. Thanks so much for sharing your thought process!

  • @KevnReid
    @KevnReid Жыл бұрын

    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!

  • @hassanbatrek9850
    @hassanbatrek9850 Жыл бұрын

    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

  • @cristiantalos4042
    @cristiantalos40429 ай бұрын

    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 !!

  • @TorpisoulYT
    @TorpisoulYT Жыл бұрын

    You always make the process look so effortless. I'm always in awe.

  • @harshnarayan7656
    @harshnarayan7656 Жыл бұрын

    Love your videos , your ability to deconstruct complex designs is fregging awsome

  • @gownerjones
    @gownerjones Жыл бұрын

    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.

  • @Cromzz
    @Cromzz Жыл бұрын

    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!

  • @hale_end719
    @hale_end719 Жыл бұрын

    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

  • @JanasV
    @JanasV Жыл бұрын

    Amazing recreation and thought process!

  • @lucastejero6547
    @lucastejero6547 Жыл бұрын

    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

  • @budgetarms
    @budgetarms10 ай бұрын

    The fact that I already know how it's done, and you still make it so entertaining to watch is really a miracle.

  • @adityagusain1563
    @adityagusain1563 Жыл бұрын

    I love your explanation strategy ❤

  • @ethansc
    @ethansc Жыл бұрын

    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 :)

  • @ToyohisaTV
    @ToyohisaTV Жыл бұрын

    Amazing video, I like how you break down problems into smaller bits.

  • @just_jimmy
    @just_jimmy11 ай бұрын

    Lovely video. Much enjoyed with the soundtrack as well

  • @RedhwanNacef
    @RedhwanNacef11 ай бұрын

    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!

  • @felipegutierrez2944
    @felipegutierrez2944 Жыл бұрын

    wonderful as always!

  • @gocasimiro
    @gocasimiro Жыл бұрын

    This is just top notch, amazing work!

  • @zeydtc
    @zeydtc10 ай бұрын

    Fantastic video! Thank you!

  • @bartolol
    @bartolol Жыл бұрын

    The quality and teaching of your videos is unmatched.

  • @technofreak39
    @technofreak39 Жыл бұрын

    actually insanely good video to learn the basics. It gives a good overview of how a programmer should think to achieve their goals

  • @fev4
    @fev4 Жыл бұрын

    you are a gem, thank you!

  • @pitvo4320
    @pitvo4320 Жыл бұрын

    The Effects and Editing in this Video are unreal

  • @theUnmeshraj
    @theUnmeshraj Жыл бұрын

    Wow what a video!! Absolute Masterpiece 👏👏

  • @ai_for_good
    @ai_for_good Жыл бұрын

    Loved it! Thankyou so much!!

  • @N1rOx
    @N1rOx Жыл бұрын

    Amazing video. Props!

  • @TarunYadav-dp1id
    @TarunYadav-dp1id Жыл бұрын

    wonderfull as always

  • @thundergamergd
    @thundergamergd3 ай бұрын

    This is so cool, like genuinely very good.

  • @naranyala_dev
    @naranyala_dev Жыл бұрын

    insane art!!!

  • @ericlunadev
    @ericlunadev Жыл бұрын

    You are truly magical sir. Thank you so much for this exquisite videos and explanations!

  • @MarshallSC1
    @MarshallSC1 Жыл бұрын

    Mind - blown! Again! Amazing! You, sir, are a genius!

  • @chukwuemekaorji9331
    @chukwuemekaorji93316 ай бұрын

    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 ❤😂

  • @ThePowerRanger
    @ThePowerRanger Жыл бұрын

    The way you analyze things is just sweet.

  • @kristianhristakiev9364
    @kristianhristakiev9364 Жыл бұрын

    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 😁

  • @apvarun
    @apvarun Жыл бұрын

    You are awesome dude! Not everyone can teach stuff so well.

  • @carlt.8266
    @carlt.8266 Жыл бұрын

    A!B!S!O!L!U!T!E! masterclass teaching, as always. Every prospective teacher should learn from you 😘

  • @nro337
    @nro337 Жыл бұрын

    truly amazing video!

  • @decentraplace
    @decentraplace Жыл бұрын

    You are a genius and highly undervalued

  • @ativerc
    @ativerc Жыл бұрын

    Thank you so mich for this.

  • @peteremad5228
    @peteremad5228 Жыл бұрын

    wonderful as usual 🔥

  • @jtris01
    @jtris01 Жыл бұрын

    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

    @melodyecho4156

    Жыл бұрын

    Same

  • @schubertludwig

    @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

    @liyoks

    Жыл бұрын

    how? what is the code for it?

  • @mumujibirb

    @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

    @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.

  • @JuliLukiKon
    @JuliLukiKon Жыл бұрын

    This feels almost like meditation! 🤤 Really like to listen to your voice and watch you do such amazing masterpieces ☀

  • @danielzuzic7054
    @danielzuzic7054 Жыл бұрын

    love your work keep it going

  • @008kevin
    @008kevin Жыл бұрын

    Great vid, great micepad, keep up the good work

  • @jimmynguyen5361
    @jimmynguyen5361 Жыл бұрын

    awesome video, love the channel :)

  • @ninadsutrave
    @ninadsutrave Жыл бұрын

    You never fail to amaze us with your content!❤

  • @rachidratilal
    @rachidratilal Жыл бұрын

    You are my inspiration to keep trying to inspire more people to this universe, thank you man❤

  • @r_atharv11
    @r_atharv118 ай бұрын

    Loved it

  • @RamiGB
    @RamiGB Жыл бұрын

    Sir I don't think it's legal to make such amazing videos!

  • @AllOfTheAboveChannel
    @AllOfTheAboveChannel21 күн бұрын

    These videos are art in motion, and the animations are creativity in motion!

  • @TheBhumbak
    @TheBhumbak11 ай бұрын

    Great teacher bro

  • @techny3000
    @techny300010 ай бұрын

    Now that's one heck of a website

  • @eytorlima01
    @eytorlima01 Жыл бұрын

    That's Beautiful

  • @tnvmadhav2442
    @tnvmadhav2442 Жыл бұрын

    This is a very unique and high signal channel that breaks down UI development to a bunch of simple rules. Perfect.

  • @woistdasniveau8290
    @woistdasniveau8290 Жыл бұрын

    Waking up and eating breakfast with a Hyperplexed video is just soo satisfying.

  • @DeltaWing64
    @DeltaWing646 ай бұрын

    This is gold.

  • @NOTHING-en2ue
    @NOTHING-en2ue11 ай бұрын

    very great tutorial

  • @razibhatti5293
    @razibhatti5293 Жыл бұрын

    amazing content 👏

  • @berkaykurkcu
    @berkaykurkcu Жыл бұрын

    What a video. Subscribed!

  • @akshatsamdani
    @akshatsamdani Жыл бұрын

    I know I won't ever be able to do what you do. But I love to watch you😂

  • @Josh_DoesStuff
    @Josh_DoesStuff Жыл бұрын

    In every video, I'm always baffled by how simple you make the solution seem

  • @orazgulcayew2189
    @orazgulcayew2189 Жыл бұрын

    Another masterpiece from Hyperplexed!

  • @SamyarBorder
    @SamyarBorder Жыл бұрын

    Speechless 👌

  • @handle_unknown
    @handle_unknown10 ай бұрын

    Was going to leave the video as I didn't find the effect as amazing as you did, then you started playing Satie!

  • @thedude69420
    @thedude69420 Жыл бұрын

    super well made video

  • @guwuber_
    @guwuber_6 ай бұрын

    perfect ad transition

  • @pancakesandwaffles7196
    @pancakesandwaffles719611 ай бұрын

    Why is this so relaxing?

  • @Salloom99
    @Salloom99 Жыл бұрын

    Man, I have to say that you never fail to blow my mind ❤

  • @andreasWebDev
    @andreasWebDev Жыл бұрын

    Amazing 🤩

  • @yadhusanil7077
    @yadhusanil7077 Жыл бұрын

    superb ❤

  • @MuhAddinMalik
    @MuhAddinMalik Жыл бұрын

    amazing!!

  • @TheMrLucasP
    @TheMrLucasP Жыл бұрын

    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

  • @humblepeanut
    @humblepeanut Жыл бұрын

    The quality of this video is 🔥

  • @knightullas6946
    @knightullas6946 Жыл бұрын

    If there is course and you going to teach this type of method I'll buy it, won't even think once ❤

  • @tejasnikam3287
    @tejasnikam3287 Жыл бұрын

    Awesome 🎉🎉🎉

  • @waleedkhalid4514
    @waleedkhalid4514 Жыл бұрын

    That's dope!

  • @tusharkuntawar6170
    @tusharkuntawar6170 Жыл бұрын

    Amazing!!

  • @TheLaneMinecraft
    @TheLaneMinecraft11 ай бұрын

    Usually I don't leave any comments, but.. Mindblowing! Thanks for sharing the thinking process.

  • @karsonchristensen8045
    @karsonchristensen804510 ай бұрын

    your merch site was the perfect opportunity to build like a really simple html basic text website haha

  • @Shaheer-xs5os
    @Shaheer-xs5os11 ай бұрын

    Bro you are a real magician 💜

  • @saschab.5154
    @saschab.515411 ай бұрын

    You are a magician, cleary!

  • @shaalan5672
    @shaalan5672 Жыл бұрын

    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.