Installation

From an empty project to your brand in motion, in four commands.

Install

The packages are not on npm yet. The commands below are the ones that will work at launch.

The engine is the only runtime dependency. The CLI copies pieces into your project, so they are your code from then on.

Terminal

npm i @usefluid/motion
npx @usefluid/cli init --out src/styles/fluid-theme.css

Your logo

Export the logo as SVG with its strokes converted to outlines. The CLI fits it to the 120 box the pieces use. Open letters, holes and logos in several parts work.

Terminal

npx @usefluid/cli logo logo.svg --out src/lib/logo.ts

Add pieces

Each piece lands in its own folder, with any piece it uses. Run list to see them all.

Terminal

npx @usefluid/cli list
npx @usefluid/cli add splash-choice morph-button pet

App.tsx

import { MorphButton } from "@/components/fluid/morph-button/MorphButton";

<MorphButton state={state} onClick={send} />;