A dynamic identity powered by the position of the sun
The site reads your IP address, finds where you are, computes where the sun is there, and sets its colors to the time of day: cool white after sunrise, warm white after solar noon, and the same two whites as line colors on black between sunset and nadir. Dark mode turns on at sunset and off at sunrise. The animated logo has four cuts to match: after sunrise, before sunset, after sunset, after midnight. Even the news photography runs through a filter graded to the hour.
One news photograph from the site, through the four filters: after sunrise, before sunset, after sunset, after midnight.
Every letter of the wordmark is a single continuous line; strokes extend past their letterforms and out of frame, so the name reads as one system of lines.
The site
It's a news site where students in the lab could publish what they were working on and the rest of Cooper could follow along. I designed the identity (brand, colors, posters, and the motion behind them) and designed and built the site.
Where it came from
Mili Shah recruited me to design and develop this site, she created the lab. I wanted the site to conceptually be rooted in autonomous systems, so I built the site to run on autonomous rules.
One poster, four color schemes
The posters are animated and follow the same clock as the site. Here is the poster for Yeseul Song's lecture in all four of its color schemes: after sunrise, before sunset, after sunset, after midnight. In daylight the type is black on white; after dark it is white on black. On a hallway screen it played the cut matching the time of day.
The animated lecture poster in its four times of day.
The walk
While the site loads, it draws a random walk, the simplest autonomous system I know. This one is live, running the site's original logic:
The site's random walk, rebuilt here. Its colors follow the sun wherever you are right now; reset it to start a new path.
The stack
| Layer | Choice |
|---|---|
| Server | Node.js, Express 4, Handlebars templates |
| Hosting | Glitch |
| Where you are | Visitor IP, resolved through the geolocation-db API |
| Sun math | SunCalc, once on the server and again in the browser every 30 seconds |
| Color | CSS custom properties, written per request |
| Photo grading | Stacked CSS filters — one image file covers all four schemes |
| Random walk | three.js, one BufferGeometry with a growing draw range |
| Wordmark | anime.js driving stroke-dashoffset across the logo's SVG lines |
| Type | Terminal Grotesque, an open source face by Raphaël Bastide |
All of it hangs on one move: the server works out where you are and where the sun is there before it sends the page, so it arrives in the right scheme instead of flipping into it. The client keeps its own copy of the same math, so a tab left open all day switches itself at sunset.
The rules
The rules are short and run without supervision. Four moments divide the day: sunrise, solar noon, sunset, nadir. Standard solar formulas decide which side of them your coordinates fall on. The walk is one line of 15,000 points, each a random step of up to 45 units, turning back when it crosses the boundary of its cube. The whole path exists the instant it begins; the animation reveals one point at a time.