暗色人像聚光｜免費 React 元件

暗色版面中的大幅人像與引言並列的 React 評價區塊，下方縮圖列切換客戶，人像由灰階轉彩色交叉淡入，姓名與職稱依序滑入。

把客戶評價排成一張暗色雜誌版面：左側是大幅直式人像（沒有照片時以暖色雙色漸層與抽象半身剪影佔位），右側是強調色大引號、引言與署名，兩者並列不重疊。下方一排 56px 圓角方形縮圖代表每位客戶，未選中的呈灰階、半透明，選中者轉為彩色並套上強調色外框與小圓點，外框以彈簧動畫滑到新位置。切換時新人像從灰階淡入成彩色並由 1.03 輕輕收回原尺寸，舊人像退回灰階淡出；引言由下方升起，姓名與職稱再依序從左側滑入。預設手動切換，可選擇開啟自動播放。

把這個效果裝進你的專案

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

npx webberui@latest add dark-portrait-spotlight

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

Playground

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

底色模式surface

自動播放autoplay

交叉淡接時長（ms）duration

700

灰階效果grayscale

import * as React from "react";

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

編輯中的呼叫預設屬性

<DarkPortraitSpotlight/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/dark-portrait-spotlight.json

或在 components.json 設定 registries 後，改用 @webberui/dark-portrait-spotlight 安裝。

使用

import { DarkPortraitSpotlight } from "@/components/ui/dark-portrait-spotlight";

<DarkPortraitSpotlight
  eyebrow="客戶怎麼說"
  title="換上新介面之後"
  testimonials={[
    {
      quote: "改版後的訂位頁，讓週末候位少了一半。",
      name: "林語晴",
      role: "營運主理人",
      company: "青嶼咖啡",
      highlight: "少了一半",
    },
    {
      quote: "司機打開派車畫面就知道下一站，新人第一天就能獨立跑線。",
      name: "陳柏宇",
      role: "調度主管",
      company: "北辰物流",
      photoSrc: "/images/team/chen.jpg",
    },
  ]}
  onValueChange={(i) => console.log(`切到第 ${i + 1} 則`)}
/>

Props

Prop	型別	預設值	說明
`testimonials`	`DarkPortraitSpotlightItem[]`	—	評價清單
`eyebrow`	`string`	—	標題上方的小標
`title`	`string`	—	區塊標題；有提供時作為 section 的 `aria-labelledby`
`subtitle`	`string`	—	標題下方的說明文字
`value`	`number`	—	受控的目前索引；未提供時由元件內部管理
`defaultValue`	`number`	`0`	非受控模式的初始索引
`onValueChange`	`(index: number) => void`	—	索引變動時回呼
`surface`	`"dark" \| "auto"`	`"dark"`	`dark` 固定暗色底；`auto` 跟隨網站主題，淺色主題時為白底
`autoplay`	`boolean`	`false`	是否自動播放；使用者開啟「減少動態效果」時一律關閉
`interval`	`number`	`7000`	自動播放間隔（ms）
`duration`	`number`	`700`	人像交叉淡接時長（ms）；未提供時讀 `--wb-dark-portrait-spotlight-duration`
`grayscale`	`boolean`	`true`	是否使用灰階效果：人像由灰階轉彩色、未選中的縮圖為灰階
`className`	`string`	—	透傳到根 section

DarkPortraitSpotlightItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言內文
`name`	`string`	—	姓名，同時用來產生縮圖的姓名縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司
`rating`	`number`	—	評分（0–5）；本元件不顯示，保留以便與其他評價元件共用資料
`avatarHue`	`number`	—	佔位人像與縮圖的色相；未提供時依索引以黃金角度（137.508°）推算
`highlight`	`string`	—	quote 中要以強調色標記的片段
`metric`	`{ value: string; label: string }`	—	搭配引言的關鍵數字
`photoSrc`	`string`	—	人像照片網址；未提供時以漸層 + 抽象剪影佔位，縮圖改用姓名縮寫

細節

節奏變數：--wb-dark-portrait-spotlight-duration（預設 700ms）控制人像交叉淡接與灰階轉彩色；傳入 duration 時會寫進這個變數，元件掛載後再從 computed style 讀回，所以在外層覆寫變數也會生效。引言、姓名、職稱的進場比人像快一些，姓名延遲 150ms、職稱再晚 80ms。
縮圖 hover 時灰階由 100% 降到 50%，時長走 --wb-dark-portrait-spotlight-hover-duration（預設 150ms）。
選中外框以 layoutId 共用版面動畫，彈簧參數 stiffness 400、damping 32，切換時外框會滑到新縮圖上。
強調色只走 --wb-dark-portrait-spotlight-accent（暗色底預設 #2dd4bf；surface="auto" 在淺色主題時預設 #0d9488），用在小標、大引號、引言重點、數字與選中外框。
開啟 autoplay 時每則停留 interval 毫秒；滑鼠移入、鍵盤焦點在區塊內、按下暫停鈕或分頁切到背景都會暫停，恢復後重新計一整個間隔。

可及性

根元素是 section，有標題時以 aria-labelledby 指向標題；引言以 figure、blockquote、figcaption 呈現
縮圖列為 role="tablist"，每個縮圖是 role="tab"、aria-label 為姓名、aria-selected 標示選中，採 roving tabindex；焦點在縮圖上時可用 ← → 循環切換、Home／End 跳到第一則或最後一則
引言區為 role="tabpanel"，以 aria-labelledby 指向目前的縮圖；人像為 role="img" 並帶「某某的人像」標籤
自動播放進行中 aria-live="off"，避免定時打斷螢幕閱讀器；手動切換或暫停時改為 polite；開啟自動播放時一定有可見的暫停鈕（WCAG 2.2.2）
暗色底文字使用 neutral-100／neutral-400，與 neutral-950 底色的對比皆高於 4.5:1
使用者系統開啟「減少動態效果」時：自動播放關閉，不做縮放、位移與灰階轉換，人像與文字改為 150ms 淡入，外框直接跳到新位置，仍可用縮圖切換

暗色人像聚光

把這個效果裝進你的專案

Playground

安裝

使用

Props

DarkPortraitSpotlightItem

細節

可及性

本頁目錄