Reference

Transitions

Add the optional stylesheet to animate state changes using the transition already declared by every icon definition. No wrappers or per-icon classes are required.

Setup

Install both packages, then import the stylesheet once in your app root or global stylesheet entry.

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

A short rotational entrance for directional changes.

slide

A vertical entrance suited to directional controls.

morph

A CSS-only blur, scale, and rotation blend.

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

Override the CSS custom properties on an icon or a parent scope.

CSS

.status-icon {  --stateglyph-duration: 300ms;  --stateglyph-spin-duration: 1.2s;  --stateglyph-easing: ease-in-out;}