一句 Prompt 做出日式墨流し互動網頁：用 Claude Fable生成 WebGL 流體水墨畫布

不會寫 shader，也能做出具有流體感的互動水墨網頁嗎？

這次我用一段 Prompt，請 Claude 從零生成一個日式「墨流し / Suminagashi」風格的互動網頁。成果是一個單一 index.html 靜態頁面，打開後就能在全螢幕和紙畫布上滴墨、拖曳、攪動水流，看墨色自然暈開、混合、形成流線與漩渦。

整個過程不需要後端、不需要建置工具，也不用自己手寫 WebGL shader。你只需要把想要的畫面與互動感受描述清楚，AI 就能幫你完成一個可以直接運行的前端作品。

這次做出來的效果

這個互動網頁的核心體驗很簡單：使用者可以在畫面上點擊或拖曳，像是在水面上滴墨、推動墨流。

實際效果包含：

• 點擊畫面時，墨滴會慢慢暈開，不是單純的圓形擴散
• 拖曳滑鼠或手指時，墨色會被水流拉出流線與漩渦
• 不同墨色交會時，會產生自然的混色與加深效果
• 背景是淡米色和紙質感，帶有纖維、顆粒與微弱暗角
• 閒置時會自動滴墨與加入細微水流，畫面不會完全靜止
• 底部有低調控制列，可切換墨色、自動演出與洗い流す

它不是單純的 CSS 動畫，也不是用圖片疊出來的視覺效果，而是透過 WebGL shader 與 GPU 流體模擬，讓每一次互動都產生不同的墨流紋理。