# Fluid

> Open-source motion for React: outlines that flow on real springs, shapes that become your logo, and pieces that wear your brand through ten --fluid-* CSS variables. The CLI copies pieces into your project; the engine @usefluid/motion has no dependencies.

## Docs

- [Introduction](https://fluidui.willradoux.com/docs)
- [Installation](https://fluidui.willradoux.com/docs/installation)
- [Theming](https://fluidui.willradoux.com/docs/theming)
- [Engine](https://fluidui.willradoux.com/docs/engine)
- [CLI](https://fluidui.willradoux.com/docs/cli)
- [Agent skills](https://fluidui.willradoux.com/docs/skills)
- [Video](https://fluidui.willradoux.com/docs/video)
- [Accessibility](https://fluidui.willradoux.com/docs/accessibility)
- [Contributing](https://fluidui.willradoux.com/docs/contributing)

## Metamorph

- [Shape Morph](https://fluidui.willradoux.com/components/shape-morph.md): Flows through several shapes and lands on your logo, whatever its outline.
- [Icon Morph](https://fluidui.willradoux.com/components/icon-morph.md): Icons that flow into each other: menu and close, play and pause.
- [Menu Morph](https://fluidui.willradoux.com/components/menu-morph.md): The three menu bars become the menu: the button flows into the card and each bar into a row.
- [Morph Dialog](https://fluidui.willradoux.com/components/morph-dialog.md): A window that flows out of the card that opened it and back into it.
- [Morph Button](https://fluidui.willradoux.com/components/morph-button.md): A button that shrinks into a ball while it sends and opens again with a check.
- [Copy Morph](https://fluidui.willradoux.com/components/copy-morph.md): A copy button where the two sheets flow into a check.
- [Morph Loader](https://fluidui.willradoux.com/components/morph-loader.md): A loader that keeps changing shape and ends on a check.

## Characters

- [Pet](https://fluidui.willradoux.com/components/pet.md): A soft little square that shows its mood with its eyes alone, and the eyes follow the pointer.
- [Bot](https://fluidui.willradoux.com/components/bot.md): A chat assistant with a face: it listens, thinks and answers by changing shape.
- [Mascot](https://fluidui.willradoux.com/components/mascot.md): Over thirty object mascots, from a coffee mug to a dumbbell, that blink, follow the pointer and flow into each other.

## Controls

- [Segmented Picker](https://fluidui.willradoux.com/components/segmented-picker.md): A picker where the pill flows: one edge leaves before the other.
- [Pill Tabs](https://fluidui.willradoux.com/components/pill-tabs.md): Tabs in a dark pill, with the light pill flowing between them and a count beside each.
- [Spring Switch](https://fluidui.willradoux.com/components/spring-switch.md): A switch whose knob stretches on the way and lands on the spring.
- [Spring Button](https://fluidui.willradoux.com/components/spring-button.md): A button that sinks when touched and comes back with weight, squashing with its speed.
- [Morph Island](https://fluidui.willradoux.com/components/morph-island.md): A pill that grows into a panel, in the same body.

## Text

- [Word Cycle](https://fluidui.willradoux.com/components/word-cycle.md): The word changes out of a blur, and the sentence never jumps in width.
- [Text Reveal](https://fluidui.willradoux.com/components/text-reveal.md): The headline comes in letter by letter, and screen readers get the whole sentence.

## Transitions

- [Logo Wipe](https://fluidui.willradoux.com/components/logo-wipe.md): A screen change where your logo covers, holds and leaves upwards.
- [Island Toast](https://fluidui.willradoux.com/components/island-toast.md): A notice that drops from the top as a pill, grows with the message and goes back up.

## Splash

- [Splash Choice](https://fluidui.willradoux.com/components/splash-choice.md): Shapes become the logo, it rises, and each option you pick changes the shape and the sentence.
- [Splash Shapes](https://fluidui.willradoux.com/components/splash-shapes.md): Shapes become the logo, it rises, and the sentence and the button appear.
- [Splash Dots](https://fluidui.willradoux.com/components/splash-dots.md): Scattered dots fly to the logo's outline and it fills in.

## Optional

- [Everything in one file](https://fluidui.willradoux.com/llms-full.txt)