Apparat/UI Vibe 项目

Apparat/UI 是一款专为现代创意工具类软件设计的开源 React UI 组件库，由开发者 Tommy Jepsen 创建并以 MIT 协议开源。该库专注于为画布编辑器、节点图形界面、运动视频编辑器、矢量绘图工具等高精度创意软件提供精致、触感强烈的交互组件。该项目基于 React、TypeScript、Tailwind CSS 和 Framer Motion 构建，强调触感微交互、弹簧物理动画和极简等宽字体美学。组件体系围绕标准 CSS 变量主题令牌（background、card、popover、foreground、border、accent）驱动，支持亮色和暗色模式的精细对比度切换，视觉风格高度统一。核心功能方面，Apparat/UI 提供了丰富的原子级基础控件，包括：CreativeButton 微按钮（支持默认/次要/强调/轮廓/幽灵多种变体）、SlidingNumber 弹簧驱动的数字滚轮（数值增减时数字上下滑动）、CreativeNumberInput 拖拽式数值输入框（支持 px、%、ms、° 等单位）、CreativeAngleKnob 圆形角度旋钮（支持 45° 吸附和 Shift 精确模式）、CreativeColorPicker 颜色选择器（实时十六进制输入与复制）、CreativeEasingCurve 交互式贝塞尔曲线编辑器（可拖拽控制柄并实时预览动画时序）、CreativeSpringPhysics 弹簧曲线可视化工具（可调节张力、摩擦力和质量参数）、CreativeAudioWaveform 音频波形预览组件、CreativeNodeItem 节点图形组件（支持输入/输出端口和内嵌参数控件）。组合型面板组件包括：PropertyInspector 属性检查器面板（整合坐标变换、对齐控制、样式和操作按钮）、FloatingToolbar Figma 风格浮动工具栏（支持光标、矩形、钢笔、文本、手掌等创作工具）、MotionSidebar 物理引擎侧边栏（配置弹簧刚度、阻尼和质量）、LayerTree 层级树面板（支持嵌套画板/图层节点、展开/折叠和激活选择）、KeyframeTimeline 关键帧时间轴（带帧 scrubbing 播放指针和菱形关键帧轨道）、ToolCommandPalette ⌘K 快捷命令面板、ShaderNodeGraph 着色器节点图形界面。完整编辑器模板是该库的另一大亮点：CanvasEditor 提供完整的响应式画布工作室布局；MotionVideoEditor 呈现 16:9 运动设计环境（带曲线物理侧边栏、视频预览视口和关键帧时间轴）；VectorDrawingEditor 矢量画板编辑器（含几何点构图、路径样式检查器和 17 项交互式图层树）；WorkflowNodeBuilder 节点式创意流水线编辑器（连接程序化噪声生成器与图像着色器节点并提供实时参数控制）。技术实现方面，所有组件采用 React Hooks 和 TypeScript 编写，类型安全且易于集成。Framer Motion 提供流畅的布局弹簧动画，Tailwind CSS 通过自定义 CSS 变量实现主题系统，组件间通过标准化 props 接口通信，遵循原子设计方法论分层组织（atoms / molecules / organisms / templates）。项目内置 Oxlint 静态分析、TypeScript 类型检查和 Vite 开发服务器。快速上手：克隆仓库后执行 npm install 安装依赖，运行 npm run dev 启动本地 Vite 开发服务器预览组件，运行 npm run lint 执行静态检查，运行 npm run build 构建生产版本。适用人群：UI 设计师和前端开发者（使用 Figma、Framer 等工具构建原型）、工具类软件团队（视频编辑、图形设计、节点编辑器、运动设计等方向）、开源社区贡献者以及 Vibe Coding 爱好者。该项目以 MIT 许可证开放源码，开发者活跃维护，Twitter/X 账号为 @tommy_jepsen。