Motion Primitives

Overview

Motion Primitives (motion-primitives.com) by ibelick is an open-source React animation library with over 6,100+ GitHub Stars. Built upon Framer Motion and Tailwind CSS, it bridges the gap between raw motion math and production-ready interface primitives—including cursor follow effects, accordion physics, floating dock docks, and morphing dialogues.

Key Features

• Micro-Interaction Primitives: Pre-built motion building blocks for expandable cards, animated tooltips, spotlight borders, and magnetic buttons.
• Framer Motion Native: Leverages modern layout animations (layoutId), gesture tracking, and presence exits out-of-the-box.
• Copy & Paste Simplicity: Direct source-code copy-paste model designed to pair seamlessly with shadcn/ui design tokens.
• Accessible & Responsive: Keyboard navigable, respects prefers-reduced-motion, and fully typed with TypeScript.

Installation & Quick Start

# Install animation and helper dependencies
npm install framer-motion clsx tailwind-merge

import React from 'react';
import { Spotlight } from '@/components/core/spotlight';

export function SpotlightSurface() {
  return (
    <div className="relative overflow-hidden rounded-2xl bg-card border border-border p-8 shadow-xs">
      <Spotlight className="-top-40 left-0 md:left-60 md:-top-20" fill="white" />
      <h3 className="text-lg font-bold text-foreground">Dynamic Spotlight Surface</h3>
      <p className="text-xs text-muted-foreground mt-2">Illuminates on pointer trajectory.</p>
    </div>
  );
}

Why Choose Motion Primitives?

1. Design-Led Motion: Infuses products with subtle Apple / Linear-grade interaction polish.
2. Zero Maintenance Overhead: Direct code ownership without upstream package breaking change risks.