Original

UI Components That Use Motion to Help

Oct 12, 2026by Sidebar

Fluid Functionalism combines useful motion with reusable interface components.

Fluid Functionalism is a collection of UI components created by @micka_design. UI components are reusable parts of an interface, such as buttons. The website lets visitors explore examples before using them in projects. Its main idea is that movement should communicate useful information. The collection presents motion as part of function, not just appearance.

The introduction explains how movement can show a connection between items. A highlight can also appear as the cursor approaches a control. Spring animations can change direction when a person changes an action. This means an animation can respond before its earlier movement finishes. The documents describe fast, moderate, and slow spring settings for components.

The Button documentation shows several styles and different sizes for actions. A button can include an icon before or after its label. It also supports a loading state while an action is happening. In that state, the button shows a spinner and becomes disabled. The Switch documentation describes a control with an animated thumb and label.

The Accordion component lets people open and close sections of content. One mode allows a single section to stay open at once. Another allows several sections to remain open at the same time. Its documentation also describes keyboard navigation and management of keyboard focus. These features support interaction beyond moving a cursor and clicking a row.

AskUserQuestions provides a flow that moves through a series of questions. People can choose one option or select several options when allowed. They can also provide another answer or skip an optional question. The library works with shadcn/ui and supports Radix or Base UI. Existing theme settings can apply, and installation brings the needed shared utilities.

Key expressions

  • change direction

    방향을 바꾸다

    The animation can change direction.

  • stay open

    열린 상태로 유지되다

    Only one section can stay open.

  • apply to

    ~에 적용되다

    The theme can apply to these components.

Generated with AI. AI can make mistakes.