這個站是什麼

這不是炫技 demo，是「用得到的視覺字典」。每張效果卡都回答三個問題：

• 這效果叫什麼（技術名詞 + 編號）
• 長怎樣（live demo）
• 怎麼跟 Claude Code 描述能做出來（Prompt 四件套）

附加產出：何時用、何時別用、踩過什麼坑——這層是接案多年累積的判斷， 別人複製不走。

技術棧

• Next.js 16（App Router）+ TypeScript
• Tailwind v4 + shadcn/ui
• Framer Motion + Lenis（動畫核心）
• GSAP + ScrollTrigger（進階動畫，Sprint 4 後加入）
• Three.js + react-three-fiber（3D / WebGL，Sprint 5 後加入）
• Shiki（程式碼高亮）+ next-mdx-remote（內容）

給自己看的

這個站第一個用戶是我自己——接案時打開找 prompt 比翻文件快。 其他人能用到是 bonus。