What this is

A set of React Three Fiber recipes for organic liquid-distortion shaders, breathing 3D geometry, soft ambient particle fields, and bloom post-processing -- for flagship marketing/landing pages, not everyday app screens. Includes a documented React-18 reconciler compatibility bug and its workaround, plus an honest worked example of when to abandon WebGL entirely for lighter pure-CSS animation instead.

Why this is different from a generic Three.js tutorial

Most WebGL tutorials show you a spinning cube and stop there. This skill covers the parts that actually break in production: a React-18 + @react-three/fiber v8 reconciler bug that isn't fixable by chasing React/scheduler version combinations (documented root cause and a vanilla-Three.js workaround), performance fallbacks (dpr capping, reduced-motion, WebGL-support detection), and -- most unusually -- a candid worked example on when the right call is to abandon WebGL entirely, because a 2D CSS animation ends up looking better, shipping far less code, and dropping 150-300KB of bundle weight.

What's included

• Organic liquid-distortion shader (GLSL noise displacing mesh vertices)
• Non-linear "breathing" motion synced to a consistent pulse cadence
• Soft ambient particle field (drei Sparkles, tuned for a gentle-dust look, not a tech-swarm look)
• Bloom/glow post-processing
• Performance & fallback checklist: dpr capping, prefers-reduced-motion, WebGL-support detection, code-splitting
• Documented React-18 + R3F v8 reconciler compatibility bug and its vanilla-Three.js workaround
• 7 concrete common mistakes / pitfalls, each with the specific symptom and fix
• A worked example walking through when to abandon WebGL for pure CSS instead
• English and Traditional Chinese versions, both fully written out (not machine-translated from each other)

FAQ

Is this worth it for an app dashboard or admin screen?
No -- and the skill says so explicitly. This is scoped to flagship marketing/landing pages the user visits once and lingers on, not screens visited many times a day where load cost is pure downside.

What if my project is stuck on React 18 and hits the reconciler crash?
The skill documents the specific error signature and the root cause (it lives inside react-reconciler's own bundle, not your app's React version), plus the vanilla Three.js workaround that sidesteps it entirely.

Does this guarantee I should use WebGL?
No -- the opposite. A good part of the skill is dedicated to recognizing when a 2D CSS/SVG animation achieves the same visual result with none of the compatibility risk or bundle cost -- worked through as a concrete example so you can apply the same judgment call to your own project.

中文版

這是什麼

一套React Three Fiber實作食譜：液態扭曲shader、呼吸感3D幾何、柔霧氛圍粒子場、Bloom後製光暈，適用於行銷旗艦頁，不是日常app畫面。內含一則真實記錄過的React 18 reconciler相容性bug解法，以及一段誠實的「什麼時候該直接放棄WebGL改用純CSS」情境示範。

跟一般Three.js教學有什麼不同

大部分WebGL教學只會教你轉一顆立方體就結束了。這個skill涵蓋的是production中真正會出問題的部分：React 18 + @react-three/fiber v8的reconciler bug（不是靠亂試React/scheduler版本組合就能解，已記錄根因跟vanilla Three.js解法）、效能與降級策略（dpr上限、reduced-motion、WebGL支援偵測），以及——最特別的部分——一段坦誠的情境示範，示範什麼時候該直接放棄WebGL，因為2D CSS動畫的效果反而更好、程式碼少很多、bundle也不用背三百KB。

包含什麼

• 液態扭曲shader（GLSL noise位移網格頂點）
• 同步固定脈動節奏的非線性「呼吸感」動態
• 柔霧氛圍粒子場（drei Sparkles，調成柔和塵粒感，不是科技感粒子群）
• Bloom後製光暈
• 效能與降級檢查清單：dpr上限、prefers-reduced-motion、WebGL支援偵測、code splitting
• 已記錄的React 18 + R3F v8 reconciler相容性bug與vanilla Three.js解法
• 7個具體常見錯誤/地雷，各自附上症狀與解法
• 一段「何時該放棄WebGL改用純CSS」的情境示範
• 中文版與英文版皆完整獨立撰寫，不是互相機器翻譯

常見問題

用在app後台/儀表板值得嗎？
不值得，skill裡也明講了。這支skill的適用範圍是使用者只造訪一次、會停留欣賞的行銷旗艦頁，不是一天造訪多次、載入成本純粹是負擔的頁面。

如果我的專案卡在React 18、遇到reconciler crash怎麼辦？
skill記錄了具體錯誤訊息跟根因（問題在react-reconciler自己的bundle裡，不是你app的React版本造成的），以及能完全繞開這個問題的vanilla Three.js解法。

這個skill是不是在鼓勵我用WebGL？
正好相反。裡面有相當篇幅專門教你辨認「這個效果其實2D CSS/SVG動畫就能做到視覺等價，而且沒有相容性風險跟bundle成本」的情況——用具體情境示範走一遍，讓你能把同樣的判斷邏輯套用到自己的專案上。