R

22 个稀有组件,全部实时运行

这一页上每一个预览都是真实挂载的 React 组件,不是录屏。 点开任意一个查看它的安装命令、用法示例与完整属性表。

视觉与动效5导航5交互控件8数据展示2布局与内容2

共 22 个组件

流体光球

FluidOrb

一个 WebGL 光球,内部有缓慢漂移的流体着色。支持 size 与 color 属性,跟随系统主题减少动效设置。

WebGLCanvas零依赖
rare-ui/fluid-orb
查看文档与属性
待机

点阵光球

MatrixOrb

一个由点阵构成的光球,可以在 idle、listening、thinking 三个状态之间动画切换,常用于语音助手入口。

Canvas状态机语音助手
rare-ui/matrix-orb
查看文档与属性

重力字母

GravityLetters

一个可玩的引力场:字母、数字、emoji,或者任何你传入的组件都会真实下落并堆叠起来。

物理拖拽可玩
rare-ui/gravity-letters
查看文档与属性
正在生成画面…

网格揭示

GridReveal

给 AI 图片生成用的加载态:网格会随着进度分裂、抖动,图片就绪后无缝变成真实画面。

加载态AI 图片进度驱动
rare-ui/grid-reveal
查看文档与属性

文件夹组件

FolderComponent

一个会呼吸的文件夹:悬停时里面的卡片扇形散开,点击时带 3D 倾斜的封盖抬起。支持颜色与尺寸。

3D 倾斜Motion悬停
rare-ui/folder-component
查看文档与属性

一、滚动进度

底部的胶囊会实时反映你的阅读位置。它固定在视口下方,滚动条走到哪里,胶囊就填到哪里。

当页面足够长时,进度本身就成了导航的一部分,而不是一个额外要看的指示器。

二、展开成菜单

点击胶囊,它会展开成一个 squircle 菜单,把 sections 里的章节列出来。

选中任意一项即可平滑跳转,弹簧动画让这个展开动作有明确的重量感。

三、无障碍与 reduced motion

组件遵循 prefers-reduced-motion:当系统要求减少动效时,位移被移除,只保留必要的状态变化。

在上面的区域里滚动,然后点击底部的胶囊。

滚动进度

ScrollProgress

跟随阅读位置的进度胶囊。点击后会展开成 squircle 菜单,直接跳到任意章节。

阅读进度squircleMotion
rare-ui/scroll-progress
查看文档与属性

粘性导航

GooeyNav

选中的那一项会从整条导航里「分离」出来,中间由一条收窄的粘性颈部连接。

粘性形变SVG 路径Motion
rare-ui/gooey-nav
查看文档与属性

弹跳侧栏

BounceSidebar

纵向导航列表,激活指示器带弹簧回弹。支持分组标题与链接项。

弹簧动画分组Motion
rare-ui/bounce-sidebar
查看文档与属性

钩子侧栏

HookSidebar

虚线轨道式的纵向导航,激活项会被一段钩形导轨标记出来。

虚线轨道钩形导轨Motion
rare-ui/hook-sidebar
查看文档与属性

指针邻近

把指针移到右侧的虚线上:离得越近,那一条越长。距离本身变成了可读的信息。

它比传统的圆点导航更安静,也比单纯的进度条承载更多结构——标题、小节与正文可以有不同的权重。

继续在这个框里滚动,激活的那一条会保持高亮。

子章节

kind 为 subtitle 的章节使用更短的基准长度,于是层级一眼可见,不需要额外的缩进或编号。

所有长度变化都在同一个弹性系统里,所以指针移动时整列会像水波一样响应。

滚动同步

组件会监听最近的滚动容器,用 activeOffset 判定当前章节,滚动时自动更新激活项。

邻近侧栏

ProximitySidebar

虚线式滚动侧栏:指针越靠近某一项,它的虚线就越长,形成远近景深。

指针邻近景深阅读定位
rare-ui/proximity-sidebar
查看文档与属性

等待操作…

删除按钮

DeleteButton

在原地二次确认的删除按钮,不需要弹窗,也不会打断用户的心流。

就地确认无弹窗Motion
rare-ui/delete-button
查看文档与属性

直接输入数字试试,填满后进入成功状态。

验证码输入

OtpInput

一次性验证码输入框:字符会滚动就位,光标从一个格子滑向下一个,并带成功 / 失败状态。

滚动字符光标滑动状态反馈
rare-ui/otp-input
查看文档与属性
小时
分钟

时长选择器

DurationPicker

用弹簧和形变(gooey)动画输入小时与分钟的选择器,squircle 圆角平滑过渡。

gooeysquircle弹簧
rare-ui/duration-picker
查看文档与属性

点击按钮打开 emoji 面板

Emoji 反应

EmojiReaction

tapback 风格的反应按钮:点开后弹出一排 Apple emoji,选中后会有复制体从按钮里飘出来。

Apple Emoji粒子飘散tapback
rare-ui/emoji-reaction
查看文档与属性

通知铃铛

NotificationBell

iOS 风格的通知铃铛,带未读数量角标或纯圆点两种形态。

iOS 风格角标asChild
rare-ui/notification-bell
查看文档与属性

步骤播放器

StepPlayer

iOS 风格的分段进度轨道,带播放、暂停与重播控制。当前步骤会拉伸成一条正在填充的进度条。

分段进度播放控制flubber
rare-ui/step-player
查看文档与属性

任务清单

TaskList

勾选完成的任务会被划掉并自动移动到列表底部,支持受控与非受控两种用法。

拖底排序划除动效受控
rare-ui/task-list
查看文档与属性

语音条

VoiceNote

带可拖动波形与播放控制的语音消息条,支持倍速切换,多条的播放会互相打断。

波形拖动倍速播放互斥
rare-ui/voice-note
查看文档与属性
¥128,400.0 起

数字滚动

AnimatedCounter

像机械里程表一样的数字滚动,逐位进位,支持小数、千分位与前后缀。

里程表逐位进位格式化
rare-ui/animated-counter
查看文档与属性

1809 contributions in 2026

贡献最多的仓库
  • sswamimalode07/rare-ui412
  • sswamimalode07/portfolio188
  • sswamimalode07/motion-lab96

贡献热力图

GitHubActivity

贡献热力图加一张可展开的底部面板,用来给你的贡献最多的仓库排名。

热力图仓库排行展开面板
rare-ui/github-activity
查看文档与属性

点击按钮打开抽屉,再在内部的多个视图之间来回切换。

家族抽屉

FamilyDrawer

底部抽屉,内部多个视图之间平滑地形变切换,灵感来自 Family 应用,基于 Vaul。

Vaul视图形变高度自适应
rare-ui/family-drawer
查看文档与属性
hero.tsx
import FluidOrb from "@/components/ui/fluid-orb"
export function Hero() {
return (
<FluidOrb size={220} color="#fc4c01" />
)
}

代码块

CodeBlock

干净的代码块,整套主题都由一条强调色推导而来。传代码和一个 hex,剩下的交给它。

单色驱动主题语法高亮复制按钮
rare-ui/code-block
查看文档与属性