# Morph: Getting started

> Install Morph, make a morph, and draw any moment of it: in React, in the page, or on a server.

Source: https://cesarvenzac.com/morph/docs/getting-started

```sh
npm install @cesarvenzac/morph
```

Plain TypeScript, published as ES modules with their types, and no dependencies. React is an optional peer, for the React entry alone, and only the DOM entry needs a browser.

## A first morph

A morph is made from two sources and drawn at any moment between them. Making it is the costly part, where the pieces are matched, so make it once and keep it:

```typescript
import { morph } from "@cesarvenzac/morph";
import { Plus, X } from "lucide";

const m = morph(Plus, X);
const frame = m.at(0.5); // halfway
```

`at(t)` takes any `t` from `0`, the first side exactly, to `1`, the second exactly, and returns the frame as parts: a `<path>` each, its path data and how it's painted. Between, `t` can come from anywhere: a spring, a tween, a scroll position, a slider.

*Live example on the page: A moment of a morph. Scrub the slider: every moment is a few paths, each with its share of the stroke's width.* Its source:

```tsx
import { morph } from "@cesarvenzac/morph";
import { Plus, X } from "lucide";

const m = morph(Plus, X); // the costly part, done once

// Any moment from 0 to 1, as SVG path data a stroke, each with
// its share of the icon's stroke width.
m.at(t); // [{ d: "M4.88 14.95C…", width: 1 }, …]
```

## Draw it

In React, `MorphFrame` draws a morph at the `t` you give it, and `useMorph` keeps the morph across renders, made again only when a side or the options change:

```tsx
import { MorphFrame, useMorph } from "@cesarvenzac/morph/react";
import { Sun, Moon } from "lucide";

export function Dial({ t }: { t: number }) {
  const m = useMorph(Sun, Moon);
  return <MorphFrame morph={m} t={t} size={48} />;
}
```

Without React, `draw` puts a frame into an `<svg>` on the page, a `<path>` a part, and `svgOf` writes one as an SVG document, for a server, an `<img>` or a file:

```typescript
import { svgOf } from "@cesarvenzac/morph";
import { draw } from "@cesarvenzac/morph/dom";

draw(document.querySelector("svg")!, m.at(t), m.viewBox);

svgOf(m, 0.5); // '<svg xmlns="http://www.w3.org/2000/svg" …'
```

## Play it

For an icon that changes with a state, as a button's does, `MorphIcon` springs to each new icon, and turns back from where it is when it's sent back mid-way:

```tsx
import { MorphIcon } from "@cesarvenzac/morph/react";
import { Menu, X } from "lucide";

<button
  onClick={() => setOpen(!open)}
  aria-label={open ? "Close menu" : "Open menu"}
>
  <MorphIcon icon={open ? X : Menu} />
</button>;
```

Name the button, not the icon: `MorphIcon` is hidden from assistive tech unless it's given a name of its own. Under `prefers-reduced-motion` it changes at once. [Playing it](https://cesarvenzac.com/morph/docs/playing) has the rest: the spring, `mount` for the DOM, and `motion` for any other clock.

## Beyond icons

Either side can be any SVG, read from its markup, or a word set in a font: [What it morphs](https://cesarvenzac.com/morph/docs/sources) has every kind.

```typescript
import { morph, svg, text } from "@cesarvenzac/morph";

morph(svg(heartMarkup), svg(starMarkup));
morph(text(font, "Hello"), text(font, "World"));
```

## Morph's docs

- [Overview](https://cesarvenzac.com/morph.md): Morph any SVG into another without the spikes: icons, filled shapes, words, one shape into several.
- [Getting started](https://cesarvenzac.com/morph/docs/getting-started.md): Install Morph, make a morph, and draw any moment of it: in React, in the page, or on a server.
- [What it morphs](https://cesarvenzac.com/morph/docs/sources.md): Icons, any SVG markup, words set in a font, or drawings made by hand: either side can be any of them, and the two needn't match.
- [Shapes and colours](https://cesarvenzac.com/morph/docs/shapes.md): How pieces pair, how holes open and close, what becomes of the shapes one side has more of, and how colours mix.
- [Playing it](https://cesarvenzac.com/morph/docs/playing.md): Spring from one drawing to the next when something changes: MorphIcon in React, mount in the page, motion for any other clock.
- [Ways to morph](https://cesarvenzac.com/morph/docs/ways.md): Soft, even and index, the three ways side by side, the four steps that make soft what it is, and a frame as anchors and handles.
- [API reference](https://cesarvenzac.com/morph/docs/api.md): Every function and type the package exports, entry by entry: the core, React and the DOM.