Cover Story Hero

雜誌封面構圖主視覺：刊名以影像遮罩壓在人像後方，標語沿四角排布，游標視差、捲動時封面線逐條飛出讓位內文。

載入預覽⋯

Playground

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

刊名主標masthead

期號issue

出版日期date

定價price

顯示條碼barcode

視差強度parallaxStrength

<CoverStoryHero />

安裝

npx shadcn@latest add https://webberui.com/r/cover-story-hero.json

或在 components.json 設定 registries 後，改用 @webberui/cover-story-hero 安裝。

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

npm install motion clsx tailwind-merge

使用

import { CoverStoryHero } from "@/components/ui/cover-story-hero";

<CoverStoryHero
  masthead="ATLAS"
  subject="/cover-portrait.png"
  issue="No. 132"
  date="JULY 2026"
  price="$12"
  coverLines={[
    { corner: "top-left", kicker: "封面故事", text: "設計系統的下一步" },
    { corner: "top-right", kicker: "專訪", text: "動畫優先的介面" },
    { corner: "bottom-right", kicker: "專題", text: "編輯版面的復興" },
  ]}
>
  <article className="prose mx-auto max-w-2xl px-6 py-16">…內文…</article>
</CoverStoryHero>

封面面板預設高度 100svh、以視窗為捲動容器。若要嵌入巢狀的 overflow-y-auto 區塊，把該區塊的 ref 傳入 container，並視情況覆寫 height 與 scrollDistance：

const scrollRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollRef} className="h-[320px] overflow-y-auto">
  <CoverStoryHero
    masthead="ATLAS"
    container={scrollRef}
    height="280px"
    scrollDistance="320px"
    coverLines={coverLines}
  >
    {content}
  </CoverStoryHero>
</div>

Props

Prop	型別	預設值	說明
`masthead`	`string`	—	刊名／主標，以影像遮罩填色並壓在人像後方
`subject`	`string`	—	主體人像圖 URL（建議去背 PNG）；未提供時渲染內建中性色剪影
`subjectAlt`	`string`	—	人像替代文字；未提供時人像視為裝飾
`mastheadImage`	`string`	—	填入刊名的影像遮罩 URL；未提供時以中性色漸層填字
`coverLines`	`CoverLine[]`	`[]`	沿四角安全區排布的封面標語，捲動時逐條飛出
`issue`	`string`	—	期號，例如 `"No. 132"`
`date`	`string`	—	出版日期，例如 `"JULY 2026"`
`price`	`string`	—	定價，顯示於條碼旁
`barcode`	`boolean`	`true`	是否顯示條碼細節
`height`	`string`	`"100svh"`	封面面板高度（任意 CSS 長度）
`scrollDistance`	`string`	`"70vh"`	封面線飛出所需的額外捲動距離
`stickyTop`	`number`	`0`	封面吸頂位置（px）
`parallaxStrength`	`number`	`26`	滑鼠視差的最大位移量（px）
`springConfig`	`SpringOptions`	`{ stiffness: 150, damping: 22, mass: 0.4 }`	視差回彈的 spring 參數
`container`	`RefObject<HTMLElement \| null>`	—	巢狀捲動容器的 ref；預設以視窗為捲動容器

CoverLine 型別：

欄位	型別	說明
`corner`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	標語所在的角落安全區
`kicker`	`string`	眉題（小標），顯示在標語上方
`text`	`string`	標語主文字

細節

深度視差：刊名（最後景）與游標反向且位移最小、主體人像（中景）順向位移、封面標語（最前景）位移最大，三層形成景深。位移量由 parallaxStrength 控制，經 spring 回彈。
影像遮罩刊名：刊名以 background-clip: text 填入 mastheadImage；未提供時退回中性色漸層。字級以容器查詢單位 cqw 隨面板寬度縮放，桌機到行動裝置皆維持構圖比例。
捲動飛出：封面以 sticky 釘住，useScroll 進度把每條標語在前 60% 錯開起飛，沿其角落方向平移、旋轉並淡出，露出下方 children 內文。
細節裝飾：期號／日期細節條與純 CSS 條碼隨捲動先行淡出；邊框與暈影強化編輯版面質感。

可及性

使用者系統開啟「減少動態效果」時，停用游標視差與捲動飛出動畫，封面維持靜態完整構圖（sticky 版面保留、DOM 結構不變）。
封面為 <header> 並帶 aria-label，刊名為 <h1>；裝飾層（人像剪影、條碼、暈影、期號條）皆 aria-hidden。
提供 subject 時可用 subjectAlt 給人像替代文字；省略則人像自動視為裝飾。
視差只回應 pointerType === "mouse"，觸控裝置不觸發抖動。

Playground

安裝

使用

Props

細節

可及性

On this page