Components / Effects
Moon phase
The moon at a given phase, optionally cycling, with rare moon types and lunar phase helpers.
@fabrials/ui
- New moon
- Waxing crescent
- First quarter
- Waxing gibbous
- Full moon
- Waning gibbous
- Last quarter
- Waning crescent
- Moon · common
- Earthshine · uncommon
- Moon halo · uncommon
- Harvest moon · uncommon
- Supermoon · uncommon
- Micromoon · rare
- Blue moon · rare
- Blood moon · rare
- Super blood moon · legendary
26 Sep 2026: Full moon, 50% through the cycle.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { MoonPhase, MOON_VARIANTS, pickMoonVariant, lunarPhase, lunarPhaseName } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
phase | number | 0 new, 0.5 full, 1 new again. |
animate | boolean | Cycles through the phases over cycleMs. |
size | number | string | Width and height. |
halo | boolean | Glow drawn from the lit side only, so it follows the shadow. |
variant | id | "random" | Moon type. Random rolls a weighted type at each new moon. |
caption | boolean | Shows the type and rarity while it is visible. |
label | string | Accessible name. Without it the moon is decorative. |
lunarPhase | (date) => number | Phase for a date. lunarPhaseName names it. |
Behavior
Types: earthshine (crescents), moon halo, harvest, supermoon, micromoon, blue, blood and the legendary super blood moon; full-moon types only show near full. Server code imports the helpers from @fabrials/ui/moon. MoonPhase and Starfield are the only sanctioned glow and continuous motion in Fabrials UI, for sign-in and landing surfaces only. The cycle stops under reduced motion.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.