user profile image

WebGL experiment using ThreeJS. Move the fan and press to make wind, the lion will surely appreciate.


  1. Feature request for @chriscoyier - the ability to give 1000 hearts on a pen please so I can put them in this basket

  2. Thank you so much @rachsmith, Even if not technically possible, I gladly receive all your hearts :)

  3. Wow! Amazing work!

  4. Oh, my goodness!

    How you manage to put this much realistic emotion in a collection of cubes, I just don't understand. The face when you stop blowing the fan is just like a cat when you stop scratching its chin & it's not finished yet!

  5. This is way too much fun. TOO MUCH! SO FLUFFY! SO CUTE!

  6. thank you @AmeliaBR :) Actually it's 5% time modelling the lion and 95% trying to find the right key expressions. Surprisingly, the fact that everything is scripted, a lot of the intermediate expressions are generated automatically and I magically discover them while coding. It's a great feeling to see things happen "by accident" and sometimes work naturally.

  7. @Yakudoo Have you ever written tutorials on this kind of thing? Would love to try this a bit more in depth. Last time I attempted I ended up with a cube mesh.

  8. This made my day, so much joy in your work!

  9. You made me smile, so you get a heart.

  10. @grayghostvisuals Not yet, but I'll think seriously about it. It could be fun.

  11. Man. This is sick. I LOVE IT!

  12. This is AMAZING and you should just pat yourself on the back and someone should give you a margarita. Fantastic.

  13. Love it love it love it love it.

  14. Absolutely awesome; Love it. There's just one small thing left to do before you win the internet. Use user-select: none and turn on autoprefixer.

  15. just add this to #instructions and this will be perfect :) Congrats! Great Job! :D

    user-select: none; -webkit-user-select: none; -moz-user-select: none; cursor: default;

  16. daGo @dagolinuxoid on


  17. Can not get enough of these dude, so freaking cool. Right down to colour, style, concept, and your characters expression's and behaviour is so on point. Would you be willing to share a secret? I was wondering if you design the characters in another tool first and export the basics of the 3d markup, or do you just jump straight into typing out coordinates?

  18. <3<3<3<3<3<3

  19. A serious candidate for the pen of the year :D The best I've seen in a long time. Brilliant work! :D

  20. Truly original, Amazing, Love It and the list goes on :-)

  21. @theaftermath87 @gpyne done :) thank you guys for the tip @peepshow I don't use any 3D software, I directly create the meshes in the code and tweak them until they look like a character. That also means that sometimes a rocket ends up to be a fish, and the whole animation takes an unexpected direction even for me. Regarding the colors, I always pick them from a picture or illustration I select before I start coding, according to my mood. The low poly style is just induced by the modelling process, I only use basic meshes and try to do as much as possible with cubes and sometimes cylinders as they are easier to distort (the vertices are arranged in a more comprehensible way than a sphere)

  22. @boncutdan @zerospree @dagolinuxoid @AllThingsSmitty @sdras @XavaSoft @coreyroth @ImagineProgramming @slstudios @jackrugile thank you all for the kind words. Never expected to receive so much love when started these animations!

  23. daGo @dagolinuxoid on

    By the way, thanks to Chris for his tweet about that ^_^

  24. @Yakudoo really? Again? I am no words today :) :clap :clap :clap :clap :clap :clap

  25. Super Cuteee

  26. Soo soo soo sooo soo awesome. speechless.

  27. @Yakudoo I agree with everyone else here, and I'll add that you're work is wonderfully artistic! You managed to make hard-edged cubes seem alive and cuddly... Not an easy task :)

  28. GREAT JOB!!!!!!

  29. Great job mate!!!

  30. This is so awesome!!!!! aaaa love it!!! really nice work man!!! I will like a tutorial as well or something similar... thanks for sharing

  31. > I directly create the meshes in the code and tweak them until they look like a character. That also means that sometimes a rocket ends up to be a fish, and the whole animation take an unexpected direction even for me.

    Thanks for the insight, I do love the approach.

    So essentially you're creating short stories by sculpting on a canvas and then animating the scene, to create an interactive installation?


    This is one heck of a mashup of artistic disciplines. lol

    The collection deserves a real world gallery exhibition. (´ー`)y-~~

  32. Wow! I am just starting webdev and it's amazing to see what possibilities are out there. Fantastic job!

  33. Che @code_dependant on

    Woah man, this is truly awesome stuff!

  34. @peepshow Basically I always start with an idea in mind of course, but if something better or more inspiring comes during the coding I give it a chance. As this is not a commissioned work but simply a way to explore ThreeJs, I don't have any constraint, and that's pure pleasure :)

  35. This is so dope. Excellent pen!

  36. This is Sheer Awesomeness. Love the way you have implemented it Tips Hat

  37. super Cuuuuuuute !!!!!

  38. Pure awesomeness..!!!!

  39. Absolutely awesome! Smooth as butter, looks really great!

  40. This is absolutely fantastic!

  41. This is by far one of the best pens I have seen in a while! Great job!

  42. Makes me want to go pet my dog. Love it!

  43. Again, absolutely LOVE your work! :) Loved the Paranoid vs shy birds too, one of my all time fav's.

    Just. Awesome.

  44. Great code !

  45. Beautiful work! Love it :)

  46. Man, its awesome!!!

  47. It's absolutely fantastic! You're work is entertaining and inspiring! : D

  48. SOOOOO Cute... (^_^) . Awesome!

  49. This is sublime.

  50. dafuq, is this Disneyland? very awesome

  51. I absolutely love this., Would you be okay with me taking this (including the credits of course) to my website?

  52. @Robino thank you! But it would be much better for everybody if you take it as a starting point to make something new/different/more personal instead of just putting it in your website ;)

  53. Will try to for sure. I really enjoy your work. I think it is astonishing. Keep up with that.

  54. Award for most fun and playful codePen, this could entertain so many people as an app

  55. It's so cute!!! ✪ω✪

  56. Love this.

  57. @SaschaSigl thanks! and the article seems very interesting. I bookmarked it.

  58. Way too awesome. A Cool Cat.

  59. clever idea & super well executed! nice work!

  60. Is this still working correctly? I get errors in the console. Not the first threejs demo which stopped working for me. I'm on Linux Mint Chome Version 48.0.2564.79 beta (64-bit)

    Would be interesting to know if this is just me or if other people have the same problem.

  61. @escapedcat Hi, it currently works well here :) I'm not sure about it, but it seems that linux + some os versions doesn't like WebGL.

  62. @yakudoo ok, that's cool. just wanted to check. works fine in firefox for me. apart from that, you do exceptional great stuff! :)

  63. So, I was just watching a video demonstration of the new Leap Motion software and I noticed a lion in the background and thought "hmmmm that seems familiar, where have I seen that before?" Then I remembered this pen!


  64. The first time I see such a beautiful code for threejs. Can I have an example? )

  65. made my mood )))))))

  66. cute app

  67. Awesome app!

    Didnt work on mobiles though, need to add isBlowing = true; in handleTouchMove to make this work on my android phone

  68. This makes me so happy. Great job!!!

  69. So much personality in a few polygons!

  70. so cool! i like it!

  71. Really cool! Any "license" on the code? I would like to use and adapt it :)

  72. 778010742 @GuaPiXiaoShuaiMao on

    I am a student, you show me a amazing coding world. Love it!

  73. Great work! It is especially striking that such a "wooden" object has such expressive emotions! So, thank you!

  74. amazing!!!! <3!!!!!!!!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.