影片填色文字

文字字腔內填入播放中的背景影片，未給影片時以內建動態漸層自足呈現。

用一段 SVG 文字遮罩把影片（或內建的流動漸層）裁進字腔裡，字放大越粗、露出的影像面積越大，效果越搶眼。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

文字內容text

字級 (px)fontSize

120

字重fontWeight

900

字體家族fontFamily

<VideoText />

安裝

npx shadcn@latest add https://webberui.com/r/video-text.json

或在 components.json 設定 registries 後，改用 @webberui/video-text 安裝。

安裝依賴後，從 registry JSON（/r/video-text.json 的 files[0].content）複製 video-text.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

使用

把元件放進一個有明確高度的有界容器；不指定 src 時會用內建的動態漸層填色。

import { VideoText } from "@/components/ui/video-text";

<div className="relative h-[220px] w-full overflow-hidden rounded-xl bg-neutral-950">
  <VideoText text="WEBBER" className="h-full w-full" />
</div>

要填入真實影片時，傳入 src（建議 muted、loop 的短片）：

<VideoText
  text="OCEAN"
  src="/videos/waves.mp4"
  poster="/videos/waves.jpg"
  className="h-full w-full"
/>

Props

Prop	型別	預設值	說明
`text`	`string`	—	要填色的文字，建議短字、粗體
`src`	`string`	`undefined`	影片來源；未提供時改用內建動態漸層
`poster`	`string`	`undefined`	靜態影格圖，reduced-motion 或載入前顯示
`fontSize`	`number`	容器高度 `0.78` 倍	文字字級（px），未指定時自動縮放
`fontWeight`	`number \| string`	`900`	字重
`fontFamily`	`string`	系統字體	遮罩字體，建議用系統字體避免缺字
`colors`	`string[]`	桃紅／靛藍／青綠	內建漸層填色的顏色（無 `src` 時生效）

可及性

完整文字以 sr-only 提供給輔助科技朗讀，遮罩內容全數 aria-hidden
使用者開啟「減少動態效果」時，影片暫停在第一影格、內建漸層只繪製靜態單格
遮罩 SVG 依容器實際像素生成，字腔與影像 1:1 對齊、不隨縮放變形

影片填色文字

Playground

安裝

使用

Props

可及性

On this page