React

All React exports are available from the shape-morph/react entry point. Requires React 18+.

import { Shape, useMorph, useShape } from "shape-morph/react";
import type { ShapeName } from "shape-morph/react";

<Shape>

<Shape name="Heart" size={32} fill="red" />

Renders a shape as an inline <svg> element.

useMorph

useMorph(start: ShapeName, end: ShapeName, options: MorphOptions): MorphResult

Animated morph hook. Runs a requestAnimationFrame loop with three animation modes: duration-based (with customizable easing, default ease-in-out), lerp-based (each frame moves a fraction toward the target), and spring physics (physically simulated with overshoot and settle).

Options

Returns

The returned progress is the animated value, not the target. In duration mode it interpolates using the provided easing function (default ease-in-out, see Easing for presets). In lerp mode it moves a fraction toward the target each frame. In spring mode it may temporarily overshoot past 0 or 1 during the bounce, the shape output is clamped but progress is not, so you can use the overshoot to drive effects like rotation or scale. Use it to drive synchronized animations:

const { clipPath, progress } = useMorph("Circle", "Heart", {
  progress: hovered ? 1 : 0,
  duration: 300,
});

<div style={{
  clipPath,
  transform: `rotate(${progress * 90}deg)`,
}} />

useShape

useShape(name: ShapeName, size?: number): ShapeResult

Returns path data for a static shape. No animation.

Returns