@design-llm/motion

精美的 React 动效组件库，提供丰富的动画效果组件。

安装

npm install @design-llm/motion

快速开始

import { BlurText, CircularText, ShinyText } from '@design-llm/motion';

function App() {
  return (
    <div>
      <BlurText text="Hello World" />
      <CircularText text="Rotating Text" />
      <ShinyText text="Shining Text" />
    </div>
  );
}

组件列表

文本动画

• BlurText - 模糊文本动画，文字从模糊到清晰逐个显示
• CircularText - 圆形旋转文字，文字沿圆形路径排列并旋转
• ScrambledText - 扰动文字效果，鼠标移动时字符随机变换
• ShinyText - 闪光文字动画，文字带有闪光扫过效果

边框动画

• FlowingDashedBox - 流动虚线边框，可配置方向、速度、颜色
• ElectricBorder - 电光边框，电光流动边框效果

背景动画

• FallingPattern - 下落图案背景，无限循环的粒子下落动画
• BlackHole - 黑洞可视化，基于 Three.js 的 3D 黑洞及吸积盘效果
• SquareLoader - 方形加载动画，6个或9个方块按顺序闪烁的加载效果
• Aurora - 极光流体动效，使用 WebGL 渲染自适应流动的极光效果
• FluidBackground - 流体背景动画，包含旋转的圆形元素、玻璃效果和环形动画
• MeshGradient - 网格渐变背景，使用 WebGL 渲染流动的网格渐变效果

按钮组件

• MetalButton - 金属质感按钮，双层旋转金属渐变边框
• LiquidMetalButton - 液态金属按钮，液态流动金属质感按钮

卡片组件

• PixelCard - 像素动画卡片，鼠标悬停时显示像素扩散效果

3D 场景

• Gallery3D - 3D 画廊，3D 旋转画廊展示
• Tunnel3D - 3D 隧道，3D 隧道穿梭效果
• ScrollCards3D - 3D 滚动卡片，3D 滚动卡片堆叠效果

使用示例

BlurText

import { BlurText } from '@design-llm/motion';

<BlurText 
  text="Hello World" 
  delay={200}
  animateBy="words"
  direction="top"
/>

CircularText

import { CircularText } from '@design-llm/motion';

<CircularText 
  text="Rotating Text"
  spinDuration={10}
/>

ShinyText

import { ShinyText } from '@design-llm/motion';

<ShinyText 
  text="Shining Text"
  speed={2}
  direction="left"
/>

MetalButton

import { MetalButton } from '@design-llm/motion';

<MetalButton 
  onClick={() => console.log('clicked')}
  size="md"
>
  Click Me
</MetalButton>

FlowingDashedBox

import { FlowingDashedBox } from '@design-llm/motion';

<FlowingDashedBox 
  width={300}
  height={200}
  direction="right"
  speed={2}
/>

BlackHole

import { BlackHole } from '@design-llm/motion';

<BlackHole 
  width={400}
  height={400}
/>

依赖要求

• React 18+ 或 19+
• Tailwind CSS（所有组件高度依赖 Tailwind 类名）
• Framer Motion（已包含在依赖中）

TypeScript 支持

本库提供完整的 TypeScript 类型定义，支持类型提示和类型检查。

License

MIT