Get started

Your brand, in motion.

Components where the outline flows on real springs, shapes become your logo, and every piece wears your colours and your font. Copy them into your project or hand them to your agent.

View components
npm i @usefluid/motion
Opening.tsx
// npx @usefluid/cli add splash-choice
// npx @usefluid/cli logo logo.svg --out src/lib/logo.ts
import { shapes } from "@usefluid/motion";
import { SplashChoice } from "@/components/fluid/splash-choice/SplashChoice";
import { logo } from "@/lib/logo";

export function Opening() {
  return (
    <SplashChoice
      logo={logo}
      title="Made for"
      word="you."
      options={[
        { value: "shops", label: "Shops", word: "shops.", shape: shapes.square },
        { value: "apps", label: "Apps", word: "apps.", shape: shapes.capsule },
        { value: "brands", label: "Brands", word: "brands.", shape: shapes.flower },
      ]}
    />
  );
}
Pieces
22
Dependencies in the engine
0
Agent skills
7
Video formats
4

01Catalog

Everything here is running.

Play with any piece, or open View to see its code and how it is made.

02One piece, any brand

The same opening, four brands.

Nothing here was made by hand for each brand. Change the logo, the colours and the font, and the motion adjusts by itself.

  • Fluid

  • Orbe

  • Cais

  • Vento

03Any outline

The Metamorph engine spreads points along the border, not around the centre. Open letters, holes and logos in several parts flow without tricks, and at rest the exact drawing comes back. Switch the brand below, or upload yours with the +, and the whole site wears it.

import { fitPath, shapes } from "@usefluid/motion";
import { MorphPath } from "@usefluid/motion/react";

// Any path, at any size, fitted to a 120 box.
const logo = fitPath(myLogoPath);

<svg viewBox="0 0 120 120">
  <MorphPath d={ready ? logo : shapes.circle} />
</svg>

04Real physics

Two numbers run the motion.

The maths is the physics, solved by formula. The result is the same at 30 or 240 frames per second, and nothing shakes when it lands. Move it and see.

useSpring(alvo, aplicar, { w: 20, z: 0.50 })

05Characters

Pets and bots that look like your product.

One body that changes mood on springs. They look at where you are. Tap one to change its mood.

06Video

From the screen to the post, no editor.

Every piece becomes a video recorded frame by frame, smooth on any computer. Story, post, square or wide, with your brand. It also works as a layer over AI-made videos.

npx @usefluid/cli record http://localhost:3000/intro --format story
npx @usefluid/cli record http://localhost:3000/pet --format square --seconds 4
fluid2 h
Send a message
Story 1080 x 1920
fluidFollow

1,204 likes

fluid Your logo, in motion. Recorded frame by frame, no editor.

Post 1080 x 1080

07For agents

Your agent already knows how.

Every piece comes with a ready prompt, and the skills teach your agent to set up the brand, the openings, the characters and the videos.

npx skills@latest add willradoux/fluidui

  • fluid-brand

    Reads your project and builds the brand profile: logo, colours and font.

  • fluid-components

    Picks the right piece and adapts it to your code.

  • fluid-metamorph

    Builds new pieces with the engine, following the rules that keep morphs clean.

  • fluid-splash

    Builds your product's opening from your logo.

  • fluid-characters

    Creates pets and bots with moods tied to your product.

  • fluid-video

    Records any page or piece frame by frame for posts and stories.

  • fluid-ai-video

    Writes prompts for AI footage and lays your brand's motion over it.