Shapes
Match and interpolate SVG paths without choosing an animation runtime.
createMorph()
import { createMorph } from "@remold-ui/morph";
const morph = createMorph(fromPath, toPath);
path.setAttribute("d", morph.d(0.5)); // halfwayHandles different numbers of points, several pieces and holes. t can go past 0 and 1, so springs can overshoot.
@remold-ui/morph only solves the geometry. Drive t with Motion, GSAP, WAAPI, or your own renderer.
Motion for React
@remold-ui/react includes a small adapter for the common case. Motion owns the spring; Remold turns its progress into path data.
import { MorphPath } from "@remold-ui/react";
<svg viewBox="0 0 24 24">
<MorphPath
from={menu}
to={close}
active={open}
fill="none"
stroke="currentColor"
/>
</svg>;pointCloud()
The motion behind particles(), without any drawing: give it new points and read positions, sizes and tones from data each frame. Use it with WebGL, SVG or anything else.
import { pointCloud, samplePath } from "@remold-ui/core";
const cloud = pointCloud(samplePath(a, { count: 3000 }));
cloud.to(samplePath(b, { count: 3000 }));
cloud.step(dt); // then draw cloud.data: [x, y, size, tone, …]