标语打字机

解决的问题

工具箱类产品的首页通常需要一句核心标语来传达产品定位。但静态标语有个问题：无法在单屏内展示多个版本。用户可能针对不同场景（新用户引导、功能更新、节日活动）准备了几套短文案，却只能选一句挂上去。另一种常见需求是轮播——标语每隔几秒自动切换，让访客在停留期间看到不同卖点。

这个技能解决的就是这个问题。它不要求你写完整的动画引擎，也不做复杂的时间线编排，只是用 typed.js 在指定容器里循环播放 2～4 句短标语，打字效果结束后短暂停留再切到下一句。

如何工作

核心流程很简单。首先在页面中放一个空容器，比如 <span id="slogan-mount"></span>。技能会读取你传入的标语数组，然后调用 new Typed(el, { strings: [...], typeSpeed: ... }) 初始化。typed.js 自己负责打字动画、暂停、退格、循环这些细节，技能层不需要重写。

关键约束有几个。第一，容器必须是空的，不能有初始文本，否则 typed.js 会把已有内容当作 strings 的一部分，导致显示异常。第二，技能在组件卸载时会调用 destroy()，这是 typed.js 提供的清理方法，防止页面上残留多个打字实例。第三，技能会读取 prefers-reduced-motion 这个媒体查询，如果用户在系统层面开启了"减弱动态效果"，就直接显示第一条标语，不做打字动画。

适用边界与注意点

这个技能有明确的适用范围。它针对的是短标语，2～4 句，每句控制在 10～15 个字以内效果最好。打字机动画在长段落上表现很差——人眼阅读速度跟不上逐字显示，用户会本能地跳过动画直接等结束。如果你需要打字机效果来展示完整段落或代码块，应该用更专业的方案，而不是这个技能。

另一个需要注意的地方是文案质量。打字机效果本身不会帮你写标语，它只是一个呈现方式。轮播的标语之间需要有逻辑关系，比如并列的功能卖点，或者逐步递进的价值主张。随机切换不同主题的文案会让用户感到混乱。

最后是技术依赖。这个技能依赖 typed.js，你需要先通过包管理器安装。它不会帮你自动引入这个库。如果你的项目已经有 typed.js 的封装，需要注意版本兼容性。