Falling Text

字元帶重力掉落並彈跳落定的文字動畫，可調重力、回彈與觸發時機。

每個字元從上方落下，撞到基線後依回彈係數彈跳，能量耗盡便靜止歸位——純物理模擬，逐幀直接改 transform，不觸發 React 重繪。

載入預覽⋯

Playground

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

文字內容text

重力加速度gravity

2200

回彈係數bounce

0.4

起跳間隔（秒）stagger

0.05

起始高度fallHeight

220

掉落傾斜rotate

<FallingText />

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

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

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

npm install motion clsx tailwind-merge

import { FallingText } from "@/components/ui/falling-text";

<FallingText text="Gravity wins." className="text-5xl font-bold" />

因為字元落定前會停在靜止位置的正上方，請把它放進有足夠高度且 overflow-hidden 的有界容器（例如 h-[320px]），才不會掉出畫面。