moonphase.is

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.

An example

Nick put together a neat example program which when run as a cron job sets the desktop wallpaper to the current moon phase using this:

export DISPLAY=:0
curl -O https://moonphase.is/image.svg
nitrogen --set-centered image.svg
rm image.svg
  

You'll need to have nitrogen installed to use this verbatum.

Why

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 implementation being opaque to the embeder is interesting as well. From a user's perspective they are just adding a static image into their webpage. The fact that it is always the current phase of the moon is known, the behind the scenes of how this is done is 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.

How

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.