Make Joyful Things – CSS-Tricks

Related Articles

Everything sucks right now. Things – usually – feel bad. Leaving aside the broader reality of a global epidemic and rampant social injustices, we observe the identity of the Internet platform, a free and open medium by the very nature of creative expression, chosen in collaboration with “Web 3.0” built on artificial scarcity and accelerated climate crisis.

Websites (mostly) Looks about the same. The multiplicity of frameworks, vector design tools, data-driven design and the necessity to maximize business value (oh dear, this has been capitalism all along) have led to a status quo of design by default. Sites that have their own UX language, consistent and mobile, which helps users quickly understand new sites, is great, but adopting that language is a compromise, and a delay in design is the cost.

What if it did not have to be this way? What if we decided to create joy in our work? After all, in a very dark time for many, making someone smile or laugh with your work is a special thing. Shouldn’t we try to do that if we can?

“Okay, you got me, but how?” I hear you asking.

Well, so:

The internet community is bursting with people who create joy in their work. Let’s see how they do it.

Unexpected interactions

Did you know that the web is an interactive medium? I know, strange, Right? People get “O neat” Feel when something responds to them. Cats drop things off the shelves, people hover and press things. This is simple biology (probably; I’m not a biologist).

Cassie Evans Introduces the “virtuoso” in SVG (the V represents virtuoso) (it does not) with this animated portrait on its personal website. I definitely admire how it follows the cursor naturally, and I love how its expression changes when you hover over an interactive element.

I loved this little levitation interaction Josh Comeothe site of. I thought there might be a hidden interaction in this 3D illustration, but I was surprised to see the background responding to my marker. As far as I can tell, it does not serve a “purpose” and it cost me some precious moments that I could have spent engaging in content, but it made me smile.

This little pop-up pull tab in the shape of a book Lynn FisherMaxim’s website. I’m sure a click or scroll will be easier to implement and do the job, but it’s special. It’s different, it’s unexpected. its fun. all only The iteration of her site is excellent, so I recommend you check it out archives.


We have finally reached a place where nap movement in design systems and are considered (almost) as important as your fonts and colors. Even so, we can still use animation to bring up an orderly interaction for joy.

Another builder from Josh Cuomo: this little interaction on the Like button of his blog. It may just be a symbol ❤️, sure, but it’s full of delightful personality, with a lot of attraction and secondary action. The bouncy relief curve and exuberant expression create attraction, while the +1 and confetti at the end add some blessed secondary action. It even enhances the experience because it encourages people to press that little button. Go try it, there are also some wonderful little sound effects!


Between WebGL and CSS 3D, pushing the web beyond two dimensions has been possible for ages. The good news is that it’s still a special skill and sometimes a sore ass, so it’s still rare. Even after “3D illustration” became All the rage, Interactive 3D elements are still a great way to instill some personality. Is a happy site throughout, but I especially like the revolving product images you get on levitation.

Web Crypt “Henry” “Drouches” Adds some personality with these animated 3D flags that appear when hovering over his case. It uses noise texture to move vertices in the plane, which creates this charming and soothing effect.

Do not make it a list, let’s finish it

  • Break the rules!
  • Use weird colors!
  • Put animations and interactions where they do not belong!
  • Use sound effects!

The web is as much a cultural object as it is a platform to trick people into looking at ads. We have the power to make people happy from our work; To share love in the literal sense.

Understand that prioritizing joy will come at a price. Like anything else related to creating things, it’s a compromise. It can cause someone’s computer fans to turn on, which will cause some people – who they are No In the pocket of the big fan – very upset. It may be slower, and less usable for people on slower devices. Creating joy will take time that you can not waste on maximizing key metrics and synergy of upward flooding; Reducing the negative effects of these compromises will eat away for a long time. There is a reason that almost all of the examples above are from personal and not large sites Brands, after all.

What if making someone smile is worth it? What if it’s worth the cost? In many ways, we live in crappy times. Worth giving up a little to take advantage of the day for someone.



Please enter your comment!
Please enter your name here

Popular Articles