Skip to content
Components

IconMorph

Icon with blur-crossfade morph animation between icon changes. Drop-in replacement for Icon when you need animated transitions. The icon stays in place while crossfading with a blur effect.

Usage

import { IconMorph, IconMorphProps } from "@instruments/materia-ui/components/icon-morph";

Best practices

  • Change morphKey whenever icon changes (e.g. play↔pause) - the crossfade is keyed off it, so a stale key swaps the new glyph in with no morph.

  • Use it as the animated drop-in for Icon; for a plain static glyph stay on Icon and skip the extra AnimatePresence/motion cost.

  • Needs ReducedMotionProvider for the blur-crossfade to run and honour reduced motion; like Icon it renders aria-hidden, so name the control elsewhere.

Props

PropTypeDefaultDescription
enterDurationnumber

Duration for enter animation in seconds. Defaults to durations.normal.

enterEasingEasingValue

Easing for enter animation. Accepts named preset or bezier tuple. Defaults to easings.out.

exitDurationnumber

Duration for exit animation in seconds. Defaults to durations.quick.

exitEasingEasingValue

Easing for exit animation. Accepts named preset or bezier tuple. Defaults to easings.out.

icon(required)LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

Icon component from lucide-react or any SVG React component.

morphKey(required)string

Unique key to trigger morph animation when icon changes.

sizeIconSize

Size scale for icons. Defaults to base (20px).

Also exports

  • interfaceIconMorphProps

Composition

Builds on

Icon

Used by

ThinkingLoader