---
title: "Moon Phase — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Michelle de Haas | Zo-e · Interactive. 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."
canonical: "https://framer.elliotli.dev/component/moon-phase"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Moon Phase

# Moon Phase

A live moon for your site, no API

[View on Framer](https://framer.com/marketplace/components/moon-phase/?via=elliot-li)

![Moon Phase preview image 1](https://framer.elliotli.dev/og/component/moon-phase/adf6e26cc28ab97e/1600x1200.jpg)

## Summary

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.

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #3713

## Details

- **Author**: Michelle de Haas | Zo-e
- **Price**: $6.00
- **Published**: 2026-09-06
- **Updated**: 2026-09-16
- **Added**: 2026-09-06
- **Categories**: Interactive

## More like this

-   [Retro TV Tilt Axis](/component/retro-tv-tilt-axis) — Zac Nielson · $9 — Immersive retro TV section
-   [Arkanoid Secret Game](/component/arkanoid-secret-game) — Dulaj Design · $8 — About Arkanoid Secret Game brings the classic, addictive arcade brick breaker experience directly into your Framer projects.
-   [Forma Object](/component/forma-object) — Reza Pahlevi · $19 — Rotate, compare & explore finishes
-   [Neon Sign Designer](/component/neon-sign-designer) — Luke Sn · $39 — Custom sign previews and estimates