Today's phase, its name, illumination and the days until the next full or new moon. Computed in the browser, no API, no keys.

Moon Phase is a Framer code component that puts a real, live moon on your page. It draws the moon as a crisp SVG for the current date and refreshes it every minute on your published site. Pick a fixed date instead for an event or retreat, or shift by a number of days to build a week strip. Everything runs in the browser: no plugins, no backend, no extra Framer plan needed.

Check out the live demo here: https://moonphase.framer.website

Shows the moon exactly as it looks tonight, with the phase name (Waxing Gibbous, Full Moon...), the percentage that is lit, the date and a countdown like "Full moon in 6 days". Switch to the southern hemisphere and the lit side flips. Four looks, three layouts and five languages, all from the property panel.

MoonPhase.tsx - drop straight into Framer, no setup needed

Setup guide with step by step instructions

Today's moon, a fixed date, or shifted by a number of days

Four looks: Realistic (textured surface with plains and craters), Soft (gradient), Flat (two colors) and Outline (stroke and fill)

Your own colors for the light side, shadow side, outline and glow

Optional glow, craters and a load animation that fills the moon from new to the current phase

Three layouts: text below, text beside or moon only

Phase name, illumination, date and next full or new moon countdown, each on or off

Five languages built in (English, Dutch, German, French, Spanish) plus a custom option with your own phase names and sentence templates

Font, colors and sizes for name and details

Northern or southern hemisphere

Accessible: the moon carries a label with the phase name and illumination for screen readers

SVG, so it stays crisp at any size; no external dependencies, works on every Framer plan

Yoga, wellness and astrology sites, event and retreat pages, blogs and personal sites, and anyone who wants a small living detail in a header or footer.

Framer

Works with any Framer template

One-time purchase. Use on unlimited personal and client projects.

Due to the digital nature of this product, all sales are final. Once the file has been downloaded, refunds are not offered.

However, if you experience a technical issue that prevents the component from working as described, please reach out within 14 days of purchase and I will do my best to resolve it. If the issue cannot be fixed, a full refund will be provided. For questions, contact: info@zo-e.nl