正在打开每日关注
正在打开每日关注
Elia 展示 Arc UI 的图表块,为 shadcn/Next.js 提供可刷选读数、形态随数据过渡的 React 动效可视化组件。
Amazing chart blocks Live on https://t.co/PAj2XcPYIF https://t.co/reOkpc1U7J
是什么:Arc UI 是面向 shadcn 与 Next.js 的动效 React 组件库,官网称含 148 个组件与 86 个 blocks,可经 shadcn CLI 一键安装、源码落入项目。推文聚焦其图表块:条形图、雷达图、桑基图、漏斗图、环形图与延迟折线图等。
核心设计:图表不止静态呈现,而是“可读”的——scrub 时间轴逐日读数、悬停 tooltip 给出排名与环比、切换城市雷达即时重绘;数值变化用计数动画承接,弧与条随数据 morph,反馈连续。库内分层清晰:组件解决单一任务,blocks 组合成完整流程;动效内建 reduced motion;文档提供 Markdown、llms.txt 与 MCP,供 AI 工具直接消费。
关键洞察:图表块的差异化不在渲染精度,而在交互叙事——把“读数”变成动作(scrub、悬停、切换),把状态切换变成形态过渡,可视化体验感来自微交互的堆叠。同时“AI 可读文档”正成为组件库的新分发渠道。
边界与风险:多数 blocks 与动效组件锁在 Pro 付费墙;重动效在低性能设备需降级;源码虽可改,语义 token 与运动参数须与设计系统对齐,否则易风格漂移。