Tired

Creative coding that depicts the user falling asleep while reading.

Available on GitHub.
Available on GitHub.

I used:

  • CSS Animation
  • CSS Filters

About this project

I made this project for a design class I followed. I wanted to create an animated article which simulates the user falling asleep. The content isn't quite readable but that, ofcourse, is the point of this page.

Live version

A version of this is currently live on CodePen! Check it out at the bottom of this page.

Animation

I used only CSS animations for this. It features a filter with blur that increases with the 'eyes' of the user close.

data[0].imageAlt2
Falling half asleep
data[0].imageAlt3
Pretty much sleeping

But wait, there's more!