Moon Phase

Moon Phase shows a live moon on your page: today's phase, its name, illumination and the days until the next full or new moon. Everything is computed in the browser, so there is no API, no keys and no backend. Works on every Framer plan.

Four looks: Realistic (textured surface with plains and craters), Soft (gradient), Flat (two colors) and Outline (stroke and fill). Pick your own colors for the light side, shadow side, outline and glow, and switch on a load animation that fills the moon from new to the current phase.

Show today's moon, a fixed date for an event or retreat, or shift by a number of days to build a week strip. Northern or southern hemisphere. Text in English, Dutch, German, French, Spanish or your own words, with phase name, illumination, date and a countdown like Full moon in 6 days. Three layouts: text below, text beside or moon only.

The moon is an SVG, so it stays crisp at any size and carries an accessible label for screen readers.

Live demo: https://moonphase.framer.website