Introduction
Fluid is open-source motion for React, built on one idea: outlines that flow on real springs. Shapes become your logo, pills flow between options and windows grow out of the card that opened them.
Fluid
- The engine@usefluid/motion: closed-form springs and Metamorph, contour morphing between any two shapes or logos. No dependencies.
- The piecesOpenings, controls, characters, text and transitions. The CLI copies them into your project, so they are your code.
- The skillsThey teach your coding agent to set up your brand, pick and adapt pieces, build new ones and record them as video.
Principles
- Your brand first: every piece reads ten CSS variables, so it wears your colours, radius and font.
- Copy, do not install: pieces live in your code. Change anything.
- Motion with a reason: each animation tells you what changed, and none of them makes you wait.
- Accessible: keyboard, screen readers, 44 px targets and reduced motion in every piece.