ObsidianUI

项目概述

ObsidianUI 是一套专为现代 React 与 Next.js 打造的高表现力开源组件库，主打令人耳目一新的微交互与创意动效。与传统基础控件库不同，ObsidianUI 深入探索了物理弹簧动画、高级光标交互、三维视差与 WebGL 画布渲染技术，精选收录了 100+ 个开箱即用的交互组件与模板区块。项目严格遵循 shadcn/ui 注册表规范，开发者通过一条 CLI 命令即可将纯净源码下载至项目本地，拥有 100% 的样式控制权与扩展自由度，且原生提供本地 stdio MCP 服务，极大便利了 AI 编程助手协同。

核心特性

• ⚡️ 高级微动效与光标交互：提供磁性选项卡（Magnet Tabs）、滑动箭头按钮（Arrow Fill Button）、蝴蝶拖尾光标（Butterfly Trail Cursor）等极富视觉冲击力的现代动效。
• 🌀 创意画布与 WebGL 着色器：不仅涵盖常规 UI，还内置抖动画布（Dither Canvas）、分形玻璃（Fractal Glass）、曲面投影（Curved Plane）等前沿 WebGL / Canvas 效果。
• 📦 shadcn 注册表无缝集成：遵循标准的 Copy-Paste 源码直达模式，无多余黑盒依赖，直接通过 npx shadcn add 下载组件、类型与对应 CSS 样式。
• 🤖 本地 MCP 智能体接入：内置 stdio 架构的 Model Context Protocol 协议支持，Cursor、Claude Code 等 AI 工具可实时读取组件清单并自动组装界面。

快速上手与示例代码

# 通过 shadcn 注册表快速安装指定组件
npx shadcn@latest add "https://www.obsidianui.dev/r/arrow-fill-button.json"

"use client";
import React from 'react';
import { ArrowFillButton } from '@/components/block/arrow-fill-button';

export default function HeroCTA() {
  return (
    <div className="flex flex-col items-center justify-center p-12 text-center">
      <h2 className="text-3xl font-bold tracking-tight mb-6">体验次世代创意动效</h2>
      <ArrowFillButton
        href="/components"
        bgColor="#ff6b00"
        fillTextColor="#ff6b00"
        className="shadow-lg hover:shadow-orange-500/20"
      >
        探索所有组件
      </ArrowFillButton>
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：需要打造极具科技感、设计感与差异化视觉体验的创新产品官网、AI 工具首页、数字艺术作品集及高端品牌落地页。
• 与同类方案对比：相较于常规 shadcn/ui 基础套件，ObsidianUI 在光标轨迹、流光粒子与视差滚动等动效维度表现力更强；相较于 Aceternity UI，它对底层 WebGL 着色器与现代文本揭示的封装更加模块化和轻量。