Type Scale Playground

互動式模組化字階遊樂場：選擇比例或拖動滑桿，整頁層級以彈簧動畫同步重算重排。

載入預覽⋯

Playground

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

初始比例defaultRatio

1.25

基準字級 (px)baseSize

最小比例min

1.1

最大比例max

1.8

顯示控制列showControls

<TypeScalePlayground />

安裝

npx shadcn@latest add https://webberui.com/r/type-scale-playground.json

或在 components.json 設定 registries 後，改用 @webberui/type-scale-playground 安裝。

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

npm install motion clsx tailwind-merge

使用

import { TypeScalePlayground } from "@/components/ui/type-scale-playground";

<TypeScalePlayground defaultRatio={1.25} />

受控模式

提供 ratio 即進入受控模式，並以 onRatioChange 接收使用者操作：

const [ratio, setRatio] = React.useState(1.333);

<TypeScalePlayground ratio={ratio} onRatioChange={setRatio} />

自訂版面

以 levels 定義由大到小的示範層級；每一級的字級 = baseSize × ratio^step：

<TypeScalePlayground
  baseSize={18}
  levels={[
    { key: "h1", step: 4, text: "產品標題", weight: 700, label: "H1" },
    { key: "h2", step: 2, text: "區塊小標", weight: 600, label: "H2" },
    { key: "body", step: 0, text: "內文段落。", label: "Body" },
    { key: "note", step: -1, text: "註腳說明。", muted: true, label: "Note" },
  ]}
/>

Props

Prop	型別	預設值	說明
`ratio`	`number`	—	受控比例值；提供時為受控模式
`defaultRatio`	`number`	`1.25`	非受控模式的初始比例
`onRatioChange`	`(ratio: number) => void`	—	比例改變時回呼（已夾限並四捨五入至三位小數）
`presets`	`ScalePreset[]`	六款具名比例	具名比例預設清單
`min`	`number`	`1.1`	滑桿允許的最小比例
`max`	`number`	`1.8`	滑桿允許的最大比例
`baseSize`	`number`	`16`	基準字級（step 0 的像素大小）
`levels`	`TypeLevel[]`	五級示範版面	自訂各字級層級
`showControls`	`boolean`	`true`	是否顯示預設與滑桿控制列

ScalePreset

欄位	型別	說明
`label`	`string`	顯示名稱
`value`	`number`	比例數值

TypeLevel

欄位	型別	說明
`key`	`string`	唯一鍵
`step`	`number`	相對基準的階數（字級 = baseSize × ratio^step）
`text`	`string`	範例文字
`label`	`string`	層級標籤（右側徽章）
`weight`	`number`	字重
`tracking`	`string`	字距（letter-spacing 的 CSS 值）
`uppercase`	`boolean`	是否轉大寫
`muted`	`boolean`	是否以次要色顯示

細節

模組化字階：每一層級的字級都由 baseSize × ratio^step 算出。改變比例，所有層級同步重算——大字放大得快、小字放大得慢，對比隨之收放。
彈簧同步：比例改變時，各級字級以同一組彈簧參數動畫過渡，並在放大時自然換行重排，示範真實的版面呼吸。
雙模式：不傳 ratio 為非受控（內部狀態）；傳入 ratio 為受控，以 onRatioChange 同步外部狀態。
預設與滑桿：內建六款常見比率（Minor Third 至 Golden）；也可拖動滑桿在 min–max 間無段調整。

可及性

比例滑桿為 role="slider"，帶 aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext，並支援方向鍵（±0.01）、PageUp/PageDown（±0.1）、Home/End 鍵盤操作。
預設為真正的 <button>，以 aria-pressed 標示目前選中的比例。
示範文字為可讀內容；右側像素徽章對輔助科技隱藏（aria-hidden）。
使用者系統開啟「減少動態效果」時，字級直接跳至目標值、把手不做彈跳，不再有過渡動畫。

Type Scale Playground

On this page