Experiments

Error 404 with pure CSS: Monument Valley inspired

I created an illustration for an Error 404 page using only CSS properties. I was very inspired by the Monument Valley game, which had a very beautiful art with impossible landscapes. I still use its soundtrack to concentrate while coding.

Neon Gooey Loader

I experimented with SVG filters and keyframes animations to build a loader with a Googey effect.

Homeday interactive buttons

While working at Homeday I participated on the "Product Engineering Week". Me and my team wanted to experiment with Micro Interactions, so we designed a bunch of buttons, with loading and finished states. Push them! Do not miss the animations.

Squared animations

Just a bunch of white squares rotating on a black canvas... or are they?

My goal here was to experiment with the CSS animations timing and delays. In order to give the illusion, I would need to update the background at the right time.

Dots animation

I saw a GIF that was showing this amazing optical illusion where it looks like the dots are rotating but actually they are moving on a straight line. I wanted to recreate it with CSS, so here it is. It was very interesting that a very important part to make it work was the "ease-in-out" timing function, and the delay for each dot.

Menu animation with transitions

Go ahead and click the menu icon above. The interaction that you see is animated only with CSS transitions, each one delayed a bit to start one after another. It was very interesting for me to test how a bunch of transitions can be chained to create a very different layout.

CSS Raindrops

This looks like a photograph from a window, right? But guess what, the raindrops are rendered using only CSS. There is a picture indeed, but it's blurred. Each raindrop is a reflect of the same picture, giving a rainy window effect.