Motion Primitives

项目概述

Motion Primitives（motion-primitives.com）是由知名独立设计师 ibelick 打造的开源 React 高阶动效组件库，拥有 6,100+ GitHub Stars。项目基于 Framer Motion 与 Tailwind CSS，将复杂的物理运动学计算抽象为即插即用的现代界面基建，涵盖磁力吸附按钮、动态聚光灯（Spotlight）、折叠卡片与丝滑悬浮坞（Dock）。

核心特性

• 🔮 大师级微交互质感：提供聚光灯光影跟随、波纹文字展开、磁吸拖拽与容器形变（Morphing Dialog）。
• ⚡️ Framer Motion 原生加速：深度利用 layoutId 共享元素转场、手势碰撞物理学与 Presence 进退场管理。
• 📋 shadcn 生态无缝对齐：采用源码直接拷贝模式，组件结构清晰，能与既有的 Tailwind 样式变量完美融为一体。
• ♿️ 无障碍与系统动效适配：原生支持 prefers-reduced-motion 减弱动效偏好，键盘导航完全合规。

快速上手与示例代码

# 安装核心动效与样式依赖
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">动态聚光灯表面</h3>
      <p className="text-xs text-muted-foreground mt-2">随鼠标轨迹自适应投射高光阴影与空间纵深感。</p>
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：打造具备 Apple / Linear 级奢华交互质感的产品官网、AI 交互终端、SaaS 控制台与个人创意作品集。
• 核心优势：代码量精炼，将高门槛的 Framer Motion 复杂动效直接沉淀为可直接维护的高内聚组件。