Great UI

项目概述

Great UI 是专为现代 React 应用打造的高性能、高交互性开源 UI 组件库。项目完全基于最新的 Tailwind CSS v4、Motion 与 TypeScript 构建，遵循现代化“所有权代码（Copy & Paste）”开发哲学。Great UI 专注于打破常规网页界面的平庸感，提供了从滚动飞行卡片（Scroll Flying Cards）、百叶窗式页面转场（Venetian Blinds Transition）到圆形主题切换扩散等大量富有视觉冲击力的交互组件，让开发者能够以极高效率构建令人惊艳的产品级界面。

核心特性

• 🎨 前沿动效与视觉表现：内置大量新颖且高质感的视觉微交互，包括视差悬浮卡片、终端式加载器、ASCII 像素图像转换器以及创意 Mockup 展示器。
• 🎬 沉浸式页面与主题转场：独创 10+ 款即插即用的页面过渡特效（如像素消散、波浪交织、平滑模糊穿越），并配备 4 款极具设计感的圆形/滑块式暗黑模式主题切换器。
• ⚡️ 拥抱 Tailwind CSS v4 与 React 19：完全拥抱现代前端标准，零冗余重型运行时依赖，样式与参数极易修改与二次扩展。
• 📦 源码直出与无障碍支持：所有组件均严格遵循 WAI-ARIA 无障碍交互规范，支持源码自由复制与本地定制，拥有 100% 的代码控制权。

快速上手与示例代码

# 复制组件源码到你的项目中，并安装动画与工具依赖
npm install motion clsx tailwind-merge

import React from 'react';
import { ScrollFlyingCards } from '@/components/ui/ScrollFlyingCards';
import { CircularThemeProvider } from '@/components/ui/CircularThemeProvider';

export function InteractiveShowcase() {
  const cards = [
    { title: 'Tailwind v4 Powered', tag: 'Fast' },
    { title: 'Copy & Paste Workflow', tag: 'Ownership' },
    { title: 'Page Transitions', tag: 'Cinematic' },
  ];

  return (
    <div className="relative min-h-screen bg-background text-foreground p-8">
      <div className="flex justify-end mb-8">
        <CircularThemeProvider />
      </div>
      <ScrollFlyingCards items={cards} />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：希望摆脱模板化雷同设计的 SaaS 官网、高调性 Landing Page、创作者个人作品集、创意营销活动页面以及对转场质感有较高要求的现代 Web 应用。
• 与同类方案对比：相比于传统重型组件库（如 Ant Design 或 MUI），Great UI 更侧重于“高视觉吸引力（Visual-Heavy）”与微交互细节；与 Aceternity UI 相比，它在页面整体转场（Page Transitions）与沉浸式暗黑模式切换上有独到的组件设计。