playthru 是一个用于在网站真实 UI 上播放脚本化演示的轻量 JavaScript 库。假光标在界面上滑动、点击真实元素、在真实输入框中输入文字，镜头会放大聚焦重点内容，随后循环播放。该库无依赖，体积约 5 KB，无需导入样式表。所有时序由库固定，不提供速度、缓动或时长选项。
用途与主要能力
playthru 用于给网站添加脚本化、循环播放的产品演示，演示对象是站点真实界面，而非录制视频。它通过真实事件驱动应用自身的点击和输入处理器，因此演示效果与真实操作一致。主要步骤包括：move 将光标滑到元素；click 滑动并点击（触发 pointerdown、mousedown、pointerup、mouseup 与 click）；type 点击输入框后以拟人节奏输入（兼容 React 和 Vue 受控输入）；key 触发 keydown 与 keyup；zoom 与 zoomOut 控制镜头推近拉远；wait 暂停；run 执行自定义代码步骤；reset 在循环之间恢复应用状态。目标可以是限定在舞台内的 CSS 选择器或 DOM 元素。
使用方式
项目已有 package.json 和打包工具时，使用 npm 安装：npm i playthru，然后 import { playthru } from "playthru"。纯 HTML 无工具链时可用 CDN：<script type="module"> import { playthru } from "https://esm.sh/playthru"; </script>，脚本需放在舞台标记之后或 body 末尾。React 可使用 playthru/react 提供的 Playthru 组件或 usePlaythru(ref, script, options)；Next.js App Router 中需在文件顶部加 "use client"。其他框架在挂载后调用 playthru(el)，卸载时调用 destroy()。
使用前需创建舞台元素，即演示播放的容器，通常为承载应用 UI 的固定高度盒子（如 height: 520px），库会对其设置 overflow: hidden，并应保证只有一个子元素作为镜头移动的场景。脚本接触的元素必须位于舞台内。目标应使用稳定的 id 或 data-* 属性。演示脚本通过链式调用编写，默认在舞台进入视口 30% 时开始并无限循环。选项作为第二个参数传入：playthru("#hero", { loop, autoplay, pauseOnHover })，三者默认均为 true；pauseOnHover 在真实鼠标悬停时暂停演示并隐藏假光标。返回对象提供 .play()、.pause()、.destroy()、.playing。
建议演示包含 4 到 8 个步骤讲述一个完整故事，并在 reset 中撤销脚本所做的一切改动，否则第二轮循环会从错误状态开始。假光标无法触发 CSS :hover，也不会移动真实焦点，因此库用 data-playthru-hover 与 data-playthru-focus 属性标记元素，需将现有悬停和聚焦样式映射到这些属性上。
适用场景与限制
适用于落地页、产品页或应用页面中的交互式功能演示，让访客在不录制视频的情况下看到真实操作流程。限制包括：选择器无匹配会中止演示并在控制台输出 playthru: nothing matches；链接和提交按钮不会导航，默认动作被阻止，若需效果须有 JavaScript 点击处理器；演示事件会到达整个页面，舞台外菜单打开时演示会暂停（通过 aria-expanded="true" 配合 aria-haspopup 或 combobox，或 :popover-open 检测），自定义弹窗应忽略 event.isTrusted === false 的事件；无法定位 iframe、canvas 或 WebGL 内元素；绘制的文本光标仅出现在单行输入框，textarea 和 contenteditable 会被输入但不显示光标；prefers-reduced-motion 下光标跳跃、镜头静止、循环无淡出；小屏幕上若缩放目标无法以 1.3 倍容纳，镜头保持不缩放。
检查与文档
启动开发服务器，或将纯 HTML 目录用静态服务器提供（ES 模块不能从 file:// 加载），滚动舞台到视口内观察完整一轮及第二轮确认 reset 生效，并检查控制台是否有 playthru: 错误。文档地址：https://playthrou.diip3sh.xyz。