Ascii Art
將圖片轉為可動畫的 ASCII／像素藝術。
把任何圖片（或文字/emoji）即時降採樣成 ASCII 字元或像素色塊，並以打散、波動或掃描動畫進場。全程 canvas 2D 繪製，尊重「減少動態效果」。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
72
9
<AsciiArt />
安裝
npx shadcn@latest add https://webberui.com/r/ascii-art.json或在 components.json 設定 registries 後，改用 @webberui/ascii-art 安裝。
安裝依賴後，從 registry JSON（/r/ascii-art.json 的 files[0].content）複製 ascii-art.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
以 src 傳入圖片（建議用 data: URI 保持元件自足），或改用 text 把文字/emoji 當作來源圖形。
import { AsciiArt } from "@/components/ui/ascii-art";
<AsciiArt src="/portrait.png" columns={90} animation="scramble" loop />
<AsciiArt text="★" mode="pixel" animation="reveal" />提示：
columns是水平字元欄數，數字越大越精細也越吃效能。跨來源（cross-origin）圖片若未帶 CORS 標頭會污染 canvas 而無法取樣，改用同源資源或data:URI 最穩。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
src | string | — | 來源圖片 URL 或 data: URI |
text | string | "★" | 無 src 時，改把這段文字/emoji 當來源圖形 |
alt | string | — | 給輔助科技的替代文字 |
columns | number | 72 | 水平解析度（字元欄數） |
chars | string | " .:-=+*#%@" | 由暗到亮的字元梯度，至少兩個字元 |
color | string | currentColor | ascii 模式的文字顏色 |
background | string | "transparent" | 底色 |
mode | "ascii" | "pixel" | "ascii" | 輸出字元或色塊像素 |
animation | "scramble" | "wave" | "reveal" | "none" | "scramble" | 動畫模式 |
speed | number | 1 | 動畫速度倍率 |
fontSize | number | 9 | 單一單元的像素高度（ascii 為字級） |
invert | boolean | false | 反轉亮度對應 |
loop | boolean | false | 動畫結束後是否持續循環 |
可及性
- 使用者系統開啟「減少動態效果」時，直接繪製最終靜態畫面，不播放動畫
- 畫布帶
role="img"與aria-label，朗讀時回報替代文字而非逐格字元