墨水扩散图片轮播

新图从点击位置沿不规则墨水边缘向外晕开，边界带有轻微透镜折射，白色卡片后的柔焦色影同步换色。

图片切换六框架TypeScript

演示

点击图片或左右按钮，从落点扩散切换。支持方向键、Home、End 和触屏轻点，快速连点时从当前画面继续。

npm install react react-dom

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

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

npm install react react-dom

InkSpreadCarousel.tsx

正在加载代码…

App.tsx

import { InkSpreadCarousel } from "./InkSpreadCarousel";

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

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

正在加载提示词…

属性	类型	默认值
`options.index` 初始或更新后的照片序号，超出范围时循环。	`number`	`0`
`options.duration` 图片扩散时长，单位毫秒，范围250–2400。	`number`	`900`
`options.roughness` 墨水边缘的起伏强度，范围0–1。	`number`	`0.6`
`options.images` 2–12张图片地址，或含src、alt的对象；默认生成画作已内嵌。	`(string \| { src: string; alt?: string })[]`
`options.onIndexChange` 用户最后一次切换完成时回调一次，外部更新不触发。	`(index: number) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`876`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`