Siri Orb 深度解析用 SmoothUI 复刻 iPhone 级灵动光球动画【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui如果你曾为 iPhone 上那颗会随声音呼吸、随状态变色的 Siri 光球着迷那么 SmoothUI 的Siri Orb 光球动画组件一定不会让你失望。这个基于 React、Tailwind CSS、Shadcn/ui 与 Motion 打造的灵动光球组件用纯 CSS 渐变与 Web Audio 技术复刻了 iPhone 级的视觉质感——无需任何 WebGL 或 Canvas 画布就能在网页上还原那颗会呼吸、会思考、会倾听的 AI 光球。本文将带你深度拆解它的实现原理、六大交互状态、真实语音响应机制以及完整的接入步骤。为什么选择 Siri Orb不只像更是灵动普通的发光圆点动画只会旋转和闪烁而 SmoothUI 的 Siri Orb 真正做到了有生命感。它的核心实现藏在 siri-orb/index.tsx 中全部代码不到 500 行却包含了一套完整的状态系统、音频响应系统和尺寸自适应算法六层锥形渐变叠加通过注册的 CSSproperty --angle属性驱动旋转形成如流体般流动的彩色光晕实时音频响应大声说话时光球会收紧聚焦音量越大表面越凝实尺寸自适应从 16px 的小状态指示器到全屏 Hero 大球模糊、对比度、点阵、遮罩半径全部按比例缩放完整无障碍支持内置prefers-reduced-motion降级方案核心技术揭秘多层锥形渐变的流体魔法Siri Orb 的视觉核心是一个会转的渐变球。实现上它叠了7 层 conic-gradient锥形渐变每一层都从不同的中心点出发、以不同速度反向旋转再叠加高斯模糊与对比度增强最终在视觉上融合成一颗流动的玻璃球体。整个动画的关键是property --angle这个注册的自定义属性——它让浏览器能把角度值作为可插值属性驱动从而让渐变以 60fps 的流畅度旋转。而点阵遮罩层::after则模拟了 Siri 光球表面那层细密的颗粒感配合mix-blend-mode: overlay让光球在模糊后依然保留细节层次。六大状态让光球读懂你的 AI 应用Siri Orb 最聪明的地方是接入了 SmoothUI 统一的AIState 状态契约定义于 ai-core/index.tsx。同一个状态值可以同时驱动光球、输入框、工具卡片等组件让整个界面像一个有机体一样同步运动状态光球表现idle缓慢旋转饱和度略低安静呼吸listening体积增大完全响应麦克风音量thinking转速提升 2.2 倍但尺寸不变页面布局保持稳定streaming与输出内容同步的柔和脉冲done一次性轻微过冲随后归位error快速去饱和并抖动一次200ms 内完成这种设计哲学很克制thinking时只转不涨避免打扰用户阅读error时靠颜色而不是体积传达异常。每个状态都有专属的动作语言motif靠动什么而非动多快来区分用户一眼就能读懂。真实语音响应让光球跟着你的声音跳动这是 Siri Orb 最惊艳的部分——真实麦克风响应。通过useAudioAmplitudeHook同样在 ai-core/index.tsx 中组件读取麦克风的 RMS 音量并转化为 0–1 的MotionValue。由于它走的是 Motion 的动画帧机制而非 React 重渲染即使 60fps 的音频信号也不会造成性能瓶颈。完整的接线示例可以参考 examples/siri-orb.tsx只需把amplitude传给组件大声说话时光球就会收紧聚焦音量越大内部光晕越凝实如同在专注聆听。如果你只想演示效果而不想申请麦克风权限可以用useSimulatedAmplitude生成一段模拟语音波形体验完全一致。一键接入SmoothUI 光球组件安装步骤在项目中安装 Siri Orb 非常简单只需一条命令npx smoothui-clilatest add siri-orb安装完成后在你的组件中这样使用即可import { useAudioAmplitude } from /components/smoothui/ai-core; import SiriOrb from /components/smoothui/siri-orb; export const VoiceButton () { const { amplitude, status, start, stop } useAudioAmplitude(); const isActive status active; return ( button onClick{() (isActive ? stop() : start())} typebutton SiriOrb amplitude{amplitude} size96px state{isActive ? listening : idle} / /button ); };组件还支持通过colors属性完全自定义配色默认是粉、蓝、紫、品红四色渐变以及通过size属性自由缩放。详细参数与行为说明见官方文档 components/siri-orb.mdx。无障碍与性能细节里的专业Siri Orb 对无障碍做了周全考虑使用useReducedMotion配合 CSS 的media (prefers-reduced-motion: reduce)规则用户开启减少动态效果后旋转、音频响应、状态切换都会立即静止。这是一个纯装饰组件没有任何交互或语义内容因此也无需额外的 ARIA 标注。性能方面所有动画都是 GPU 友好的 transform、filter 与 CSS 属性动画Motion 的MotionValue机制保证了音频信号与动画更新都发生在 React 渲染之外即使页面同时存在多个光球也流畅如初。总结用 SmoothUI 的 Siri Orb你可以在不到十分钟内为你的 AI 产品、语音助手或聊天界面装上一颗 iPhone 级灵动光球。它把复杂的 Web Audio、CSS 渐变动画和状态机设计浓缩成一个开箱即用的组件同时保留了充分的定制空间。如果你想深入阅读完整实现源码入口就在 siri-orb/index.tsx从状态契约到每一层渐变的注释都写得非常详尽——读一遍你也能写出属于自己的灵动光球。【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考