iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

讓你的 UI 動起來:Animate-UI 初探 系列

分享 Animate-UI 如何透過 shadcn CLI 或直接複製程式碼,快速引入專案,並展示一些最簡單的動畫範例。Animate-UI 結合了 React、Tailwind CSS 與 Motion,提供靈活且高度可自訂的動畫元件,開發者不需要從零開始設計動效,只需套用現有的元件並調整參數,即可創造出豐富的互動體驗。

參賽天數 29 天 | 共 29 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊第一屆技術創作市集
DAY 11

Day 11 - Animate UI Code Tabs

前言 昨天我們了解到可以呈現程式碼的動畫元件,今天來探討如果需要多個語言或是方式來讓使用者使用的話,可以怎麼做。這時候就需要用到 Code Tabs,使用者可以...

2025-09-25 ‧ 由 adsfaaron 分享
DAY 12

Day 12 - Animate UI Code Block

前言 在 Day 10 我們認識了 Code 元件,主要用於呈現程式碼的動畫效果。今天要介紹的元件與其概念相似,不過有所不同 —— Code Block。它是一...

2025-09-26 ‧ 由 adsfaaron 分享
DAY 13

Day 13 - Animate UI Cursor

前言 此 Cursor 非比 Cursor Editor ,而是游標滑鼠的 Cursor。今天來介紹 Animate UI 中的滑鼠游標,它可以自訂游標與跟隨元...

2025-09-27 ‧ 由 adsfaaron 分享
DAY 14

Day 14 - Shadcn UI Context Menu

前言 講到 Cursor,不禁還是會想到與他一起搭配的 Context Menu。而這個在 Animate UI 中是沒有內建的,因此今天想要來介紹 Shadc...

2025-09-28 ‧ 由 adsfaaron 分享
DAY 15

Day 15 - Animate UI Icons

前言 在介面設計中,圖示(Icons)是最常見也最直覺的元素,不僅能提升辨識度,還能讓操作更有效率。 Animate UI 提供的 Icons 元件,不只是簡單...

2025-09-29 ‧ 由 adsfaaron 分享
DAY 16

Day 16 - Animate UI Playful Todolist

前言 在使用框架時,我們常常希望能有現成的元件可快速套用,或只需稍加修改就能使用。今天要介紹的,就是 Animate UI Community 所提供的元件 —...

2025-09-30 ‧ 由 adsfaaron 分享
DAY 17

Day 17 - Animate UI Management Bar

前言 今天要來介紹的也是 Animate UI Community 所提供的元件 —— Management Bar。它是一個結合分頁、操作按鈕與主要行動提示的...

2025-10-01 ‧ 由 adsfaaron 分享
DAY 18

Day 18 - Animate UI Notification List

前言 每天打開電腦、手機,第一眼迎接你的往往不是可愛的貓咪桌布,而是一堆通知叮叮咚咚的跳出來:訊息、提醒、優惠通知、甚至還有「你已經三天沒運動了」的健康警告。通...

2025-10-02 ‧ 由 adsfaaron 分享
DAY 19

Day 19 - Animate UI Pin List

前言 每個人電腦桌面上,或是瀏覽器分頁列裡,都有那種「捨不得關、卻又亂七八糟堆一堆」的東西吧?😂 有些是待辦清單、有些是靈感筆記,還有些是「一定要看」但最後都吃...

2025-10-03 ‧ 由 adsfaaron 分享
DAY 20

Day 20 - Animate UI Bubble Background

前言 太難得竟然可以完成到 20 篇文章拉 🎉 Animate UI – Bubble Background,就是讓你背景效果變成像是泡泡在動來動去的感覺。...

2025-10-04 ‧ 由 adsfaaron 分享