Hi, I'm Adir

A lightweight JavaScript library that allows your animations to shine with homemade native CSS Motion Blur and Motion Fade while keeping your code clean and your CSS animations smooth.

A Mac app that plays Lottie Animations.
On your own Mac.

This library allows you to show visually on the screen the keys you press on your keyboard.

Notes app that respects your privacy, it keeps everything local on your device.

A fully functional phone contacts app - made entirly in CSS.

A simple API for calculating proportional scale.

Adding a console to online projects, so it can be debugged and fixed on a mobile device or in online code editors such as Codepen or Glitch.

A Chrome extension for extracting colors from any web page.

A YouTube clone I made with Tailwind CSS, just for learning purposes.

Instagram clone, done entirly with SVG technology as part of a talk I gave on "SVG superpowers", for showcasing purposes.

JavaScript library for implementing Tailwind's Apply feature without the need to compile, so it can be used in online code editors such as Codepen or Glitch.

The 2021 colorful iMac - done only in CSS with 3D Animation.

CSS Chickens with random eggs, click around and have fun.

Koi fish with pure CSS, works in Desktop Chrome only.

CSS Animation just for fun.

CSS-only Randomness with cards.

Buttons for a Design System, done for client work.

Cute animation for the winter.

CSS Animation I did just for fun.

CSS Interaction I did inspired by Miyazaki's animated films.

CSS Interaction I did inspired by Miyazaki's animated films.

Semi-functional iPad Pro clone.

Number Inputs for a Design System, done for client work.

A noDiv Animation of a smartphone notification.

Simple Loading Animation for Dribbble.

SVG Animation for a website, done for client work.

SVG Animation of emojis, original emojis designed by Twitter.

These cards were made using HTML and CSS only, no JavaScript , no Sass and no other external scripts or preprocessors involved.

Last year I started teaching basic Front-End Development courses (HTML/CSS) in a few Design Schools, I also gave a talk in a few meetups to an audience of more seasoned JavaScript developers.

As a designer/developer I always look out for new tools, both at the design front and at the development front, we clearly are in the golden age of new tools in both of these fronts.

This article is about motion design and animations for digital interfaces and it’s about Design Systems as well. Design Systems are a powerful tool that I think it’s worth understanding what they are and where they come from.

Call to Action buttons (CTA, for short) are common practice in web design these days, almost every website you enter have a “log in” button or a “try now” or “learn more” button...

As part of my job as UI/UX Designer I make a lot of web animations, most of them end up in the browser, so I write them down in code.

The filter property in CSS is a lot more powerful than people think, not only does it allow us to change the color or the tone of an image but it also allows us to change those properties on regular HTML/CSS shapes.