嗨咿我是illumi ！

這幾年來，Vibe Coding 盛行，網站介面逐漸被 AI 模板統一：一片 Claude 風、GPT 風。於是，那些有著獨特設計的具有巧思的互動就會讓人不自禁停下來。

身為一個前設計師和會做一點動畫的電影人（？，對於網頁最著迷的地方——就是互動設計，彷彿讓人與程式，在螢幕前有了觸碰與連結。

這次我要用設計和影像，與工程師之間最淺顯易懂的翻譯語言，帶來完全新手向的網頁互動設計分享。致力於讓設計師、動畫師們都可以將自己的藝術帶到網頁上。一起用GSAP、ReactBits、Swiper.js、Lottie、AE等等，還有AI生成圖片及影片，加一點創意與魔法，為網頁注入活力和生命吧！

主題預告

這次的鐵人系列，會結合 程式動畫與影像設計，主題包含：

• GSAP：動畫師也能在網頁上用keyframe
• UI設計小工具們：沒有美感沒關係，有外掛
• ReactBits：超好用的元件庫沒錯，但TypeScript型別老是出錯怎麼辦？
• Recharts：跟大家最常用的Chart.js，這個做出老闆要看的圖表的工具特別在哪？陷阱又在哪？
• Swiper.js：讓滾動與切換像是分鏡一樣自然
• Lottie 與 AE：學了JS的工程師根本是用AE做動畫聖體！
• AI 生成圖片 & 影片：結合 Midjourney、Hailou 等工具，AI生成的圖與動畫如何放到網頁呢？

附上一些最近在弄的可愛動畫YT連結：

正式啟動！

接下來的 30 天，讓我們一起把網頁變成動畫吧！
明天正式開始，敬請期待！