我發現一個眼前一亮的亮暗動態切換效果！！！

先看原出處效果

看我在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 元素。
- 表單及業務狀態保留。
- 主題刷新記憶和首屏恢復。
- 重複點擊、動畫中斷與窗口變化。
- 音效開關、音量記憶、階段同步和中斷清理。
- 減少動態效果及音頻不可用時的降級。
- 類型檢查、生產構建和必要的針對性測試。
請提供可操作預覽和簡短音效試聽，並說明如何在本地運行。
完成後簡要說明主要修改、驗證結果和已知限制。