CSS / JS Animation Final Project
CSS + JS Motion Lab 把互動效果拆成可調整的展示模組
這是一個整理 CSS 與 JavaScript 動畫功能的展示頁。每個區塊都有實際效果、局部控制台，以及可打開查看的技巧與可調參數。
Hover / Drag / Type / Follow
01 / CSS Typing Effect
文字逐字輸入與游標閃爍
用 `steps()`、偽元素與遮罩寬度做出打字效果，適合用在 Hero 標語、狀態提示或開場字幕。
Typing Demo
CSS 動畫讓文字自己登場
Typing Controls
02 / 3D Carousel
圖片環繞、拖曳與景深
透過 `perspective`、`rotateY()` 與 `translateZ()` 把圖片排成 3D 環狀，並用 pointer event 控制拖曳旋轉。
Cat Motion Gallery
Carousel Controls
04 / Pointer Cat Companion
滑鼠追蹤、距離判定與愛心粒子
用 `pointermove` 取得游標座標，搭配速度阻尼、距離判定與 Canvas 粒子，讓貓咪成為可互動的背景動畫。
Live State
正在觀察你的滑鼠
移動滑鼠讓線條貓跟上你，靠近牠時摸摸牠會觸發愛心動畫。
記錄滑鼠與觸控位置。
用延遲插值讓貓咪追上目標。
距離夠近並摸摸牠才產生愛心。
INTERACTION DATA
滑鼠不是裝飾，是輸入資料
親密度
0%
05 / Glowing Corner Hover Effects
滑鼠定位光暈與邊角 Hover
透過 JavaScript 記錄滑鼠在卡片內的位置，再把座標寫入 CSS 變數，讓 radial-gradient 光暈跟著指標移動。
Pointer Position
滑鼠座標會同步成 CSS 變數。
Radial Glow
光暈從指標位置向外擴散。
Inner Mask
內層遮罩保留卡片可讀性。
Glow Controls
06 / Global Settings
全域設定與快速重置
各功能的參數已放在自己的展示區下方，這裡保留全站層級的切換與重置，方便展示時回到預設狀態。