Docs

shapcn morphs one icon into another. Change the name of a <morph-icon> element and the icon moves the way an animator would draw it. No animation is pre-built. The engine plans every frame when you ask.

Quick start

Add one script and one tag. The script defines the <morph-icon> element and loads the Lucide icons.

<script type="module" src="https://shapcn.com/morph-icon.js"></script>
<morph-icon name="menu" size="48"></morph-icon>

The demo above changes its name every two seconds. To do the same in your page, set the name attribute.

<script type="module" src="https://shapcn.com/morph-icon.js"></script>
<morph-icon name="menu" size="48"></morph-icon>
<script type="module">
  const icon = document.querySelector('morph-icon');
  setTimeout(() => icon.setAttribute('name', 'x'), 1000);
</script>

The icon morphs from menu to x. Set name to an empty string and the icon hides with an effect. Set a name again and it shows.

What is in the docs

• Install: the script tag and the npm package.
• Element: every attribute of <morph-icon>, with a live demo each.
• Feel: the easing presets smooth, spring, and elastic.
• Effects: the seven ways an icon appears and disappears.
• Icons: Lucide, the 12 icon sets, and your own icons.
• JavaScript: planMorph, planAlive, alive, defineMorphIcon, and registerIcons.
• Frameworks: plain HTML, React, Vue, and Svelte.
• Accessibility: reduced motion, focus, and aria.

Back to the site

• Examples
• Playground
• Compare: plain point blending next to shapcn, frame by frame.
• How it works
• Install
• GitHub

Markdown and LLM files

Every page has a Markdown twin. Add .md to the path, for example /docs/element.md. The file /llms.txt lists the pages. The file /llms-full.txt holds all pages in one file.

Markdown version