Notes ·
A Website That Moves With the Day
In Time-Based Background Colour Transitions with Temporal and CSS color-mix(), Sophie Koonin explains how she made her website’s city theme gradually move through sunrise, daytime, sunset, and night.
“Why restrict ourselves to just 4 times of day and 4 sets of colours?”
What I find interesting is how quickly a small visual idea opens the door to deeper experimentation. Temporal determines the visitor’s local time, color-mix() blends one stage into the next, and registered CSS custom properties make those changes animate smoothly.
The result is not simply a scheduled light and dark mode. The site gradually changes with the day, creating an environment that feels connected to the visitor’s actual moment in time.
I also appreciate the philosophy behind it. A personal website does not need to justify every detail through utility. Sometimes an unnecessary idea is worth building because it gives the site personality and creates an excuse to explore what the web can do.
Read the full article: Time-Based Background Colour Transitions with Temporal and CSS color-mix() by Sophie Koonin