Vanish Input

送出時把輸入文字逐像素粒子化消散的輸入框，支援吹散、四散、上飄三款樣式與輪播 placeholder。

載入預覽⋯

Playground

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

消散樣式variant

消散時長（秒）duration

0.9

提示輪播間隔（毫秒）placeholderInterval

3000

停用輸入disabled

<VanishInput />

安裝

npx shadcn@latest add https://webberui.com/r/vanish-input.json

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

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

npm install motion lucide-react clsx tailwind-merge

使用

import { VanishInput } from "@/components/ui/vanish-input";

<VanishInput
  placeholder="輸入後按 Enter⋯"
  onSubmit={(value) => console.log(value)}
/>

送出（按 Enter 或點右側箭頭）時，元件會把當前文字畫到離屏 canvas、逐像素取樣成粒子，再依 variant 讓粒子飄散淡出，同時清空輸入框。

受控模式

const [value, setValue] = React.useState("");

<VanishInput
  value={value}
  onChange={setValue}
  onSubmit={(v) => {
    // 送出後自行清空受控值
    setValue("");
  }}
/>

輪播 placeholder

<VanishInput
  placeholder={["搜尋文件⋯", "或輸入指令", "支援中文與 emoji 🎉"]}
  variant="scatter"
/>

Props

Prop	型別	預設值	說明
`placeholder`	`string \| string[]`	`"輸入訊息⋯"`	placeholder 文字；傳陣列會依序輪播
`value`	`string`	—	受控值（受控模式）
`defaultValue`	`string`	`""`	非受控模式的預設值
`onChange`	`(value: string) => void`	—	內容變更時觸發
`onSubmit`	`(value: string) => void`	—	送出時觸發，帶入送出的文字
`variant`	`"sweep" \| "scatter" \| "rise"`	`"sweep"`	消散樣式：吹散 / 四散 / 上飄
`duration`	`number`	`0.9`	消散動畫時長（秒）
`placeholderInterval`	`number`	`3000`	輪播 placeholder 的間隔（毫秒）
`aria-label`	`string`	第一個 placeholder	無障礙名稱
`disabled`	`boolean`	`false`	停用輸入與送出
`className`	`string`	—	外層容器樣式

細節

送出時以 getImageData 逐像素取樣文字，粒子顏色直接沿用當下的文字色，因此淺色 / 深色主題都會自動對上。
canvas 依 devicePixelRatio（上限 2）縮放以保持銳利，並用 ResizeObserver 跟隨輸入框寬度重算尺寸。
粒子數量超過上限時會等距抽稀，維持字形輪廓同時保護效能；requestAnimationFrame 迴圈在全部粒子淡出後自動停止，元件卸載時也會清除。
輸入以原生 <input> 承載，IME 組字中按 Enter 只確認候選字而不會誤送出。

可及性

使用者系統開啟「減少動態效果」時，送出直接清空輸入、不播放粒子動畫，placeholder 也停止輪播。
canvas 標記 aria-hidden，輸入框帶 aria-label（預設取第一個 placeholder），送出鈕帶 aria-label="送出"。
表單以原生 <form> 承載，支援 Enter 送出與鍵盤操作；caret 保留可見游標。

On this page