Art Direction Morph

同一組標題、圖片與內文在多套雜誌級版面之間以 FLIP 佈局動畫無縫變形，附鍵盤／分頁指示切換器。

載入預覽⋯

Playground

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

標題title

眉標kicker

顯示版面切換器showSwitcher

自動輪播autoPlay

輪播間隔（毫秒）interval

3200

<ArtDirectionMorph />

安裝

npx shadcn@latest add https://webberui.com/r/art-direction-morph.json

或在 components.json 設定 registries 後，改用 @webberui/art-direction-morph 安裝。

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

npm install motion clsx tailwind-merge

使用

傳入同一組內容，元件會在瑞士網格、粗獷不對稱、古典置中三款版面之間換版；切換時所有元素以 FLIP 動畫飛行重排，字級與欄寬同步過渡：

import { ArtDirectionMorph } from "@/components/ui/art-direction-morph";

<ArtDirectionMorph
  kicker="Editorial · Issue 12"
  title="同一組內容，三套版面"
  body="標題、圖片與內文在多套版面之間以 FLIP 佈局動畫無縫變形。"
  meta="Photography — W. Weber"
/>;

受控模式

傳入 layout 與 onLayoutChange 即進入受控模式，由外部狀態掌控目前版面；省略 layout（可選 defaultLayout）則為非受控模式，由元件內部管理：

const [layout, setLayout] = React.useState<ArtLayout>("swiss");

<ArtDirectionMorph
  layout={layout}
  onLayoutChange={setLayout}
  title="標題"
  body="內文"
/>;

自動輪播與自訂版面

以 autoPlay 啟動自動換版（hover 或聚焦時暫停），以 layouts 限定並排序可用版面：

<ArtDirectionMorph
  autoPlay
  interval={3000}
  layouts={["classical", "swiss"]}
  title="標題"
  body="內文"
/>;

Props

Prop	型別	預設值	說明
`title`	`string`	—	標題文字
`body`	`string`	—	內文段落
`kicker`	`string`	—	標題上方的眉標／分類
`meta`	`string`	—	底部的出處／署名等後設資訊
`image`	`React.ReactNode`	內建裝飾佔位	圖片視覺槽（如 `<img>` 或色塊）
`layouts`	`ArtLayout[]`	三款全開	納入切換循環的版面清單，順序即分頁順序
`layout`	`ArtLayout`	—	受控模式：目前版面
`defaultLayout`	`ArtLayout`	`layouts` 第一項	非受控模式：初始版面
`onLayoutChange`	`(layout: ArtLayout) => void`	—	版面變更時回呼
`showSwitcher`	`boolean`	`true`	是否顯示分頁指示切換器
`autoPlay`	`boolean`	`false`	自動輪播版面（互動時暫停）
`interval`	`number`	`3200`	自動輪播間隔（毫秒）
`className`	`string`	—	附加到最外層容器的 class

ArtLayout 為 "swiss" | "brutalist" | "classical"（瑞士網格／粗獷不對稱／古典置中）。

細節

三款版面共用同一組 DOM 元素，僅切換 CSS grid 位置與排印 class；Motion 的 layout 以 FLIP 量測前後邊界，讓元素飛行重排、字級與欄寬同步以 spring 過渡
版面切換器為 motion.span 的 layoutId 滑動指示塊，隨選取分頁平滑滑移
圖片槽可傳入任意 ReactNode；未提供時顯示內建的漸層裁切佔位

可及性

切換器採用 role="tablist" / role="tab" 語意，構圖區為 role="tabpanel" 並以 aria-labelledby 連結目前分頁
分頁採 roving tabindex：方向鍵（←→↑↓）在版面間移動、Home / End 跳至首末，焦點隨之移動
目前版面以 aria-live="polite" 的隱藏區塊播報給螢幕閱讀器
使用者系統開啟「減少動態效果」時停用 FLIP 與自動輪播，換版直接跳位不做過渡

Art Direction Morph

On this page