Getting Started

Architecture overview, design philosophy, and quickstart guide for MotionFoundry v2.0.

MotionFoundry v2.0 is a production-ready, open-source animated React component ecosystem engineered for modern React 19 and Next.js App Router applications. All 48 components — the 24-piece Core collection and the 24-piece Studio Kit collection — are built with strict TypeScript interfaces, scoped CSS Modules, hardware-accelerated Motion (motion/react), SVG, or HTML5 Canvas engines tailored to each animation, and automatic prefers-reduced-motion accessibility support.

Architectural Pillars

  • Multi-Engine Animation Architecture: Uses motion/react for spring physics and shared-layout choreography (KineticType, TextMorph, MagneticButton, ElasticPressButton, HoloTiltCard, PortalRevealPanel, MagneticDock, MorphingCommandPalette), pure CSS & SVG filters for zero-runtime continuous effects (OrbitingWords, VelocityButton, LiquidGlassCard, MorphingBorder, InfiniteMarquee, FluidMeshBackground, NoiseAurora, LiquidBlob), and capped HTML5 Canvas loops for spatial node networks (ConstellationCard, OrbitingParticles).
  • Two Collections: Core covers spatial surfaces, canvas networks, and kinetic typography; Studio Kit covers everyday product motion — text reveals, feedback buttons, interactive cards, ambient backgrounds, loaders, and list interactions.
  • Single Source of Truth Registry: Every component's .tsx and .module.css implementation inside packages/ui/src/ feeds the shared registry/registry.json manifest (generated by node scripts/build-registry.mjs), the @motionfoundry/ui package build, the motionfoundry CLI installer, and the interactive code tabs on this website.
  • Configurable Brand Identity: The working brand name (MotionFoundry) and package scope (@motionfoundry/ui) are centralized in apps/docs/lib/brand.ts so teams can fork and rebrand the entire ecosystem by editing a single file.
// Central brand configuration (apps/docs/lib/brand.ts)export const BRAND_CONFIG = {  name: "MotionFoundry",  packageScope: "@motionfoundry/ui",  cliCommand: "motionfoundry",  version: "2.0.0",  license: "MIT",};