# shapcn

> Morph icons like a pro. Change the icon name. shapcn animates the rest. The engine plans every morph live, shape by shape.

Script tag works today. npm package is in progress. Source is on GitHub.

## Docs

- [Overview](https://shapcn.com/docs.md): Docs for shapcn, the icon morph engine. Change the name of a morph-icon element and the icon moves like an animator drew it.
- [Install](https://shapcn.com/docs/install.md): Script tag works today. npm package is in progress. Source is on GitHub.
- [Element](https://shapcn.com/docs/element.md): Every attribute of the morph-icon element, with its default and a live demo.
- [Feel](https://shapcn.com/docs/feel.md): The three easing presets of shapcn, smooth, spring, and elastic, with a live side-by-side demo.
- [Effects](https://shapcn.com/docs/effects.md): The seven appear and disappear effects of shapcn, with a live demo of each.
- [Icons](https://shapcn.com/docs/icons.md): Lucide is built in. Twelve icon sets ship as separate modules. Register your own SVG icons with registerSVGs.
- [JavaScript](https://shapcn.com/docs/javascript.md): The stable JavaScript API of shapcn, planMorph, planAlive, alive, defineMorphIcon, and registerIcons.
- [Frameworks](https://shapcn.com/docs/frameworks.md): Use shapcn in plain HTML, React, Vue, and Svelte. Types for React come with the package.
- [Accessibility](https://shapcn.com/docs/accessibility.md): How shapcn handles reduced motion and keyboard focus, and how to add aria labels to icons.

## Optional

- [All docs in one file](https://shapcn.com/llms-full.txt)
- [Landing page](https://shapcn.com/)