Day 06 - Animate UI Text Animations - Highlight / Gradient / Rolling / Rotating Text

前言

#

想讓第一眼就抓住使用者的注意力嗎？文字動畫是最直接的方式，本篇透過 Animate UI 的實作範例，展示 Highlight、Gradient、Rolling、Rotating 四種常見文字動畫。

Highlight Text (強調文字)

#

1. 使用 Shadcn CLI 加入 Highlight Text

   npx shadcn@latest add @animate-ui/primitives-texts-highlight
   

2. Import 元件並將元件放在想要的位置上

   import { HighlightText } from '@/components/animate-ui/primitives/texts/highlight';
   
   <HighlightText
       key={1}
       delay={0}
       className="text-4xl font-semibold"
       text="Highlight Text"
       transition={{ duration: 3, ease: 'anticipate' }}
   />
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   text	string	顯示的文字
   key?	number	雖然是選填參數，但還是建議要有一個標記 React 元件，是否跟前一次 render 同一個元件，減少觸發動畫問題
   delay?	number	延遲載入動畫時間(ms)，預設為 0
   gradient?	string	文字漸層的樣式，可參考 CSS Gradient 的語法，或是搜尋 CSS Gradient 的網站，可以找到許多靈感
   transition?	Transition	控制文字漸層過渡效果，有兩個參數 (duration 持續時間 : number, ease 動畫播放速度曲線 : string)，不同預設動畫播放速度曲線可以參考下方 Gif。若還是很想要自訂，可以使用貝茲控制點的曲線 BezierDefinition 來細調
   inView?	boolean	控制動畫是否要等到元素進入畫面（viewport）時才開始播放，避免一進頁面就全部執行
   inViewMargin?	UseInViewOptions['margin']	設定觸發「進入視窗」判斷的邊界範圍
   inViewOnce?	boolean	是否只在元素首次進入視窗時執行動畫

   

   ▲ Gif 內包含不同預設動畫播放速度曲線： “linear” | “easeIn” | “easeOut” | “easeInOut” | “circIn” | “circOut” | “circInOut” | “backIn” | “backOut” | “backInOut” | “anticipate”

Gradient Text (漸層文字)

#

1. 使用 Shadcn CLI 加入 Gradient Text

   npx shadcn@latest add @animate-ui/primitives-texts-gradient
   

2. Import 元件並將元件放在想要的位置上

   import { GradientText } from '@/components/animate-ui/primitives/texts/gradient';
   
   <GradientText
       className="text-4xl font-semibold"
       text="Gradient Demo"
       gradient="linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)"
       transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
       neon={true}
   />
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   text	string	顯示的文字
   gradient?	string	文字漸層的樣式，可參考 CSS Gradient 的語法，或是搜尋 CSS Gradient 的網站，可以找到許多靈感
   neon?	boolean	(參數：true/false) 是否啟用霓虹燈效果，讓文字呈現發光感
   transition?	Transition	控制文字漸層過渡效果，有三個參數 (duration 持續時間 : number, repeat 重複次數 : number, ease 動畫播放速度曲線 : string) ease 可以參考 Highlight Text 元件的參數說明

Rolling Text (捲動文字)

#

1. 使用 Shadcn CLI 加入 Rolling Text

   npx shadcn@latest add @animate-ui/primitives-texts-rolling
   

2. Import 元件並將元件放在想要的位置上

   import { RollingText } from '@/components/animate-ui/primitives/texts/rolling';
   
   <RollingText
     key={2}
     delay={0}
     className="text-4xl font-semibold"
     text="Rolling Text"
   />
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   參數	參數型態	說明
   text	string	顯示的文字
   key?	number	雖然是選填參數，但還是建議要有一個標記 React 元件，是否跟前一次 render 同一個元件，減少觸發動畫問題
   delay?	number	延遲載入動畫時間(ms)，預設為 0
   transition?	Transition	(不建議調整) 控制文字捲動過渡效果，有三個參數 (duration 持續時間 : number, repeat 重複次數 : number, ease 動畫播放速度曲線 : string) ease 可以參考 Highlight Text 元件的參數說明

Rotating Text (輪播文字)

#

1. 使用 Shadcn CLI 加入 Rotating Text

   npx shadcn@latest add @animate-ui/primitives-texts-rotating
   

2. Import 元件並將元件放在想要的位置上

   import {
       RotatingText,
       RotatingTextContainer,
   } from '@/components/animate-ui/primitives/texts/rotating';
   
   <RotatingTextContainer text={['Rotating', 'Text']}>
       <RotatingText />
   </RotatingTextContainer>
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   請注意，這個是 RotatingTextContainer 的參數， RotatingText 是 RotatingTextContainer 的子元件， 可以作另外的設定

   參數	參數型態	說明
   text	string	顯示的文字
   delay?	number	載入動畫延遲時間(ms)，預設為 0
   duration?	number	輪播字停留時間(ms)，預設為 2000 (也就是 2 秒)
   y?	number	字在輪播時的垂直偏移量，預設為 -50，個人私心覺得 -10 動畫效果感覺很好。若調成 0 就會變成淡入淡出。若調為正數，則是由上往下的輪播。若調為負數，則是由下往上輪播。
   transition?	Transition	(不建議調整) 控制文字動畫效果，有三個參數 (duration 持續時間 : number, repeat 重複次數 : number, ease 動畫播放速度曲線 : string) ease 可以參考 Highlight Text 元件的參數說明

小結

#

在這一篇中，我們帶大家快速瀏覽了 Animate UI 中常見的四種文字動畫：

• Highlight：突顯重點文字，強化資訊層次
• Gradient：透過漸層字色營造氛圍與品牌感
• Rolling：以滾動效果帶出數字或文字，建立動態節奏感
• Rotating：利用旋轉轉場，製造視覺驚喜

這些效果不僅能讓文字更具吸引力，也能在適當的使用情境下提升介面體驗。

在下一篇文章中，我們將繼續探索 Animate UI 的其他文字動畫，包括：

• Shimmering：流光閃爍的動態效果
• Splitting：將文字逐字分解
• Typing Text：模擬打字輸入

讓我們一起延伸更多文字動畫的可能性，看看如何將這些效果自然融入設計之中。

Reference

#

• Shadcn/ui Docs
• Animate UI Docs
• CSS動畫-Animation(二)(name/duration/delay/timing-function)