Core

All core exports are available from the shape-morph entry point.

import { AnimatedMorph, Morph, getShape, shapeNames } from "shape-morph";

Morph

new Morph(start: RoundedPolygon, end: RoundedPolygon)

Creates a morph between two shapes. Handles feature-matching, subdivision, and interpolation internally.

morph.asCubics(progress: number): Cubic[]

Returns the interpolated cubic curves at the given progress (0-1). Progress 0 is the start shape, 1 is the end shape.

AnimatedMorph

new AnimatedMorph(start: ShapeName | RoundedPolygon, end: ShapeName | RoundedPolygon, options: AnimatedMorphOptions)

Animated morph for vanilla JS. Set the progress property and the class animates from the current position, calling onFrame each frame. Supports three animation modes, the same as the React useMorph hook: duration-based (with customizable easing), lerp-based, and spring physics.

import { AnimatedMorph } from "shape-morph";

const morph = new AnimatedMorph("Circle", "Heart", {
  duration: 300,
  onFrame({ clipPath }) {
    div.style.clipPath = clipPath;
  },
});

div.addEventListener("mouseenter", () => { morph.progress = 1; });
div.addEventListener("mouseleave", () => { morph.progress = 0; });

Options

Frame object

morph.progress

Setting progress triggers animation from the current position to the new target. Reading it returns the last set target.

morph.dispose()

Cancels any running animation. Call this when removing the element or cleaning up.

getShape

getShape(name: ShapeName): RoundedPolygon

Returns a preset Material Design 3 shape as a RoundedPolygon. See Available Shapes for the full list.

shapeNames

const shapeNames: ShapeName[]

Array of all 35 shape names. Useful for iteration.

ShapeName

type ShapeName = "Circle" | "Square" | "Heart" | ... // 35 total

Union type of all valid shape names. Available from both shape-morph and shape-morph/react.