Type Specimen Stage
仿鑄造廠樣張頁的可變字體展示台：巨型字形、字重階梯與字級縮放列，拖動軸向滑桿時整張樣張以 Motion 同步補間重排。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<TypeSpecimenStage />
安裝
npx shadcn@latest add https://webberui.com/r/type-specimen-stage.json或在 components.json 設定 registries 後，改用 @webberui/type-specimen-stage 安裝。
安裝依賴後，從 registry JSON（/r/type-specimen-stage.json 的 files[0].content）複製 type-specimen-stage.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TypeSpecimenStage } from "@/components/ui/type-specimen-stage";
<TypeSpecimenStage
glyph="Ag"
sampleText="Grotesk"
fontName="Webber Grotesk"
defaultAxisValues={{ wght: 520, wdth: 108, opsz: 40 }}
/>受控模式：傳入 axisValues 與 onAxisValuesChange 自行掌管軸向狀態。
const [axes, setAxes] = React.useState({ wght: 400, wdth: 100, opsz: 16 });
<TypeSpecimenStage axisValues={axes} onAxisValuesChange={setAxes} />只顯示部分軸向滑桿：
<TypeSpecimenStage axes={["wght", "opsz"]} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
glyph | string | "Ag" | 巨型主字形（單字或短詞） |
sampleText | string | "Typeface" | 字重階梯欄與字級縮放列共用的樣本文字 |
fontFamily | string | 系統 sans stack | 樣張字體家族；傳入可變字體可獲得真實軸向渲染 |
foundry | string | "Webber Type Foundry" | 標頭的鑄造廠資訊 |
fontName | string | "Webber Grotesk Variable" | 標頭顯示的字體名稱 |
axes | ("wght" | "wdth" | "opsz")[] | 三軸全開 | 要顯示的軸向滑桿（依序） |
weights | number[] | [200,300,400,500,700,900] | 字重階梯的權重清單（由上到下） |
sizes | number[] | [14,20,28,40,56] | 字級縮放列的尺寸清單（px） |
axisValues | Partial<Record<Axis, number>> | — | 受控軸向值（傳入即進入受控模式） |
defaultAxisValues | Partial<Record<Axis, number>> | 各軸內建預設 | 非受控初始軸向值 |
onAxisValuesChange | (values) => void | — | 軸向值變動時的回呼 |
細節
- 軸向對應：三軸各自映射到一個可靠可見的 CSS 槓桿，即使在不具可變軸的系統字體上也看得到樣張重排——
wght→font-weight、wdth→ 水平scaleX、opsz→ 字間距（tracking）。 - 真實可變字體：元件同時輸出
font-variation-settings，若你把fontFamily指向一款真正的可變字體，wght／wdth／opsz會以字體原生軸向渲染。 - 同步補間：每個滑桿背後是一個
useSpring馬達，拖動時整張樣張（巨型字形、字重階梯、字級列）以同一組彈簧平滑逼近目標值。 - 字重階梯：各列自帶字重，
font-weight直接驅動可變字體的wght軸；當前滑桿字重最接近的一列會被高亮條標記並隨拖動滑動。
可及性
- 底部滑桿使用原生
<input type="range">，內建鍵盤操作（方向鍵）與aria-label／aria-valuetext。 - 標頭的軸向讀數帶
aria-live="polite"，拖動時輔助科技會即時朗讀當前軸向值。 - 重複的樣張視覺（巨型字形除外的階梯列與字級列）標記
aria-hidden，避免朗讀器重複唸出同一組樣本文字。 - 使用者系統開啟「減少動態效果」時，軸向值直接跳至目標（
MotionValue.jump），不做進場與補間動畫。