用途：用 Rive 实现由状态驱动的交互式动画，动画逻辑内置在 .riv 文件的状态机中，前端只负责控制输入。适用于需要响应输入（hover、click、数据）的动画、动画按钮/开关/复选框、由数值驱动的进度指示、多状态角色或图标，以及复杂状态过渡。简单装饰循环建议用 Lottie，静态插图用 SVG，快速加载动画用 CSS/Lottie。
核心概念：状态机。由前端控制输入，Rive 负责动画过渡。输入类型有布尔（input.value = true/false）、数值（input.value = 75，如进度 0-100）、触发器（input.fire()）。
使用方式：安装 npm install @rive-app/react-canvas；加载带状态机的 .riv 文件；用 useStateMachineInput 获取输入；把输入接到 UI 事件上。常见模式：开关用布尔输入 isOn，点击切换；进度用数值输入 progress，在 useEffect 中同步；通知铃用数值 count 加触发器 ring。
尺寸由容器控制，需要显式宽高或 aspect-ratio。SSR 场景需 'use client'，重动画可用 dynamic(() => import(...), { ssr: false }) 或 mounted 检查。性能上可惰性加载，并在不可见时暂停（如配合 useInView 调用 rive.play()/pause()）。
限制与排错：动画不播放时检查 autoplay、状态机名称大小写、.riv 路径；输入为 undefined 时先判空再赋值，并确认输入名与 Rive 编辑器一致；出现 hydration 不匹配时加 'use client' 或动态导入；尺寸异常时给容器显式尺寸。具体价格、平台支持与更多 API 细节暂未提供。