壓力感應文字

字元依游標壓力區即時縮放變形（可變字體），越靠近游標越被壓寬、壓重、壓斜。

字元依游標壓力區即時縮放變形。游標越靠近，字元被壓得越寬、越重、越斜，形成流動的可變字體質感。

載入預覽⋯

Playground

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

顯示文字text

字級 (px)fontSize

壓力半徑 (px)radius

180

游標平滑係數smoothing

0.18

斜體變形italic

不透明度變化alpha

<TextPressure />

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

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

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

npm install motion clsx tailwind-merge

import { TextPressure } from "@/components/ui/text-pressure";

<TextPressure text="PRESSURE" fontSize={92} />

效果由 requestAnimationFrame 迴圈驅動：每幀計算各字元中心到游標的距離，透過 smoothstep falloff 映射成字重、scaleX、scaleY 與 skew。
字重（weight）在支援可變字重的系統字體（如 SF Pro、Segoe UI Variable）上會平滑內插；width 與 height 用 transform 縮放，任何字體都順暢。
游標離開後所有字元回到中性狀態。系統開啟「減少動態效果」時渲染靜態文字。
radius 控制壓力波及半徑，值須為正數；smoothing 越小游標越黏滯。