多光标页面搭建

12个彩色光标随滚动打字、画框、搬入图片并排版，选框实时跟随，上滚可撤回搭建。

滚动动效六框架TypeScript

演示

在演示内滚动，继续或撤回页面搭建。工具条可暂停、重播；聚焦滚动区后，空格或 P 暂停，R 重新开始。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

MultiCursorBuilder.tsx

正在加载代码…

App.tsx

import { MultiCursorBuilder } from "./MultiCursorBuilder";

export default function App() {
  return <MultiCursorBuilder />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.playing` 播放或暂停本地搭建和光标运动。	`boolean`	`true`
`options.speed` 搭建速度倍数，范围0.25–2。	`number`	`1`
`options.skipIntro` 跳过环绕与页面拉框开场，直接开始搭建。	`boolean`	`false`
`options.showToolbar` 显示工具状态、滚动百分比、暂停和重播控件。	`boolean`	`true`
`options.onPhaseChange` 动画在环绕、散开、拉框和搭建阶段切换时触发。	`(phase: "intro" \| "burst" \| "board" \| "build") => void`
`options.onReplay` 仅在用户通过按钮或键盘重播时触发。	`() => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`760`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`