膠片帶主視覺｜免費 React 元件

標題下方一條帶齒孔的膠片帶無限橫捲，捲動頁面越快膠片跑得越快，hover 單格放大。

適合攝影、影像、活動與作品集首頁的英雄區塊：上方左對齊的標題、說明與 CTA，下方一條貼齊區塊底部、延伸到兩側的深色膠片帶，上下兩排齒孔、中間一格格 3:2 畫面，左下角印著 01A、02A 這樣的邊碼。膠片以固定速度無限橫捲，頁面捲得越快它跑得越快，向上捲時倒轉；滑鼠停在任一格上，該格放大、其餘變暗，膠片以彈簧過渡減速到 20%。沒有給圖片時，每格會畫暖色漸層與幾何場景佔位。

把這個效果裝進你的專案

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

npx webberui@latest add film-strip-hero

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

Playground

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

膠片速度（px/s）speed

行進方向direction

捲動加速velocityBoost

進場時長（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">

編輯中的呼叫預設屬性

<FilmStripHero/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/film-strip-hero.json

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

使用

import { FilmStripHero } from "@/components/ui/film-strip-hero";

<FilmStripHero
  eyebrow="沙洲影像社 · 2026 春季影展"
  title="一卷底片，二十四格日常"
  subtitle="八位街頭攝影師的年度作品在此連映。"
  primaryAction={{ label: "預約觀展", href: "/tickets" }}
  secondaryAction={{ label: "看片單", href: "/lineup" }}
  frames={[
    { src: "/photos/harbor.jpg", alt: "清晨的漁港" },
    { src: "/photos/market.jpg", alt: "黃昏市場的攤位" },
    { src: "/photos/alley.jpg", alt: "雨後的老街巷弄" },
  ]}
  speed={48}
/>

放在巢狀捲動容器內

預設追蹤的是視窗的捲動。若元件放在固定高度的 overflow-y-auto 容器內，請把該容器的 ref 傳給 container。velocityBoost 的加速倍率取自該容器的捲動速度，而不是視窗。

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

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

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

Props

Prop	型別	預設值	說明
`title`	`ReactNode`	—	主標題（必填）
`eyebrow`	`ReactNode`	—	標題上方的小標，使用強調色
`subtitle`	`ReactNode`	—	標題下方的說明文字
`primaryAction`	`FilmStripHeroAction`	—	主要行動按鈕，背景使用強調色
`secondaryAction`	`FilmStripHeroAction`	—	次要行動按鈕，外框樣式
`as`	`"h1" \| "h2"`	`"h1"`	標題層級
`minHeight`	`number`	`560`	區塊最小高度（px），膠片帶貼齊底部
`frames`	`FilmStripHeroFrame[]`	8 格佔位場景	膠片畫面；格數少於 10 時會重複填滿一份內容
`speed`	`number`	`40`（讀 `--wb-film-strip-hero-speed`）	基礎速度（px/s）；省略時讀 CSS 變數
`direction`	`"left" \| "right"`	`"left"`	膠片行進方向
`velocityBoost`	`boolean`	`true`	依頁面捲動速度加速（最多額外 4 倍），向上捲時倒轉
`framesLabel`	`string`	`"膠片影格"`	sr-only 影格清單的無障礙名稱
`container`	`RefObject<HTMLElement>`	—	巢狀捲動容器的 ref；滾動速度也取自該容器，省略則以視窗為捲動容器
`className`	`string`	—	併入根 `section`

FilmStripHeroFrame

欄位	型別	預設值	說明
`src`	`string`	—	圖片網址；省略則畫暖色漸層 + 幾何場景佔位
`alt`	`string`	—	替代文字；有給時另以 sr-only 清單呈現
`code`	`string`	`"01A"`、`"02A"`…	左下角邊碼

FilmStripHeroAction

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

CSS 變數

變數	預設值	說明
`--wb-film-strip-hero-speed`	`40`	基礎速度（px/s，傳 `speed` prop 時會被覆寫）
`--wb-film-strip-hero-duration`	`600ms`	標題、說明、CTA 與膠片帶的進場時長（stagger 80ms）
`--wb-film-strip-hero-accent`	`#0d9488`（dark `#2dd4bf`）	小標與主按鈕的強調色
`--wb-hfs-hole`	`#ffffff`（dark `#0a0a0a`）	齒孔顏色；放在非白底上時改成該底色，齒孔才像打穿

細節

位移以 useAnimationFrame 逐幀累加，內容複製一份，位移在「負一份寬度～0」之間循環；每格寬度加間距都是 24px 的倍數，齒孔在接縫處也對得上。
捲動速度經 useScroll → useVelocity → useSpring（stiffness 400、damping 50）平滑後，映射成 0–4 的額外倍率；向上捲讓膠片倒轉，直到再次向下捲。
hover 時該格放大 1.06、其餘格降到 60% 不透明（200ms），整條膠片以彈簧過渡減速到 20%，不是瞬間停下。
膠片帶離開視窗時停止更新位移；CSS 變數每 500ms 重讀一次，在 Theme Studio 或全域樣式改速度會即時生效。

可及性

根元素是 section，以 aria-labelledby 指向標題；標題層級可用 as 切換為 h2，避免頁面出現多個 h1
膠片帶是裝飾，整條 aria-hidden；frames 有 alt 時，另以 sr-only 清單把影格說明提供給螢幕閱讀器
鍵盤聚焦到區塊內的 CTA 時（focus-within），膠片同樣減速到 20%
CTA 是 a 或 type="button"，帶 focus-visible 外框
使用者系統開啟「減少動態效果」時，膠片停止橫捲、呈現靜態構圖，捲動加速與 hover 放大停用，進場改為 150ms 淡入

膠片帶主視覺

把這個效果裝進你的專案

本頁目錄