Moon Phase
A live moon for your site. Today's phase, its name, illumination and the days until the next full or new moon. Computed in the browser, no API, no keys.
The week ahead
Show today, a fixed date, or shift by a number of days. Every row here is one Moon Phase instance with a different shift. Drop seven on a page and you have a lunar calendar.
Shift: +1 to +7 daysFour looks
A textured moon with plains and craters, a soft gradient, flat two-tone, or a thin outline. Every color is yours.
Textured surface with the dark plains and craters of the near side, shaded to the limb.
Gentle gradient with a few craters clipped to the lit side.
Two colors, nothing else. Sits well in editorial layouts.
A stroke and a fill. Works on any background, light or dark.
Speaks your language
English, Dutch, German, French and Spanish built in, plus a custom option for anything else. Dates follow the language too.
Flip the lit side for sites in Australia, South Africa or South America. One switch.
Invert the colors and it belongs on a white page. Text and details each have their own color.
How it works
Three steps and the moon is on your page. No plugins, no API keys, no backend.
Import the component link, drag Moon Phase onto a page. It shows today's moon right away.
Realistic, soft, flat or outline. Colors, glow, craters, size and layout are all in the property panel.
Name, illumination, date and the next full or new moon, in five languages or your own words.
