shape-morph 0.1.0 → 0.2.0

package/README.md

@@ -1,142 +1,52 @@
 # shape-morph
 
-Material Design 3 shape morphing for the web. Port of Android's `androidx.graphics.shapes` and `MaterialShapes` to TypeScript.
+Material Design 3 shape morphing for the web. Port of Android's `androidx.graphics.shapes` to TypeScript.
 
-Shapes are defined as cubic Bezier curves and morphed via feature-matched interpolation. Outputs to SVG paths, CSS `clip-path`, or React components.
+35 preset shapes, feature-matched morphing, SVG paths, CSS `clip-path`, and React components.
 
-## Install
+## Documentation
 
-```bash
-bun add shape-morph
-```
-
-### Local Testing
+Full docs, guides, and API reference at **[shape-morph.thereallo.dev](https://shape-morph.thereallo.dev)**.
 
-To test locally in another project before publishing:
+## Quick start
 
 ```bash
-# In this repo
-bun link
-
-# In your other project
-bun link shape-morph
-```
-
-## Usage
-
-### SVG Path
-
-```ts
-import { getShape, Morph, toPathD } from "shape-morph";
-
-const start = getShape("Circle");
-const end = getShape("Heart");
-const morph = new Morph(start, end);
-
-// progress: 0 = start shape, 1 = end shape
-const d = toPathD(morph.asCubics(0.5), 100);
-```
-
-### CSS Clip-Path
-
-```ts
-import { toMorphPair } from "shape-morph";
-
-const clipPath = toMorphPair(0.5, "Circle", "Heart");
-```
-
-### React
-
-```tsx
-import { Shape } from "shape-morph/react";
-
-<Shape name="Heart" size={32} fill="red" />
+bun install shape-morph
+# or any other package manager
 ```
 
-#### useMorph
-
-Animates between two shapes.
-
 ```tsx
 import { useMorph } from "shape-morph/react";
 
-function Avatar({ hovered }: { hovered: boolean }) {
-  const { clipPath } = useMorph("Circle", "Heart", {
-    progress: hovered ? 1 : 0,
-    duration: 300,
-  });
-
-  return <img style={{ clipPath }} src="/avatar.png" />;
-}
+const { clipPath } = useMorph("Circle", "Heart", {
+  progress: hovered ? 1 : 0,
+  duration: 300,
+});
 ```
 
-Returns `{ pathD, clipPath, progress }`.
+## Contributing
 
-#### useShape
-
-Returns path data for a single shape.
+```bash
+# Install dependencies
+bun install
 
-```tsx
-import { useShape } from "shape-morph/react";
+# Build
+bun run build
 
-const { pathD, clipPath } = useShape("Heart");
+# Format
+bun run fix
 ```
 
-## Custom Polygons
-
-```ts
-import { createStar, createRectangle, cornerRounding, Morph, toPathD } from "shape-morph";
+### Docs site
 
-const star = createStar(5, 1, 0.5, cornerRounding(0.1));
-const rect = createRectangle(1, 1, cornerRounding(0.2));
-const morph = new Morph(star.normalized(), rect.normalized());
+The documentation site lives in `docs/` and is a standalone Next.js app powered by [Fumadocs](https://fumadocs.dev).
 
-const d = toPathD(morph.asCubics(0.5), 200);
+```bash
+cd docs
+bun install
+bun run dev
 ```
 
-## Available Shapes
-
-Circle, Square, Slanted, Arch, Fan, Arrow, SemiCircle, Oval, Pill, Triangle, Diamond, ClamShell, Pentagon, Gem, Sunny, VerySunny, Cookie4Sided, Cookie6Sided, Cookie7Sided, Cookie9Sided, Cookie12Sided, Ghostish, Clover4Leaf, Clover8Leaf, Burst, SoftBurst, Boom, SoftBoom, Flower, Puffy, PuffyDiamond, PixelCircle, PixelTriangle, Bun, Heart
-
-## API
-
-### Core
-
-| Export | Description |
-|---|---|
-| `Morph(start, end)` | Morph between two `RoundedPolygon` shapes |
-| `morph.asCubics(progress)` | Get interpolated `Cubic[]` at progress 0–1 |
-| `getShape(name)` | Get a Material shape as `RoundedPolygon` |
-| `shapeNames` | Array of all shape names |
-
-### Polygon Builders
-
-| Export | Description |
-|---|---|
-| `createCircle(vertices?)` | Circle approximation |
-| `createRectangle(w, h, rounding?)` | Rectangle with optional rounding |
-| `createStar(points, outer, inner, rounding)` | Star polygon |
-| `createPolygon(vertices, rounding)` | Regular polygon |
-| `cornerRounding(radius, smoothing?)` | Corner rounding config |
-
-### Output
-
-| Export | Description |
-|---|---|
-| `toPathD(cubics, size?)` | Cubics to SVG path `d` attribute |
-| `toSvgPath(polygon, size?)` | Polygon to SVG path `d` attribute |
-| `toClipPathPolygon(cubics, samples?)` | Cubics to CSS `clip-path: polygon(...)` |
-| `toClipPathPath(cubics, samples?)` | Cubics to CSS `clip-path: path(...)` |
-| `toMorphPair(progress, start, end, samples?)` | Morph to CSS clip-path string |
-
-### React (`shape-morph/react`)
-
-| Export | Description |
-|---|---|
-| `<Shape name size? fill? stroke? className? style? />` | Renders shape as inline SVG |
-| `useMorph(start, end, { progress, duration?, size? })` | Animated morph returning `{ pathD, clipPath, progress }` |
-| `useShape(name, size?)` | Static shape returning `{ pathD, clipPath, polygon }` |
-
 ## License
 
-Apache-2.0
+MIT