我发现一个眼前一亮的亮暗动态切换效果！！！

先看原出处效果

看我在https://web.xiaoheihe.cn/tools/common_share?user_miniprogram_id=01a1874f-7107-7ba3-96f0-6edfe697094e复现的效果

生成gif清晰度掉的有点多

想做出这种效果，提示词我提取出来了

下面的theme-pour如果ai找不到实际位置，你可以先去搜一下复制完整地址

这是出处

请独立实现 Liquid Theme Reveal（液体主题切换）及同步音效，交付完整可运行代码，不只给方案。
已有项目：先阅读现有主题系统、页面结构和音效实现，沿用技术栈，以最小合理改动接入，保留原有布局、内容、交互和业务状态，不为动画重写整个项目。
新项目：使用 React、TypeScript、Vite、CSS、SVG 和 Web Audio API，提供可操作的完整示例。
一、液体动画
点击主题切换按钮后，新主题像液体一样从按钮下方流出：
1. 细长液柱从按钮向下延伸，带有自然摆动、粗细变化和分离液滴。
2. 液柱落到底部，产生飞溅、小液滴和局部涟漪。
3. 液体在底部积聚，形成持续起伏的波浪液面。
4. 液面逐渐上涨，最终覆盖整个视口，平稳完成主题切换。
5. 浅色切深色、深色切浅色均支持完整动画。
液体经过哪里，哪里的背景、卡片、文字、边框和图表就切换到新主题；未被覆盖的区域保持原主题。
不能用圆形扩散、渐变淡入、纯色遮罩或整页同时变色代替。
二、渲染与性能
同时呈现两套内容和布局完全对应的主题界面：
- 原主题作为底层。
- 新主题作为揭示层。
- 使用 CSS clip-path 引用动态 SVG clipPath。
- 通过 SVG path 描述液柱、液滴、飞溅和波浪的联合轮廓。
使用单一 requestAnimationFrame 循环驱动动画，每帧仅更新必要的 SVG 属性，避免 React 每帧重渲染组件树，避免逐帧读取布局和重建 DOM。
允许采用双层渲染或视觉快照，但必须保证：
- 两层的尺寸、位置、滚动位置和 sticky / fixed 元素准确对齐。
- 不重复绑定业务事件，不产生重复 ID。
- 揭示层不进入键盘焦点和无障碍阅读顺序。
- 表单内容、筛选条件及其他业务状态保持。
- 切换完成后正确提交主题并移除临时层。
- 动画结束、中断和组件卸载时清理动画帧、临时节点与监听器。
如果使用快照，明确说明对 Canvas、WebGL、视频、Shadow DOM 等内容的支持范围，不将静态快照描述为能自动重新绘制另一主题。
三、同步音效
为液体运动配套轻柔、自然的声音：
- 开始流出：短促的滴落或倾倒声。
- 落到底部：轻微的水花声。
- 液面上涨：低音量、连续的流水声。
- 切换完成：简短、柔和的收尾声。
浅色切深色的声音偏低沉，深色切浅色偏清亮，保持统一风格，避免尖锐、突兀或过长。
优先使用 Web Audio API 本地合成；也可使用具有明确使用授权的本地音频，不依赖未经授权的远程声音。
实现要求：
- 音效默认关闭，提供开关和音量设置，记忆用户选择。
- 已有项目优先复用原有音效系统、设置和 AudioContext，避免重复播放或破坏既有音效风格。
- 仅在用户交互后初始化或恢复 AudioContext，不自动播放。
- 音效由动画的实际进度和阶段触发，不用固定延时堆叠模拟同步。
- 重复点击不叠加声音，同一阶段不重复触发。
- 正常完成时允许短收尾；动画中断时停止流水，不误播完成提示。
- 静音、音量归零、页面进入后台或组件卸载时，及时停止声音并清理音源连接。
- 减少动态效果模式下跳过长流水，开启音效时只保留简短切换反馈。
- 音频不可用、解锁失败或播放异常时，主题切换仍正常完成。
四、配色与适配
新项目采用以下配色：
#F1F0ED、#141319、#060609、#F4F2F8、
#E07A2E、#2F6BFF、#14A3A8。
已有项目优先兼容现有主题变量，不修改无关视觉设计。
支持手机、平板和桌面布局，根据实际视口和按钮位置计算液体起点与填充范围，不使用固定舞台尺寸硬套所有屏幕。
支持主题持久化和首屏主题恢复，避免刷新时闪现错误主题。
尊重 prefers-reduced-motion，减少动态效果时直接切换或使用轻量反馈。
不支持 SVG 裁剪时直接切换主题。
合理处理重复点击、窗口变化、滚动、页面进入后台及组件卸载，避免动画卡住、交互锁死或主题状态不一致。
五、组件复用
将液体动画和音效封装为可复用模块。
React 项目提供：
- TypeScript 类型定义。
- 受控主题状态与主题变更回调。
- 可配置动画时长。
- 可选音效适配接口及音量控制。
- 清晰的主题样式作用域。
- 完整调用示例和接入说明。
动画与音效共用实际进度，但保持模块职责清晰；调用方可以只使用液体动画，也可以接入自己的音效。
六、验证与交付
实际验证：
- 浅色到深色、深色到浅色。
- 手机与桌面尺寸下的两层对齐。
- 页面滚动后的 sticky / fixed 元素。
- 表单及业务状态保留。
- 主题刷新记忆和首屏恢复。
- 重复点击、动画中断与窗口变化。
- 音效开关、音量记忆、阶段同步和中断清理。
- 减少动态效果及音频不可用时的降级。
- 类型检查、生产构建和必要的针对性测试。
请提供可操作预览和简短音效试听，并说明如何在本地运行。
完成后简要说明主要修改、验证结果和已知限制。