瀏覽器框主視覺｜免費 React 元件

右側一個大型瀏覽器裝置框佔滿版面，隨頁面捲動從微傾角度轉正並放大，框內可放任意產品畫面。

首頁主視覺區塊：左側是小標、標題、說明與兩顆 CTA，右側一個大型裝置框佔滿版面，可選瀏覽器（三圓點 + 網址膠囊）或筆電（螢幕 + 底座）。區塊進入視口時，裝置框從微微後仰、側轉的角度隨捲動轉正並放大到原尺寸，在捲動進度前 40% 完成後保持不動；框下的柔和陰影會隨角度變淡。框內放你自己的截圖或元件；沒有提供時，會畫出一個繁中假儀表板佔位。

把這個效果裝進你的專案

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

npx webberui@latest add browser-frame-hero

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

Playground

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

裝置框樣式variant

最大傾角（deg）tilt

超出右緣bleed

彈簧剛度stiffness

120

進場時長（ms）duration

600

import * as React from "react";

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

編輯中的呼叫預設屬性

<BrowserFrameHero/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/browser-frame-hero.json

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

使用

import { BrowserFrameHero } from "@/components/ui/browser-frame-hero";

<BrowserFrameHero
  eyebrow="嵐雲營運台"
  title="每天開店前，先看這一張就夠"
  subtitle="營收、訂單與回購率集中在同一個畫面。"
  primaryAction={{ label: "免費試用 14 天", href: "/signup" }}
  secondaryAction={{ label: "看功能導覽", href: "/tour" }}
  url="app.example.com"
  frameLabel="營運台儀表板截圖"
>
  <img src="/screens/dashboard.png" alt="" className="h-full w-full object-cover" />
</BrowserFrameHero>

放在巢狀捲動容器內

預設追蹤的是視窗的捲動。若元件放在固定高度的 overflow-y-auto 容器內，請把該容器的 ref 傳給 container。框的傾斜與縮放跟著「主視覺進出容器」的捲動進度走。

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

<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
  <BrowserFrameHero container={scrollerRef} />
</div>

以整個視窗為捲動容器時可省略 container，行為與原本相同。

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標
`subtitle`	`ReactNode`	—	標題下方的說明文字
`primaryAction`	`BrowserFrameHeroAction`	—	主要按鈕，背景使用強調色
`secondaryAction`	`BrowserFrameHeroAction`	—	次要按鈕，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級
`minHeight`	`number`	`560`	區塊最小高度（px）
`variant`	`"browser" \| "laptop"`	`"browser"`	裝置框樣式：瀏覽器或筆電
`url`	`string`	`"app.example.com"`	瀏覽器網址膠囊裡的文字
`tilt`	`number`	`12`	初始最大傾角（deg），`rotateX` 從這個值轉到 0，`rotateY` 取其 2/3 的負值
`bleed`	`boolean`	`true`	md 以上讓裝置框超出容器右緣，超出部分被區塊裁切
`images`	`BrowserFrameHeroImage[]`	—	框內圖片，只使用第一張；`children` 優先
`frameLabel`	`string`	佔位時為 `"產品儀表板示意圖"`	裝置框 `figure` 的無障礙名稱
`children`	`ReactNode`	繁中假儀表板	框內內容（截圖或元件），語意由內容自行提供
`container`	`RefObject<HTMLElement>`	—	巢狀捲動容器的 ref；省略則以視窗為捲動容器
`className`	`string`	—	併入根 `section` 的 class

BrowserFrameHeroAction

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

BrowserFrameHeroImage

欄位	型別	預設值	說明
`src`	`string`	—	圖片網址；省略則畫佔位儀表板
`alt`	`string`	—	替代文字，未設 `frameLabel` 時作為裝置框的無障礙名稱

細節

捲動驅動：useScroll 以區塊本身為目標（offset: ["start end", "end start"]），在進度 0–0.4 之間把 rotateX 從 tilt 轉到 0、rotateY 從 -tilt × 2/3 轉到 0、scale 從 0.94 到 1、y 從 40px 到 0，之後保持終態。
平滑：四個值都經過 useSpring（damping 24），剛度讀 --wb-browser-frame-hero-stiffness（預設 120）；這個變數在掛載時讀一次，執行期間修改需要重新掛載元件。
外層透視 perspective: 1400px，旋轉以框底部中心為軸。
進場：小標、標題、說明、CTA 依序上移 16px 並淡入，間隔 80ms；裝置框淡入並上移 24px。時長皆為 --wb-browser-frame-hero-duration（預設 600ms），曲線 cubic-bezier(0.22,1,0.36,1)。
強調色：--wb-browser-frame-hero-accent（預設亮色 #0d9488、暗色 #2dd4bf），用於小標、主按鈕、focus ring 與佔位儀表板的強調數字。
md 以上為左 4／右 8 兩欄；窄螢幕裝置框移到標題下方。

可及性

根元素是 section，以 aria-labelledby 指向標題；標題層級由 as 決定。
裝置框是 figure；佔位儀表板標記 aria-hidden，並由 figure 的 aria-label 提供名稱。放入 children 時，語意由你的內容提供，需要時用 frameLabel 補上名稱。
網址膠囊的三圓點、框下陰影與筆電底座都是裝飾，對輔助科技隱藏。
CTA 是 a 或 type="button"，有清楚的 focus-visible 外框。
系統開啟「減少動態效果」時，捲動驅動的傾斜與縮放固定在終態（正面、原尺寸），進場改為 150ms 淡入；進場的媒體查詢在首次繪製即生效。

瀏覽器框主視覺

把這個效果裝進你的專案

本頁目錄