Create Time-Of-Day-Responsive Color Themes For Your Site Based On Real World Location Data
I built a lightweight javascript to animate your site's colors on a circadian cycle, based on a time and place on earth
I originally wrote this in php circa 2010 to create smooth color fade animations of elements in pure css based on the current time of day and real-world location, using sunCalc.
Once we entered the LLM age, i had AI convert this script to be a simple little js include, which I’m calling circadian. (You will have to include the js sunCalc library as well.)
It’s extremely lightweight, no js timers or background processes. It just injects generated keyframe css based on the location coordinates you provide and animates your sites colors according to the theme you provide.
By default the color values animate on a 24-hour realtime cycle, matched to the current time of day of your visitor or to a provided coordinate location. You can modify the animation-duration property of elements to run the 24hr cycle in a shorter or custom time span.
see more at circadian on github
Example use cases:
time-of-day localized color scheme for your whole website. dawn color scheme during dawn. night color scheme at night. based on the visitor's location or a fixed location.
a simple 10 minute day/night ambience cycle for a browser-based sidescroller game.
a snow globe scene in html that animates a day night cycle every 30 seconds.