Magic UI

项目概述

Magic UI 是一套专为现代 Landing Page、SaaS 产品官网及创意技术主页打造的炫酷动效组件库。基于 React、TypeScript、Tailwind CSS 与 Motion (Framer Motion) 构建，采用与 shadcn/ui 相同的复制代码架构。

从极具视觉张力的 Bento Grid 便当盒布局、发光流光边框（Border Beam）、粒子星空背景到平滑无缝滚动（Marquee），助你快速打造顶级科技感主页。

核心特性

• ✨ 50+ 高视觉冲击力动效组件：涵盖便当盒网格、流光边框、3D 地球仪、流星雨粒子、平滑跑马灯等丰富视觉特效。
• 📋 即插即用的复制模式：沿用 shadcn/ui 架构，代码直接引入项目，无冗余多余运行时包袱。
• 🎨 原生 Tailwind CSS 集成：使用标准 Tailwind 工具类自由调控速度、延迟、颜色与尺寸。
• 📱 响应式与深色模式完美适配：所有动效组件在移动端及深浅色模式下均经过细致的性能与视觉调优。

快速上手与示例代码

# 通过 CLI 一键引入
npx shadcn@latest add https://magicui.design/r/bento-grid
npx shadcn@latest add https://magicui.design/r/border-beam

流光卡片示例

import React from 'react';
import { BorderBeam } from "@/components/magicui/border-beam";

export default function CardDemo() {
  return (
    <div className="relative rounded-2xl border p-6 bg-card overflow-hidden">
      <h3 className="font-bold text-lg">下一代科技产品</h3>
      <p className="text-muted-foreground text-sm">体验前沿的视觉微动效交互。</p>
      <BorderBeam size={250} duration={12} delay={9} />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：高转化率产品营销官网、开发者个人作品集、AI 创意产品落地页及需快速增加科技质感的交互区块。
• 不适用场景：对包体积极端敏感且不需要任何复杂视觉动效的高密度企业数据报表管理后台。