流体光球
FluidOrb一个 WebGL 光球,内部有缓慢漂移的流体着色。支持 size 与 color 属性,跟随系统主题减少动效设置。
rare-ui/fluid-orb这一页上每一个预览都是真实挂载的 React 组件,不是录屏。 点开任意一个查看它的安装命令、用法示例与完整属性表。
共 22 个组件
一个 WebGL 光球,内部有缓慢漂移的流体着色。支持 size 与 color 属性,跟随系统主题减少动效设置。
rare-ui/fluid-orb一个由点阵构成的光球,可以在 idle、listening、thinking 三个状态之间动画切换,常用于语音助手入口。
rare-ui/matrix-orb一个会呼吸的文件夹:悬停时里面的卡片扇形散开,点击时带 3D 倾斜的封盖抬起。支持颜色与尺寸。
rare-ui/folder-component底部的胶囊会实时反映你的阅读位置。它固定在视口下方,滚动条走到哪里,胶囊就填到哪里。
当页面足够长时,进度本身就成了导航的一部分,而不是一个额外要看的指示器。
点击胶囊,它会展开成一个 squircle 菜单,把 sections 里的章节列出来。
选中任意一项即可平滑跳转,弹簧动画让这个展开动作有明确的重量感。
组件遵循 prefers-reduced-motion:当系统要求减少动效时,位移被移除,只保留必要的状态变化。
在上面的区域里滚动,然后点击底部的胶囊。
跟随阅读位置的进度胶囊。点击后会展开成 squircle 菜单,直接跳到任意章节。
rare-ui/scroll-progress把指针移到右侧的虚线上:离得越近,那一条越长。距离本身变成了可读的信息。
它比传统的圆点导航更安静,也比单纯的进度条承载更多结构——标题、小节与正文可以有不同的权重。
继续在这个框里滚动,激活的那一条会保持高亮。
kind 为 subtitle 的章节使用更短的基准长度,于是层级一眼可见,不需要额外的缩进或编号。
所有长度变化都在同一个弹性系统里,所以指针移动时整列会像水波一样响应。
组件会监听最近的滚动容器,用 activeOffset 判定当前章节,滚动时自动更新激活项。
等待操作…
直接输入数字试试,填满后进入成功状态。
用弹簧和形变(gooey)动画输入小时与分钟的选择器,squircle 圆角平滑过渡。
rare-ui/duration-picker点击按钮打开 emoji 面板
tapback 风格的反应按钮:点开后弹出一排 Apple emoji,选中后会有复制体从按钮里飘出来。
rare-ui/emoji-reactioniOS 风格的分段进度轨道,带播放、暂停与重播控制。当前步骤会拉伸成一条正在填充的进度条。
rare-ui/step-player1809 contributions in 2026
点击按钮打开抽屉,再在内部的多个视图之间来回切换。
底部抽屉,内部多个视图之间平滑地形变切换,灵感来自 Family 应用,基于 Vaul。
rare-ui/family-drawer