Day 07 - Animate UI Text Animations - Shimmering / Splitting / Typing Text - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 7

Modern Web

讓你的 UI 動起來：Animate-UI 初探系列第 7 篇

Day 07 - Animate UI Text Animations - Shimmering / Splitting / Typing Text

17th鐵人賽

adsfaaron

團隊第一屆技術創作市集

2025-09-21 09:19:39

22 瀏覽

分享至

前言

本篇將會介紹 Animate UI 中的 Shimmering Text、Splitting Text、Typing Text，這些效果能夠賦予文字更多層次，讓畫面更具互動感。

Shimmering Text (流光閃爍文字)

text demo

使用 Shadcn CLI 加入 Shimmering Text

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

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

import { ShimmeringText } from '@/components/animate-ui/primitives/texts/shimmering';

<ShimmeringText text="Shimmering Text" wave={false}/>

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

參數	參數型態	說明
text	`string`	顯示的文字
duration?	`number`	閃閃發光文字動畫時長，預設為 1。注意這不是整段文字的時長，是一個 char 的時長，設太高會變超級慢啊
wave?	`boolean`	文字擺動效果，預設為 `false`
color?	`string`	文字顏色，預設為 `var(--color-neutral-500)`，可以參考 Tailwind-CSS-Color 找到需要的顏色
shimmeringColor?	`string`	文字擺動時的顏色，預設為 `var(--color-neutral-300)`，可以參考 Tailwind-CSS-Color 找到需要的顏色
transition?	`Transition`	控制文字漸層過渡效果，有三個參數 (`duration` 持續時間 : number, `repeat` 重複次數 : number, `ease` 動畫播放速度曲線 : string) `ease` 可以參考 Highlight Text 元件的參數說明

Splitting Text (逐字分解文字)

text demo

使用 Shadcn CLI 加入 Splitting Text

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

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

import {
    SplittingText,
    type SplittingTextProps,
} from '@/components/animate-ui/primitives/texts/splitting';


<SplittingText 
    text="Splitting Text"
    type="char"
/>

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

參數	參數型態	說明
text	`string`	顯示的文字內容
type	`'chars' \| 'words' \| 'lines'`	文字拆分的方式，預設為 `chars`（逐字拆分），也可選擇依照字詞 `words` 或行數 `lines`。要注意的是中文字也是要用空白才能分，標點符號可是不會斷 der
initial	`object`	動畫初始狀態（例如 `{ x: 150, opacity: 0 }`）
animate	`object`	動畫結束狀態（例如 `{ x: 0, opacity: 1 }`）
transition	`object`	動畫過渡效果，包含 `duration`、`ease`，詳細請看 Highlight Text 元件的參數說明呦 (ゝ∀･)
stagger	`number`	元素之間的動畫間隔時間（秒）。對你沒看錯這邊是 sec，我也不懂為什麼作者有的是秒有的是毫秒 ( ºωº )
delay	`number`	動畫延遲開始的時間（秒），預設為 `0`
inView	`boolean`	是否在元素進入 viewport 時才觸發動畫，預設為 `false`
inViewMargin	`string`	用來定義 viewport margin 的參數，格式同 CSS `rootMargin`，預設 `0px`
inViewOnce	`boolean`	是否僅在第一次進入 viewport 時觸發動畫，預設為 `true`
disableAnimation	`boolean`	是否停用動畫，預設為 `false` (`true` 的話你用心酸的膩 (☉д⊙))

想要更詳細的設定方式嗎？請至 Animate UI Splitting Text 觀看更完整的說明～

Typing Text (打字文字)

text demo

使用 Shadcn CLI 加入 Typing Text

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

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

import {
    TypingText,
    TypingTextCursor,
} from '@/components/animate-ui/primitives/texts/typing';

<TypingText text="Typing Text" />

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

參數	參數型態	說明
text	`string`	顯示的文字
delay	`number`	動畫延遲開始的時間（毫秒 ms），預設為 `0`
inView	`boolean`	是否在元素進入 viewport 時才觸發動畫，預設為 `false`
inViewMargin	`string`	用來定義 viewport margin 的參數，格式同 CSS `rootMargin`，預設 `0px`
inViewOnce	`boolean`	是否僅在第一次進入 viewport 時觸發動畫，預設為 `true`
loop	`boolean`	是否巡迴打字動畫，預設為 `false`
holdDelay	`number`	`loop` 設為 `true` 時才會用到的元件。當打字動畫將字打完時，需要等待多久後開始 Backspace，時間（毫秒 ms），預設為 `1000` (也就是 1 秒)