This webpage is responsive and will always show the current phase of the moon in the image above. It is also a static html page. This is done with a little web app I made today called moonphase.is.
Visiting the homepage will return a plaintext response with the
current phase of the moon. Visiting /image.svg will
return a svg showing that phase.
This is inspired by a conversation I had with Joanne about responsive Notion pages where the user can’t add any javascript. Using a collection of applications like moonphase someone might realistically make a webpage that is responsive according to the time of day on Notion.
The primary motivation behind this was that it sounded fun to build.
Waxing poetic, the concept of building responsive interactions into
traditionally static media with tools like this is an interesting
one to me. For example, imagine if you could set your Twitter
profile photo to https://moonphase.is/image.svg and
thus make it 'responsive' or if you could embed the image into a
Google Doc that describes the phases of the moon.
The responsiveness being opaque to the beholder is interesting as well. From a user's perspective they are just embedding a static image into their webpage. The fact that it is always the current phase of the moon is known, but the implementation is entirely opaque.
I'd be interested to explore other areas where this is possible. For example, a version of this that returned an image of what the sky looks like for the visitor. Building this on top of Cloudflare Workers would likely be reasonably trivial as the location is built into the incoming request already.
This is a very simple Cloudflare Workers project. You can find the source code here. The current phase of the moon is calculated using the method described here.