Falling Text

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

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<FallingText/>

    </div>
  );
}

安裝

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

使用

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

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

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

Props

可及性

• 使用者系統開啟「減少動態效果」時，直接渲染靜態文字
• 完整字串以 sr-only 提供給輔助科技朗讀，拆分後的單位標記 aria-hidden