https://github.com/thereallo1026/shape-morph
Material Design 3 shape morphing for the web.
https://github.com/thereallo1026/shape-morph
animation bezier clip-path css-transitions material-design react shape-morph svg typescript
Last synced: 4 months ago
JSON representation
Material Design 3 shape morphing for the web.
- Host: GitHub
- URL: https://github.com/thereallo1026/shape-morph
- Owner: Thereallo1026
- License: mit
- Created: 2026-02-09T08:38:54.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-02-13T06:26:04.000Z (4 months ago)
- Last Synced: 2026-02-13T12:46:23.059Z (4 months ago)
- Topics: animation, bezier, clip-path, css-transitions, material-design, react, shape-morph, svg, typescript
- Language: TypeScript
- Homepage: https://shape-morph.thereallo.dev
- Size: 388 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# shape-morph
Material Design 3 shape morphing for the web. Port of Android's `androidx.graphics.shapes` to TypeScript.
35 preset shapes, feature-matched morphing, SVG paths, CSS `clip-path`, and React components.
## Documentation
Full docs, guides, and API reference at **[shape-morph.thereallo.dev](https://shape-morph.thereallo.dev)**.
## Quick start
```bash
bun install shape-morph
# or any other package manager
```
```tsx
import { useMorph } from "shape-morph/react";
const { clipPath } = useMorph("Circle", "Heart", {
progress: hovered ? 1 : 0,
duration: 300,
});
```
## Contributing
```bash
# Install dependencies
bun install
# Build
bun run build
# Format
bun run fix
```
### Docs site
The documentation site lives in `docs/` and is a standalone Next.js app powered by [Fumadocs](https://fumadocs.dev).
```bash
cd docs
bun install
bun run dev
```
## License
MIT