UI Components：650+ 个 React 特效组件，在线调参、复制即用

先说地址

ui.loongsite.com，源码在 GitHub：longguanhong0755/ui-components。不用注册、不用登录，打开就能逛。

它解决的是很具体的一类需求：页面需要一点“活”的东西——一个会呼吸的背景、一段有质感的文字动画、一个能转的 3D 物体——但从零写 shader、或者调半天缓动曲线，成本又太高。

里面有什么

目前收录 664 个基础组件和 448 个预设变体，仓库里合计 1,112 个 .tsx 文件，按 12 个分类整理：

分类	收录（含变体）	分类	收录（含变体）
背景动画	286	文字特效	181
交互元素	162	动画	134
图片画廊	118	图片	90
按钮	43	光标特效	43
加载动画	28	小游戏	14
边框	12	其他	1

既有纯 Canvas / WebGL 的重型场景，也有不用 WebGL、只靠 DOM 和 framer-motion 就能跑起来的小东西。随手举几个：

• 地球：d3-geo 算投影、three 渲染，可以拖拽旋转；
• 吸积圆盘 / 黑洞：一个用 WebGL 点云绕核心公转、处理遮挡与两极喷流，另一个用 Canvas 模拟引力吸入和事件视界；
• 龙卷风：WebGL 粒子在首屏背后盘旋，彗星掠过会扰动粒子场，适合当整屏背景；
• 光标圆环场、网格文字悬停：光标经过就有反馈，适合做交互细节；
• 霓虹边框、加载动画、小游戏：适合当页面里的点缀。

逛：滚到哪里，预览到哪里

列表里的卡片滚进视口后会自动开始运行，不需要一个个点播放。站点会根据设备实际帧率调节同时运行的预览数量：画面变卡就少开几个，让出位置的卡片停在最后一帧，滚回来继续播。

搜索、分类、排序都会写进地址栏，复制链接就能把当前筛选结果发给别人。找参考、发灵感，或者直接甩给同事一句“我想要这种效果”，都挺省事。

调参：参数在源码里，滑杆在页面上

详情页右侧有一块「可调参数」面板。这些参数不是手写的一份配置，而是直接读组件源码里的属性定义，连默认值和取值范围一起搬上来。拖滑杆即时生效；调满意之后，点「复制参数」带走改动，或者复制整段源码、下载 .tsx。

页面右上角可以切白天 / 黑夜模式，预览舞台还能在深色、浅色、棋盘格、网格之间切换，看浅色或透明效果时很方便。

拿进项目：三步

1. 在详情页复制源码或下载 .tsx，放进项目，比如 src/components/ui/；
2. 按文件顶部的 import 安装依赖。常见的有 framer-motion、gsap、motion、three + @react-three/fiber + @react-three/drei；多数组件使用 Tailwind CSS，项目里需要配好；
3. 当普通组件导入：

import Globe from "@/components/ui/globe";export default function Page() {  return <Globe />;}

组件文件顶部带 "use client"，可以直接用在 Next.js App Router；纯 Vite / CRA 项目里删掉这一行即可。需要额外依赖的组件会在列表里标注，只提供源码。

和装一个 npm 组件库有什么不一样

这里的“安装”是把源码复制进你的仓库，而不是新增一条 npm 依赖：

• 不对这个组件库产生运行时依赖，也不会因为它升级而被动改代码，想改哪里直接改；
• 每个组件自包含，用哪个拿哪个，不会把整包打进产物；
• 代价是升级和维护都在自己手里，不同组件的依赖也各不相同，需要逐个确认；
• 预设变体是独立文件（-variant-N.tsx），也可以单独拿走。

如果团队需要统一版本、集中升级，npm 包更合适；如果只是给某个页面加一个特定效果，这种“拿走源码”的方式更直接。

技术上的几个取舍

• 整个画廊是纯静态站，没有后端；站点目录、源码与 GitHub 仓库保持同步；
• 参数面板直接读源码里的属性定义，默认值和范围都来自组件本身；
• 在线预览按需运行，优先保证列表滚动流畅，特效最终是否顺滑仍取决于设备显卡；
• MIT 许可，可自由使用、修改与再分发，含商业用途，无需署名。

什么时候值得打开

想给个人主页添一个背景、给产品落地页加一段开场动画、给 demo 做点视觉记忆点，又不想从 shader 和缓动曲线开始抠——这里大概率能翻到能用的东西。

直达：ui.loongsite.com · 源码：GitHub · 站内项目页：/projects/ui-components