my website knows what time it is
jesse
you’ve played animal crossing right ? right, we all have. you know the feeling then. loading into the game at noon vs midnight /feels/ drastically different. the afternoon is upbeat and bright but when you’ve been grinding at the clock hits midnight… it just immediately hits and slows you down. the game doesn’t have to tell you what time it is because you just feel it.
that always stuck with me.
photography is a huge passion of mine so i’m thinking about light fairly often. golden hour has it’s own feeling, warm and soft. early morning is clean and quiet. and blue hour has a cool stillness to it.
so i thought, what if my website changed with the day as well ?
how it works
- when you visit angelsrest.online, the site checks your local time and shifts its atmosphere to match. it’s subtle. you might not even notice it if you rarely visit, but it’s there.
- dawn fades in soft pinks, like the sky just before sunrise
- morning is bright and clear with warm yellows
- golden hour washes everything in amber and honey tones
- evening brings in violet and purple undertones
- night settles into cool indigo blues
it’s not just a background color change. the glow at the top of the page shifts. the borders on cards and navigation pick up the time’s color. even the text you select changes. it all works on top of whatever theme you’ve chosen. light mode at golden hour feels like afternoon sun cascading through a window. dark mode at night feels like scrolling underneath the moon.
why bother?
because the web is so static most of the time. every website looks exactly the same at 8am as it does at midnight. for anything other than a website that is based around photography that’s fine but when you visit my site you’re here to see. and through feeling and seeing the website comes alive.
try it
visit the site at different times if you can. or if you’re impatient, open your browser console and type:
document.documentElement.setAttribute("data-time-period", "golden")
swap “golden” for “dawn”, “evening”, “night”, whatever you want to preview.
i wrote a technical guide too, if you want to build something like this yourself. it’s simpler than you’d think. just javascript, css variables, and… time.
---
- jesse