A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
shapcn
Shape-aware icon morphing - sun flows into moon, full Lucide support, 80KB engine
Content updated · 2026-10-30
What is it · 它是什么
What is shapcn?
shapcn is a shape-aware icon morphing tool: change an icon's name and any icon smoothly flows into another (sun to moon, menu to close). The trick is shape-aware binding - parts of each icon get a hierarchy so pieces move in order instead of every point sliding at once. Lucide, Tabler, Phosphor and other major icon libraries are supported, with custom icons possible; the engine is about 80KB gzipped (170KB including all 1,858 Lucide icons). MIT licensed, a perfect pair with the Lucide icon library in this directory.
How to use · 怎么用
How to use shapcn
- Try morphing two icons in the site playground.
- Install via script tag, npm or the shadcn CLI.
- Shines on state changes: theme toggle, menu open/close.
Key features · 核心特点
Key features of shapcn
- Shape-aware morphing, not crossfading
- Lucide/Tabler/Phosphor support
- About 80KB engine, lightweight
- MIT licensed, custom icons supported
Related sites
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
A front-end playground — a dense hub of motion snippets and experiments