Magic UI

Magic UI 是面向落地页和用户侧营销内容的动效组件集合。官网当前说明免费开源部分采用 React、TypeScript、Tailwind CSS 与 Motion 构建，文档将其定位为可复制粘贴到应用中的组件、区块和模板；站内另有 Showcase、MCP 说明以及 Pro 模板入口。

先确认页面是否真的需要动效

Magic UI 更擅长 Hero、Logo Cloud、文字揭示、光效、边框、粒子和滚动展示等营销表达，不应取代后台表格、复杂表单和业务流程组件。先写清页面的核心承诺与主行动，再选择能解释层级或引导视线的效果，不能用动画补救空洞文案。

效果要与信息任务对应

同屏堆叠多个高强度效果会争夺注意力。

复制代码后要纳入自己的系统

1. 按官方安装页核对依赖和项目配置。
2. 复制所需组件，不批量引入无关效果。
3. 替换颜色、字体、圆角与间距令牌。
4. 删除演示文案、假数据和不需要的装饰。
5. 将组件写入版本控制并补充团队说明。

复制粘贴代表可以修改源码，不代表无需理解实现。

Motion 参数要形成统一节奏

为进入、强调、循环和页面切换分别规定时长、缓动与延迟上限。连续循环只保留在确有信息作用的元素上；用户滚动很快时，内容不应因为动画尚未完成而不可见。多组件组合前先画时间线，避免每个区块各自“表演”。

性能预算从首屏开始

• 检查 JavaScript 与依赖体积；
• 避免大量粒子和阴影持续占用 GPU；
• 图片、视频和字体按实际尺寸加载；
• 在中低端手机测试滚动与交互延迟；
• 动画失败或脚本关闭时仍能阅读内容。

Showcase 展示视觉可能性，不能代替真实设备数据。

减弱动态与键盘访问必须保留

响应 prefers-reduced-motion，为循环、视差和快速位移提供静态或淡入版本。按钮、链接和弹层仍要有清楚的 focus 状态、语义标签和合理阅读顺序；纯装饰元素避免进入辅助技术的朗读树，文字不能只靠动画结束后才出现。

免费组件与 Pro 模板分开核对

官网将免费开源组件与 Pro 的区块、模板产品分开呈现。购买前查看当前包含内容、更新方式、项目数量和许可；演示站中的字体、图片和品牌示例也可能需要替换。交付时记录组件来源、本地修改、依赖版本和许可凭据，便于后续维护。