字符鲨鱼与鱼群

字符鲨鱼在细网格上摆尾游动、追逐鱼群，支持指针避让与点击惊散，并可叠加半透明本地输入框。

字符动画六框架TypeScript

演示

移动或轻点水面惊散鱼群。聚焦水面后，空格暂停，R重置，方向键移动，回车制造水波。输入仅保存在本地历史，语音需接入回调。

npm install react react-dom

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

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

npm install react react-dom

AsciiSharks.tsx

正在加载代码…

App.tsx

import { AsciiSharks } from "./AsciiSharks";

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

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

正在加载提示词…

属性	类型	默认值
`options.theme` 浅色视频样式，或源码默认的黑色渲染。	`"light" \| "dark"`	`"light"`
`options.paused` 暂停模拟，键盘与本地控件仍可操作。	`boolean`	`false`
`options.speed` 模拟速度倍数，范围0.25–2。	`number`	`1`
`options.seed` 实例独立的随机种子，更新后仅重置当前海洋。	`number`	`7`
`options.fishCount` 覆盖按面积计算的小鱼数量，范围0–340。	`number`
`options.sharks` 1–8条鲨鱼的种类与相对尺寸，默认为混合种群。	`{ kind: "classic" \| "hammerhead" \| "zebra" \| "tiger" \| "greathammer" \| "mako" \| "thresher" \| "nurse"; size: number }[]`
`options.showComposer` 显示本地输入框、轻雾与历史记录。	`boolean`	`true`
`options.onSubmit` 接收本地文字与所选File对象，不会自动上传。	`(message: { text: string; attachments: File[] }) => void`
`options.onVoiceInput` 接入自己的语音处理回调后启用麦克风按钮。	`() => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`880`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`