Frontend Lab
113 個前端效果與互動模式
視覺效果 + UI 互動模式，每個都附 live demo、可直接複製的 Claude Code prompt、 完整程式碼，還有我接案時踩過的坑——告訴你何時用、何時別用。
視覺效果 51 / 51、UI 模式 62 / 62。按 ⌘K 搜尋。
📦 Framer Motion
29 / 29Fade Up
淡入上移
Fade Scale
淡入縮放
Line Stagger Reveal
文字一行行進場
Staggered List
清單一個個進場
Number Count Up
數字滾動
Hover Color Shift
hover 變色
Hover Lift
卡片浮起
Magnetic Button
磁吸按鈕
Tilt 3D Card
3D 傾斜卡片
Smooth Scroll (Lenis)
平滑滾動
Scroll Progress Bar
滾動進度條
whileInView Trigger
視口觸發
Parallax Image
視差背景
Sticky Section
標題釘在頂端
Char Reveal
字符逐個出現
Typewriter
打字機效果
Blur to Clear
從模糊到清晰
Spotlight
游標光暈
Animated Gradient
漸層流動
Marquee
跑馬燈
Bento Grid
便當盒網格
Border Beam
旋繞邊框光
Shimmer Button
閃光按鈕
Flip Words
句中單字輪替
Dot Pattern Background
點陣背景 + 游標 mask
Aurora Background
極光背景
Sparkle Text
閃光字
Image Compare Slider
前後對比拖拉
Card Stack
卡片堆疊
⚡ GSAP
13 / 13Pin Section + Scrub
釘住區塊 + 滾動驅動
Horizontal Scroll
直滾變橫向
Reveal on Scrub
滾動進度驅動進場
Scrollytelling
滾動敘事
Timeline Sequence
時間軸序列動畫
SVG Path Draw
SVG 路徑繪製
Logo Reveal
Logo 揭示
Page Transition
頁面轉場
SplitText Char by Char
字符甩入
Text Mask Reveal
文字遮罩上推
Draggable Cards
可拖曳卡片
Flip Layout Animation
Flip 排版變換
Animated Beam
流動光束連線