UI-db｜UI 效果與工具資料庫

文字動態 40 招（Text Motion 40）

每招都有名字：把中文名 + 英文原名寫進提示詞，AI 就能做出那一招。 來源：@ai_tjb

  1. 文字爆開（Word Burst）：單字咚一聲彈出來。Word Burst：單字從 0 放大到 120% 再回彈到 100%（彈性 overshoot），同時四周放射出短線條爆開後消失。
  2. 逐字敲擊（Letter Sequence）：一個字一個字砸上來。Letter Sequence：一次只出現一個字，每個字從 200% 縮到 100% 砸在畫面中央，配合節拍依序替換。
  3. 印章（Text Stamp）：像蓋章一樣一個個蓋上去。Text Stamp：文字帶外框，從 300% 大小、微微旋轉快速壓下到 100%，落地瞬間畫面輕微震動，像蓋章。
  4. 衝擊放大（Punch Zoom）：從深處飛出、後面拖著殘影。Punch Zoom：文字從畫面深處（scale 0 + 模糊）高速衝到前景，後方拖著數層半透明殘影。
  5. 動態堆疊（Kinetic Stack）：詞一個個飛進來疊起來。Kinetic Stack / Kinetic Typography：每個詞從不同方向快速飛入，一行一行往上堆疊成一個文字區塊。
  6. 伸縮字（Stretch Text）：文字上下拉長再縮回。Stretch Text：文字以底部為基準，scaleY 拉長到 2 倍再彈回，帶有彈性 easing。
  7. 穿越放大（Text Zoom Through）：衝進字裡，接到下一個詞。Text Zoom Through：鏡頭往文字筆畫裡衝，文字放大到填滿畫面成為轉場，接著出現下一個詞。
  8. 擠壓彈跳（Text Squeeze）：像橡皮一樣壓扁再換字。Text Squeeze / Squash & Stretch：文字像橡皮被壓扁（scaleX 1.4、scaleY 0.5），彈起時換成下一個字。
  9. 巨字滑過（Huge Text Scroll）：超大字一快一慢橫越畫面。Huge Text Scroll：超大字級的文字橫向無限捲動，下方再疊一條小字反向、不同速度的跑馬燈。
  10. 直書逆走（Vertical Typography）：直排文字往反方向流。Vertical Typography：數欄直排文字（writing-mode: vertical-rl），相鄰欄位一上一下反方向無限流動。
  11. 重複波浪（Repeating Text）：同一個詞排滿，波浪式變色。Repeating Text：同一個詞排滿整個畫面成網格，顏色依位置延遲變化，形成斜向波浪掃過。
  12. 斜線帶（Diagonal Text Bands）：斜斜的帶子，文字反向跑。Diagonal Text Bands：兩條傾斜的色帶交錯，帶子裡的文字以相反方向無限捲動。
  13. 緞帶（Text Ribbon）：文字沿著波浪線流動。Text Ribbon / Text on Path：文字沿著 S 形波浪曲線（SVG textPath）流動，像飄動的緞帶。
  14. 跑馬燈（Marquee）：字體、速度不同的帶子疊在一起。Marquee：多條跑馬燈上下疊放，每條字體、字重、速度與方向都不同。
  15. 直書三層（Parallax Columns）：三層直排文字一起流動。Parallax Columns：前中後三層直排文字，越遠越小越淡、流動越慢，形成視差景深。
  16. 封鎖膠帶（Tape Cross）：寫著字的膠帶交叉成 X。Tape Cross / Caution Tape：兩條印字的黃黑封鎖膠帶交叉成 X，文字在膠帶上反向捲動。
  17. 文字隧道（Text Tunnel）：從文字中間穿過去。Text Tunnel：同一個詞多層同心排列，由小到大不斷往鏡頭放大並淡出，像穿過文字構成的隧道。
  18. 文字走廊（Text Corridor）：地板牆壁都是字，一路往前。Text Corridor：用 3D perspective 建立地板、天花板、左右牆，四面都鋪滿文字並持續朝鏡頭移動。
  19. 圓柱（Text Cylinder）：文字圓柱反向旋轉。Text Cylinder：文字排在 3D 圓柱表面繞軸旋轉，相鄰圓柱方向相反。
  20. 漩渦（Text Vortex）：文字扭轉捲成漩渦。Text Vortex / Twist：文字切成多條橫向切片，每片旋轉角度遞增，整體扭轉成漩渦再還原。
  21. 圓環隧道（Ring Text Tunnel）：一圈圈文字撲面而來。Ring Text Tunnel：文字排成一圈圈圓環，從中心向外放大撲面而來，同時緩慢旋轉。
  22. 軌道（Text Orbit）：單字帶著景深繞圈。Text Orbit：主標題置中，一圈小字沿傾斜的 3D 橢圓軌道環繞，轉到後方時被主標題遮住。
  23. 方塊（Text Cube）：四面寫字的方塊直向翻轉。Text Cube：3D 立方體四個面各寫一個字，沿 X 軸每次翻轉 90 度切換到下一面。
  24. 立體字（Extrude Text）：立體字的厚度方向轉一圈。Extrude Text：用多層疊加做出有厚度的 3D 擠出文字，沿 Y 軸旋轉一圈展示側面厚度。
  25. 翻牌（Split Flap）：像車站時刻表一樣翻到定位。Split Flap Display：每個字在上下兩半的翻牌格裡，快速翻過數個隨機字元後依序停在目標字，像車站時刻表。
  26. 翻卡（Flip Cards）：一張張翻面換字。Flip Cards：每個字是一張卡片，依序沿 Y 軸翻轉 180 度，背面是新的字。
  27. 打字機（Typewriter）：一個字一個字打出來再換掉。Typewriter Effect：文字逐字打出，尾端有閃爍游標，打完停頓後逐字刪除，再打下一句。
  28. 拉霸（Slot Text）：滾輪轉一轉停下來。Slot Machine Text：每個字是一個拉霸滾輪，垂直快速滾動後由左到右依序減速停在結果。
  29. 計數器（Odometer）：數字滾動往上加。Odometer / Rolling Number：數字每一位是垂直滾動的數字帶，從 0 滾動累加到目標數值。
  30. 標題切換（Headline Swap）：新聞標題一個換一個。Headline Swap / News Ticker Swap：左側固定標籤（快訊），右側標題框以色塊擦除（wipe）方式換成下一則。
  31. LED 看板（LED Text）：點點組成的電子字。LED Dot Matrix Text：文字由發光圓點陣列組成，像電子看板一樣橫向捲動。
  32. 上下裂開（Split Halves）：字裂開，露出另一個詞。Split Halves：文字沿水平中線裂成上下兩半往外分開，露出後方的另一個詞。
  33. 空心字（Outline Text）：空心字一行一行填上顏色。Outline Text：多行重複的空心描邊字（text-stroke），一行接一行被實心色填滿。
  34. 故障切片（Glitch Slices）：大字被切成好幾條錯開。Glitch Slices：大字被切成數條水平切片，不規則地左右錯開並帶 RGB 色偏，短暫閃爍後復原。
  35. 圖案遮罩（Text Mask Pattern）：文字變成窗，條紋從裡面流過。Text Mask Pattern：文字當作遮罩（background-clip: text），裡面的斜條紋圖案持續流動。
  36. 長陰影（Long Shadow）：長長的影子轉一圈。Long Shadow：扁平風長陰影從文字延伸出去，陰影方向繞文字旋轉一圈。
  37. 液體填滿（Liquid Fill）：空心字被液體慢慢裝滿。Liquid Fill：空心字內部有帶波浪的液面，水位慢慢上升直到填滿文字。
  38. 螢光筆（Highlight Text）：螢光筆從字後面劃過。Highlight Text / Marker Highlight：螢光筆色塊從左到右在文字後方劃過（scaleX 0→1）。
  39. 雙色反轉（Split Invert）：斜線分界，兩色互換。Split Invert：一條斜線分界掃過畫面，分界兩側的底色與文字色互相反轉。
  40. 殘影（Text Echo）：字後面拖著一串殘影。Text Echo / Motion Trail：文字移動時後方拖著多層延遲、漸淡、帶模糊的殘影。

按鈕與微互動 12 招（Micro-interactions 12）

讓點擊、切換、成功與失敗都有回饋。卡片裡的按鈕多數也能直接用滑鼠玩。

  1. 漣漪按鈕（Ripple Button）：點下去，圓形波紋從手指位置擴散。Ripple Effect：點擊按鈕時，在點擊座標生成一個圓形，從 0 放大到覆蓋整顆按鈕並淡出（overflow: hidden）。
  2. 磁吸按鈕（Magnetic Button）：游標靠近，按鈕被吸過去。Magnetic Button：游標進入按鈕周圍範圍時，按鈕依游標與中心的距離往游標方向位移（約 30%），離開時彈回原位。
  3. 掃光按鈕（Shimmer Button）：一道光定時從按鈕上掃過。Shimmer Button：按鈕上有一條傾斜的半透明白色漸層，定時從左到右掃過，吸引點擊。
  4. 流光邊框（Glow Border）：彩色光沿著邊框一直繞。Animated Glow Border：用旋轉的 conic-gradient 當邊框，外層再疊一層模糊光暈，光沿著按鈕外框繞圈。
  5. 按壓回彈（Press Squish）：按下縮一點，放開彈回來。Press Squish / Tactile Press：按下時按鈕 scale(0.94) 並縮小陰影，放開時用彈簧曲線回到 1。
  6. 填滿按鈕（Hover Fill）：滑過時顏色從一側填滿。Hover Fill：空心按鈕在 hover 時，背景色塊從左側 scaleX(0→1) 填滿，文字顏色同步反轉。
  7. 愛心爆開（Like Burst）：按讚時愛心彈起、周圍噴出小點。Like Burst：點愛心時圖示縮小再彈大並變紅，周圍一圈小圓點向外噴出後消失（像 Twitter 按讚）。
  8. 開關切換（Toggle Switch）：圓鈕滑過去時會被拉長。Toggle Switch：開關切換時圓鈕滑到另一側，移動中寬度拉長像果凍，底色在灰與主色間過渡。
  9. 勾選繪製（Checkbox Draw）：勾勾像用筆畫出來。Animated Checkbox：勾選時方框填色，勾號用 SVG stroke-dashoffset 從 0 畫到完整。
  10. 複製成功（Copy Feedback）：複製圖示變成打勾，跳出提示。Copy to Clipboard Feedback：點複製後圖示交叉淡換成打勾，上方彈出「已複製」小提示，2 秒後還原。
  11. 錯誤搖晃（Shake Error）：輸入錯誤時欄位左右搖頭。Shake on Error：送出錯誤時輸入框左右快速搖晃 3 次，邊框變紅並在下方淡入錯誤訊息。
  12. 通知滑入（Toast Slide）：通知從下方滑入，倒數後離開。Toast Notification：通知從畫面下方滑入並帶彈性，底部進度條倒數縮短，時間到滑出消失。

載入動畫 12 招（Loading 12）

等待的時候給使用者看什麼：轉圈、跳點，或先畫出內容的骨架。

  1. 環形轉圈（Ring Spinner）：缺一角的圓環一直轉。Ring Spinner：圓形邊框只有一段上色（border-top），以 linear 無限旋轉。
  2. 跳動圓點（Bouncing Dots）：三個點輪流跳起來。Bouncing Dots：三個圓點依序延遲上下跳動，形成波浪節奏。
  3. 脈衝波紋（Pulse Ring）：圓圈一圈圈往外擴散。Pulse Ring：中心圓點不動，外圍圓環從小放大並淡出，多圈錯開時間循環。
  4. 軌道載入（Orbit Loader）：小球繞著中心公轉。Orbit Loader：兩顆小球以不同半徑與速度繞中心公轉，軌道用淡色細線畫出。
  5. 等化器（Bar Equalizer）：直條像音量一樣起伏。Equalizer Loader：數根直條以 scaleY 上下伸縮，每根延遲不同，像音訊等化器。
  6. 變形方塊（Morphing Shape）：方形邊轉邊變成圓形。Morphing Loader：方塊旋轉的同時 border-radius 在 0 和 50% 之間變化，方圓互換。
  7. 骨架屏（Skeleton Shimmer）：先畫出內容的灰色輪廓。Skeleton Screen：用灰色圓角塊預先排出頭像、標題、內文的版型，上面有一道光由左到右掃過。
  8. 進度條（Progress Bar）：一段一段前進，數字跟著跑。Determinate Progress Bar：進度條分段前進（不等速），右側百分比數字同步累加到 100%。
  9. 不定進度條（Indeterminate Bar）：一段色塊在軌道上來回跑。Indeterminate Progress：細長軌道中一段色塊由左往右滑過，長度伸縮變化，無限循環。
  10. 圓形進度（Circular Progress）：圓環被慢慢畫滿。Circular Progress：SVG 圓用 stroke-dashoffset 從 0 畫到 100%，中央顯示百分比數字。
  11. 輸入中（Typing Indicator）：對話泡泡裡三個點閃爍。Typing Indicator：對話泡泡內三個圓點依序變亮變大，表示對方正在輸入（像 iMessage）。
  12. 模糊載入（Blur Reveal）：圖片從模糊慢慢變清楚。Progressive Image / Blur-up：先顯示放大且高斯模糊的縮圖，原圖載入後模糊淡出變清晰。

背景效果 12 招（Backgrounds 12）

放在 Hero 或整頁後面的動態背景，前景內容不用動也有氛圍。

  1. 極光（Aurora）：幾團模糊的彩光慢慢飄。Aurora Background：深色底上放 3–4 個大型彩色圓形，加強烈模糊（blur 60px+），各自緩慢漂移與縮放。
  2. 網格漸層（Mesh Gradient）：多個顏色點融在一起流動。Mesh Gradient：疊加多個 radial-gradient 色點，各自位置緩慢移動，形成柔和交融的網格漸層（像 Stripe 首頁）。
  3. 流動漸層（Animated Gradient）：漸層顏色斜斜地一直流。Animated Gradient：多色 linear-gradient 設 400% 大小，持續移動 background-position 讓顏色流動。
  4. 錐形光暈（Conic Glow）：中心一圈彩虹光在旋轉。Conic Glow：中央放一個 conic-gradient 圓並加模糊，持續旋轉，像發光的光環。
  5. 聚光燈（Spotlight）：一束光跟著游標照亮網格。Spotlight Effect：深色網格背景上，以游標位置為中心的 radial-gradient 光圈照亮周圍，遠處保持暗。
  6. 顆粒雜訊（Noise Grain）：漸層上疊一層會跳動的顆粒。Grain / Noise Overlay：在漸層上疊一層 SVG feTurbulence 雜訊（低透明度），用 steps 動畫抖動位置模擬底片顆粒。
  7. 點陣網格（Dot Grid）：整齊的點陣被一道波浪點亮。Dot Grid Background：radial-gradient 重複排成點陣，上面疊一個移動的圓形遮罩讓局部的點變亮。
  8. 透視網格（Retro Grid）：80 年代的地板網格往前跑。Retro Perspective Grid：網格平面 rotateX 往遠處延伸，持續往鏡頭方向捲動，地平線上有漸層夕陽（Synthwave）。
  9. 粒子連線（Particle Network）：漂浮的點靠近時會連線。Particle Network：canvas 上的粒子隨機漂浮，兩點距離小於門檻時畫出越近越亮的連線（particles.js 風格）。
  10. 星空穿越（Starfield）：星星從中心往外飛，像曲速前進。Starfield / Warp Speed：canvas 上的星點依 z 深度投影，從中心往外加速飛出並拉出短尾線。
  11. 波浪（Layered Waves）：幾層波浪錯開速度流動。Layered Waves：三層半透明 SVG 波浪疊在底部，各自以不同速度水平移動。
  12. 數位雨（Matrix Rain）：綠色字元一行行往下掉。Matrix Digital Rain：canvas 每一欄有字元往下掉，前端最亮、後方拖著漸淡的尾巴（駭客任務）。

捲動效果 12 招（Scroll Effects 12）

卡片裡是一個會自動捲動的小頁面；滑鼠移進去會暫停，可以自己捲。

  1. 淡入上移（Fade Up）：滾進畫面時從下方淡入。Fade Up on Scroll：元素進入視窗（IntersectionObserver）時從 translateY(24px)、透明度 0 過渡到原位。
  2. 交錯進場（Stagger Reveal）：一排卡片一張接一張出現。Staggered Reveal：一組卡片進入視窗時依序出現，每張延遲 80ms，形成接力感。
  3. 左右滑入（Slide In）：內容輪流從左邊、右邊滑進來。Alternating Slide In：時間軸項目進入視窗時，奇數從左、偶數從右滑入並淡入。
  4. 縮放進場（Scale In）：從小放大到原尺寸。Scale In on Scroll：元素進入視窗時從 scale(0.8)、透明度 0 彈性放大到 1。
  5. 逐行浮現（Line Reveal）：標題每一行從遮罩下方升起。Line Reveal / Mask Reveal：標題每一行包在 overflow: hidden 裡，進入視窗時文字從 translateY(100%) 依序升起。
  6. 數字滾動（Count Up）：數字滾進畫面才開始往上數。Count Up on Scroll：統計數字進入視窗時才從 0 用 ease-out 累加到目標值。
  7. 閱讀進度條（Reading Progress）：頂部細線跟著捲動長長。Scroll Progress Bar：頁面頂部細條寬度 = 已捲動距離 ÷ 可捲動總長，捲回去會縮短。
  8. 視差捲動（Parallax）：遠景慢、近景快，產生深度。Parallax Scrolling：背景、中景、前景各自以不同比例（如 0.2、0.5、1）跟著捲動位移，產生深度。
  9. 堆疊卡片（Sticky Stack）：卡片黏在頂端一張疊一張。Sticky Card Stack：每張卡片 position: sticky、top 依序遞增，捲動時後一張蓋上前一張，前一張微微縮小變暗。
  10. 橫向捲動（Horizontal Scroll）：往下捲，內容卻往旁邊走。Horizontal Scroll Section：區塊固定（sticky）在畫面中，垂直捲動進度轉換成內部橫列的 translateX。
  11. 捲動填色字（Scroll Text Fill）：捲動時文字一個字一個字亮起。Scroll-linked Text Highlight：段落文字先是淡灰色，依捲動進度逐字變成實色（像 Apple 產品頁）。
  12. 縮小導覽列（Shrinking Header）：往下捲時導覽列變矮、加陰影。Shrinking Sticky Header：捲動超過門檻後，sticky 導覽列高度與 Logo 縮小、背景變半透明模糊並加陰影。