分享 Animate-UI 如何透過 shadcn CLI 或直接複製程式碼,快速引入專案,並展示一些最簡單的動畫範例。Animate-UI 結合了 React、Tailwind CSS 與 Motion,提供靈活且高度可自訂的動畫元件,開發者不需要從零開始設計動效,只需套用現有的元件並調整參數,即可創造出豐富的互動體驗。
前言 昨天我們了解到可以呈現程式碼的動畫元件,今天來探討如果需要多個語言或是方式來讓使用者使用的話,可以怎麼做。這時候就需要用到 Code Tabs,使用者可以...
前言 在 Day 10 我們認識了 Code 元件,主要用於呈現程式碼的動畫效果。今天要介紹的元件與其概念相似,不過有所不同 —— Code Block。它是一...
前言 此 Cursor 非比 Cursor Editor ,而是游標滑鼠的 Cursor。今天來介紹 Animate UI 中的滑鼠游標,它可以自訂游標與跟隨元...
前言 講到 Cursor,不禁還是會想到與他一起搭配的 Context Menu。而這個在 Animate UI 中是沒有內建的,因此今天想要來介紹 Shadc...
前言 在介面設計中,圖示(Icons)是最常見也最直覺的元素,不僅能提升辨識度,還能讓操作更有效率。 Animate UI 提供的 Icons 元件,不只是簡單...
前言 在使用框架時,我們常常希望能有現成的元件可快速套用,或只需稍加修改就能使用。今天要介紹的,就是 Animate UI Community 所提供的元件 —...
前言 今天要來介紹的也是 Animate UI Community 所提供的元件 —— Management Bar。它是一個結合分頁、操作按鈕與主要行動提示的...
前言 每天打開電腦、手機,第一眼迎接你的往往不是可愛的貓咪桌布,而是一堆通知叮叮咚咚的跳出來:訊息、提醒、優惠通知、甚至還有「你已經三天沒運動了」的健康警告。通...
前言 每個人電腦桌面上,或是瀏覽器分頁列裡,都有那種「捨不得關、卻又亂七八糟堆一堆」的東西吧?😂 有些是待辦清單、有些是靈感筆記,還有些是「一定要看」但最後都吃...
前言 太難得竟然可以完成到 20 篇文章拉 🎉 Animate UI – Bubble Background,就是讓你背景效果變成像是泡泡在動來動去的感覺。...