前言

想讓第一眼就抓住使用者的注意力嗎？文字動畫是最直接的方式，本篇透過 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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

▲ 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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

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. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

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 的子元件，
   可以作另外的設定

小結

在這一篇中，我們帶大家快速瀏覽了 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)