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.
Lunr is a web app, built entirely using HTML, CSS, and Javascript. I built upon an existing javascript library called SunCalc for caluclating the moon position and light phases. On intial load, the app requests the user's current location (lat/long), and determines the current date. These are then passed as parameters nto SunCalc. The returned information is displayed with a bunch of custom CSS.
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.
