Sleepy-Homepage

Goodnight, Homepage is a tiny interactive webpage I made while waiting for my boyfriend to pick me up for lunch, created under the very serious artistic conditions of hunger, boredom, and mild dramatic flair.

The page starts awake and cheerful, but every second it gets sleepier. As the sleepiness increases, the text changes, the page gets darker, blurrier, and slightly tilted, like it is slowly giving up on being a functional website. A coffee button wakes it back up a little, because even a webpage deserves emotional support and caffeine.

Technically, the project uses simple HTML, CSS variables, and JavaScript timers to create a playful state-based interaction. JavaScript tracks the page's sleepiness, updates the message and title, and changes CSS properties like brightness, blur, and rotation.

It is not a giant project, but it was a fun experiment in making a webpage feel like it has a mood. Basically, I made a homepage that gets tired because I was also tired, hungry, and waiting for lunch.

• Built a playful interactive homepage using HTML, CSS, and JavaScript.
• Used JavaScript timers to increase and track the page's sleepiness state.
• Updated messages, title text, and visual styling based on interaction state.
• Used CSS variables to control brightness, blur, rotation, and page mood.
• Added a coffee button that reduces sleepiness and makes the page feel more responsive.

Homepage Interface

A playful state-based homepage that changes its text, title, brightness, blur, and rotation as its sleepiness increases.