傾斜畫廊主視覺｜免費 React 元件

標題在左、右側一面 3D 傾斜排列的圖片畫廊緩慢橫移，兩列反向，hover 時暫停。

首頁主視覺區塊：左側是小標、標題、說明與兩顆 CTA，右側是一面以 rotateY 傾斜擺放的圖片畫廊。每一列圖卡緩慢橫向循環，相鄰列方向相反、速度略有差異，左右邊緣以漸層淡出；滑鼠移入或用鍵盤聚焦畫廊時暫停，被指到的圖卡會往前浮出。沒有提供圖片時，會畫出暖色漸層搭配山、圓、窗格幾何的佔位圖。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add angled-gallery-hero

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

傾斜角度（deg）angle

-18

列數rows

循環週期（秒）duration

滑鼠移入暫停pauseOnHover

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<AngledGalleryHero/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/angled-gallery-hero.json

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

使用

import { AngledGalleryHero } from "@/components/ui/angled-gallery-hero";

<AngledGalleryHero
  eyebrow="穗光攝影工作室"
  title="把每一次快門，排成一面會呼吸的牆"
  subtitle="婚禮、商品與街拍作品集中展示。"
  primaryAction={{ label: "預約拍攝", href: "/booking" }}
  secondaryAction={{ label: "看完整作品", href: "/works" }}
  images={[
    { src: "/works/01.jpg", alt: "海邊婚禮" },
    { src: "/works/02.jpg", alt: "手沖咖啡商品照" },
    // 建議 6–12 張
  ]}
/>

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標
`subtitle`	`ReactNode`	—	標題下方的說明文字
`primaryAction`	`AngledGalleryHeroAction`	—	主要按鈕，背景使用強調色
`secondaryAction`	`AngledGalleryHeroAction`	—	次要按鈕，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級
`minHeight`	`number`	`560`	區塊最小高度（px）
`images`	`AngledGalleryHeroImage[]`	8 張佔位圖	畫廊圖片；沒給 `src` 的項目畫佔位圖
`angle`	`number`	`-18`	畫廊 `rotateY` 角度（deg）；省略時讀 `--wb-angled-gallery-hero-angle`
`rows`	`1 \| 2 \| 3`	`2`	畫廊列數，相鄰列反向橫移
`pauseOnHover`	`boolean`	`true`	滑鼠移入畫廊時暫停橫移
`galleryLabel`	`string`	`"作品畫廊"`	畫廊區域的無障礙名稱
`className`	`string`	—	併入根 `section` 的 class

AngledGalleryHeroAction

欄位	型別	預設值	說明
`label`	`string`	—	按鈕文字
`href`	`string`	—	提供時渲染為 `a` 連結，否則為 `type="button"`
`onClick`	`() => void`	—	點擊回呼

AngledGalleryHeroImage

欄位	型別	預設值	說明
`src`	`string`	—	圖片網址；省略則畫佔位圖
`alt`	`string`	—	替代文字，也是佔位圖的無障礙名稱

細節

畫廊容器 perspective: 1200px，內層 rotateY(var(--wb-angled-gallery-hero-angle, -18deg)) rotateX(6deg)。
每列內容複製一份，translateX 從 0 線性走到 -50% 後無縫重來；週期為 --wb-angled-gallery-hero-duration（預設 40s），第二列反向且 ×1.25，第三列同向 ×1.5。
進場：小標、標題、說明、CTA 依序上移 16px 並淡入，間隔 80ms，時長 --wb-angled-gallery-hero-enter-duration（預設 600ms）。
強調色：--wb-angled-gallery-hero-accent（預設亮色 #0d9488、暗色 #2dd4bf），用於小標、主按鈕與 focus ring。
md 以上為左 5／右 7 兩欄；窄螢幕畫廊移到標題下方。

可及性

根元素是 section，以 aria-labelledby 指向標題；標題層級由 as 決定。
畫廊是帶 aria-label 的 region，可用 Tab 聚焦；聚焦時一律暫停橫移（不受 pauseOnHover 影響），讓鍵盤使用者能停下自動移動的內容。
用於無縫循環的複製內容與第二列之後的圖卡標記 aria-hidden，螢幕閱讀器只會讀到一次每張圖的替代文字。
CTA 是 a 或 type="button"，有清楚的 focus-visible 外框。
系統開啟「減少動態效果」時，所有循環橫移停止、呈現靜態構圖，進場改為 150ms 淡入；此設定在首次繪製即以 CSS 媒體查詢生效。

傾斜畫廊主視覺

把這個效果裝進你的專案

本頁目錄