Enter
Toggles

SunriseToggle

Starts dark with a moon. Press it and a white circle climbs in from the middle of the bottom edge, uncovering a sun as it goes.

Disabled

Usage

<SunriseToggle
  size={72}
  spring="smooth"
  disabled={false}
/>

How the motion works

The lit state is a circle anchored to the middle of the bottom edge whose radius is sprung from nothing out to the far corners — the corners, not the top edge, or they stay dark for the last of the sweep. Anchoring it there rather than at the centre is the whole illusion: the visible edge is one convex arc climbing the tile, which reads as a horizon instead of an iris. Both faces are the same markup at the same place, with the lit one under a single clip, so the arc cuts skin and glyph together and inverts an icon exactly along its own edge; a cross-fade would ghost the two glyphs through each other, and there is no instant at which flipping the colour outright is right while the arc is still crossing the icon. The sun itself never moves — it is uncovered by the arc, not carried by it, since sliding it too would put two motions on one object and cost the reveal its clean read. Arriving at the corners bumps the whole tile outward once and lets it settle, on an impulse parked until the arc has actually got there rather than fired with the toggle; released together they would only amount to a press animation wearing the fill's clothes.

useSpringValuespring impulseusePressclip-path

Props

PropTypeDefaultDescription
theme / defaultTheme"light" | "dark"Controlled or initial theme. Defaults to dark — the moon face.
onChange(theme: Theme) => voidFires on every toggle.
sizenumber72Tile edge length, in px.
radiusstringCorner radius override.
labelstring"Toggle colour theme"Accessible name.