React 文字動畫元件

標題進場、逐字翻閃、打字機、亂碼收斂、漸層流光。文字動畫最容易做過頭——這一類的元件都把節奏參數暴露成 props,可以調到「有察覺但不打擾」的程度,並且全部尊重 prefers-reduced-motion。

共 34 個,其中 30 個免費、不需登入即可安裝。

  • 自動循環翻閃一組詞語,逐字模糊淡入,容器寬度隨字自適應

  • 逐字/逐詞/逐行 stagger 進場,可設觸發時機

  • 滾動時逐字顯色/加深(opacity scrub)

  • hover 時字元上下滾動翻轉

  • 數字滾輪式過渡(價格、統計數);避開 npm `number-flow` 撞名

  • 亂碼解密效果逐字定型

  • 兩段文字間平滑變形過渡

  • 跑馬燈,速度隨滾動速度變化、可反向

  • 掃光/漸層流動文字

  • SVG 路徑手寫描邊動畫

  • 滾動驅動的 3D 圓柱文字

  • 逐字打字並帶閃爍游標的經典打字機效果

  • hover 時以漸層輪廓描邊填色(x.ai 風)

  • 字元依游標壓力區即時縮放變形(可變字體)

  • RGB 分離與抖動的故障(glitch)文字效果

  • 模擬手繪螢光筆掃過的標記高亮

  • 字元沿圓形排列並可持續旋轉

  • 文字沿自訂曲線流動、可拖曳互動

  • 字元帶重力掉落並彈跳落定

  • 文字字腔內填入播放中的背景影片

  • Vestaboard 式機械分裂翻牌字元切換

  • 逐詞在模糊與清晰之間循環聚焦

  • 帶移動線性投影的立體標題文字

  • Ascii Art免費

    將圖片轉為可動畫的 ASCII/像素藝術

  • 文字周圍持續生成、汰換閃爍的四芒星點,增添靈動的魔法感

  • Wave Text免費

    每個字素沿正弦波上下起伏,可調振幅、波長與速度,hover 可加速

  • 亂碼字元快速跳動後逐一鎖定為真實文字,駭客風解密效果

  • 霓虹燈管質感文字,隨機微閃爍與多層光暈,可自訂色彩

  • 進入視窗時整段文字由重模糊逐行聚焦清晰,適合段落敘事

  • 逐字依時間軸上色的歌詞行,當前行放大聚焦

  • 五種常見的 logo 進場:光暈放大、描邊後填色、掃光、圖標先到字標滑出、字標形變,可掛載、進入視口或手動觸發。

  • 句子先被一筆手繪劃線劃掉,再由新句子從下方升起取代,可串接多組,適合「舊說法 → 新說法」的論點翻轉。

  • 以 SVG 位移濾鏡讓內容像隔著液滴折射晃動,點擊或進入視口時折射歸零、液面破裂,清楚揭露標誌或標題。

  • 散落的關鍵字雲向中心收攏、彼此融合,最後收斂成一句結論,適合把一堆零散想法歸納成核心訊息的段落。