Reference

Transitions

State changes animate automatically using the transition declared by each icon definition. The outgoing glyph stays visible while the incoming glyph enters. No stylesheet or wrapper is required.

Setup

The React package includes the animation renderer. Optionally install the timing presets and import their stylesheet once in your app root.

Terminal

npm install @stateglyph/react @stateglyph/transitions

app/layout.tsx

import "@stateglyph/transitions/styles.css";

Available transitions

crossfade

A short opacity fade between glyphs.

scale-fade

A subtle scale-up paired with a fade.

rotate

Outgoing and incoming glyphs rotate in opposite directions.

slide

Outgoing and incoming glyphs slide in opposite directions.

morph

A blur, scale, and rotation blend between glyphs.

States marked as continuous, such as loading spinners, rotate until the state changes. All animation is disabled automatically when the user enables reduced motion.

Customize timing

Use duration, spinDuration, and transition props, or override CSS custom properties on an icon or a parent scope. animated={false} disables motion for that component; explicit timing props override CSS values.

CSS

// React props: durations are in milliseconds<ThemeStateIcon state="dark" duration={300} transition="rotate" /><ThemeStateIcon state="light" animated={false} />
/* Or customize timings with CSS */.status-icon {  --stateglyph-duration: 300ms;  --stateglyph-spin-duration: 1.2s;  --stateglyph-easing: ease-in-out;}