Lunr is a little lunar phase calendar app that I built just for fun.
For the visual design, my goal was to approach the UI as if I were designing a poster – experimenting with layout, color, and typography. The app uses the aptly named Space Mono typeface design by Colophon Foundry. Texture by Paweł Czerwiński.
In terms of interaction design, my goal was to center the app on a single primary interaction. The user can simply swipe the moon to change it's phases and the corresponding date.
In order to create the interactive moon visual, I used a three.js library called OrbitControls.js. This renders a 3D semisphere, used to simulate the earth's shadow on the moon. When the user mainuputes the rotation of the semisphere, the app updates the date and moon phase data.