Rewamp UI

项目概述

Rewamp UI 是一套专注于物理真实感与高交互性的开源 React 动效组件库与仪表盘。项目全面基于 React 19、Vite 与 Tailwind CSS 4 构建，旨在打破传统静态 UI 的沉闷感。通过深度融合 Framer Motion 物理弹簧算法与 Three.js WebGL 着色器渲染，Rewamp UI 提供了从三维水波焦散背景、星际跃迁粒子，到拟物化确认滑块、流光按钮与趣味动效开关等一系列令人耳目一新的现代交互。所有组件均采用 Copy-Paste 源码直达机制，配合开箱即用的专有 CLI，零运行时黑盒捆绑，代码归宿完全掌握在开发者手中。

核心特性

• 🌊 顶尖 WebGL 画布背景：内置水波纹焦散（Water Caustics）、极光流动（Aurora）、像素降雪（Pixel Snow）与超光速空间跃迁（Hyperspeed Warp）等高保真 Shader 视觉背景。
• 🕹️ 精雕细琢的微交互控件：涵盖大眼萌动按钮（Googly Eyes Button）、滑动确认控件（Slide to Confirm）、拟物化下载按钮与天际昼夜切换开关等极富趣味的微交互。
• ⚡️ 专有轻量 CLI 分发：支持直接通过 npx rewampui add <component> 一键将组件源码拉取到本地，也可在组件库浏览器中直接复制完整实现代码。
• 🎨 Tailwind CSS 4 现代架构：全量采用 CSS 变量与设计令牌管理主题，开箱原生支持明暗（Light / Dark）色彩自适应，易于无缝融入现有设计系统。

快速上手与示例代码

# 通过专有 CLI 一键添加组件至项目
npx rewampui add slide-to-confirm-button
# 或支持 pnpm / bunx 等各种包管理器
bunx rewampui add theme-toggle

import React, { useState } from 'react';
import { SlideToConfirmButton } from '@/components/ui/slide-to-confirm-button';

export default function CheckoutAction() {
  const [isConfirmed, setIsConfirmed] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center p-8 bg-surface rounded-2xl border border-border">
      <h3 className="text-xl font-semibold mb-4">完成结算流程</h3>
      <SlideToConfirmButton
        onConfirm={() => setIsConfirmed(true)}
        label={isConfirmed ? "支付已成功！" : "滑动以确认支付"}
        sliderColor="#0066cc"
      />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：追求极致视觉表现力的前沿 SaaS 官网、AI 创意产品落地页、数字设计作品集，以及希望通过灵动微交互提升产品辨识度与趣味性的前端团队。
• 与同类方案对比：相较于常规功能型组件库（如 shadcn/ui、Radix Primitives），Rewamp UI 的发力点在于物理仿真与三维着色器；相较于重型 3D 样板，它保持了极高的组件化复用性与纯净的源码所有权。