液体注入卡片

实时液体纹理从鼠标进入的位置铺满卡片，再向离开的位置收拢。每张卡片拥有独立的三色色板。

着色器交互六框架TypeScript

演示

从任意方向移入展开，移出收拢；触屏轻触切换。Tab 与方向键导航，Escape 收起。

npm install react react-dom

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

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

npm install react react-dom

ShaderFlood.tsx

正在加载代码…

App.tsx

import { ShaderFlood } from "./ShaderFlood";

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

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

正在加载提示词…

属性	类型	默认值
`options.items` 卡片项目包含标题、描述、图标名及可选的深、中、浅三色；未指定时循环使用五组内置色板。	`{ title: string; description: string; icon?: string; colors?: [string, string, string] }[]`
`options.seed` 改变液体形态，不改变卡片色板。	`number`	`0`
`options.speed` 液体速度范围 0 至 3；设为 0 时冻结纹理，保留交互。	`number`	`1`
`options.theme` 浅色或深色卡片外观。	`"light" \| "dark"`	`"light"`
`options.background` 可选的十六进制场景背景色。	`string`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`720`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`