Fluid Functionalism

Overview

Fluid Functionalism is an open-source motion component registry designed around the philosophy that UI animation should be purposeful and informative. Built on top of shadcn/ui and powered by Radix UI or Base UI primitives, it provides interactive components with physics-based spring transitions.

Key Features

• Functional Motion Design: Animations crafted specifically to convey spatial continuity, hierarchy shifts, and user interaction feedback.
• Dual Primitive Support: Seamlessly switch between Radix UI and Base UI headless foundations based on project architecture.
• Native shadcn CLI Integration: Install components directly into your codebase with one command using standard shadcn registry namespaces.
• Production-Ready Spring Physics: Fine-tuned spring curves that feel snappy, responsive, and natural across mouse and touch inputs.

Installation & Quick Start

# Install via shadcn CLI
npx shadcn@latest add "https://www.fluidfunctionalism.com/r/fluid-card.json"

import React from 'react';
import { FluidCard, FluidContent } from '@/components/fluid-card';

export function InteractiveCard() {
  return (
    <FluidCard className="rounded-2xl border border-border bg-card p-6 shadow-sm">
      <FluidContent>
        <h3 className="text-base font-bold text-foreground">Adaptive Spring Surface</h3>
        <p className="text-xs text-muted-foreground mt-1">Fluid motion responds to pointer proximity.</p>
      </FluidContent>
    </FluidCard>
  );
}

Why Choose Fluid Functionalism?

1. Purposeful Elegance: Eliminates gratuitous animation slop in favor of refined, informative state transitions.
2. Zero Architecture Lock-In: Direct source-code copy-paste model gives you complete styling and behavioral control.