PG09▸📐 Layout · 版型▸Hero

Hero Scroll Reveal

Apple 產品頁滾動

難度 ★★★★★標籤 apple · scroll · scale2 min read

模式簡述

Hero Scroll Reveal：捲動時 mockup 從傾斜縮小變成正面放大。Aceternity UI、Apple 產品頁愛用。視覺爆點。

展示你的
下一個產品。

product mockup

scroll progress: 0%

▸ 起始|未滾動 — 圖片小且傾斜

Claude Code Prompt

💬 Claude Code Prompt

參考：PG09 hero-scroll
組件：HeroScroll.tsx

Hero Scroll Reveal：捲動時 mockup 從傾斜縮小變成正面放大。Aceternity UI、Apple 產品頁愛用。視覺爆點。

限制：
- rotateX 太大
- scroll progress 沒平滑
- 沒 fallback for reduced-motion

完整程式碼

HeroScroll.tsx

"use client";
import { useEffect, useState } from "react";

type State = "start" | "mid" | "end";

export function HeroScroll({ state = "start" }: { state?: State }) {
const t = state === "mid" ? 0.5 : state === "end" ? 1 : 0;
const [progress, setProgress] = useState(t);
useEffect(() => setProgress(t), [t]);

const scale = 0.7 + progress * 0.3;
const rotateX = (1 - progress) * 25;
const translateY = (1 - progress) * -20;

return (
  <div className="w-full max-w-2xl">
    <div className="grid place-items-center">
      <h3 className="text-center text-2xl font-medium tracking-tight">
        展示你的<br />
        <span className="text-lab-accent">下一個產品。</span>
      </h3>
    </div>
    <div
      className="mt-6 perspective-[800px]"
      style={{ perspective: "800px" }}
    >
      <div
        className="rounded-xl border border-border bg-background/30 p-2 shadow-xl transition-all duration-500"
        style={{
          transform: `scale(${scale}) rotateX(${rotateX}deg) translateY(${translateY}px)`,
          transformStyle: "preserve-3d",
        }}
      >
        <div className="aspect-[16/10] overflow-hidden rounded-lg bg-gradient-to-br from-lab-accent via-purple-500 to-blue-600">
          <div className="grid h-full place-items-center">
            <span className="font-mono text-sm text-white/80">product mockup</span>
          </div>
        </div>
      </div>
    </div>
    <p className="mt-3 text-center font-mono text-[10px] text-muted-foreground">
      scroll progress: {Math.round(progress * 100)}%
    </p>
  </div>
);
}

何時用

✅ 產品 mockup 展示
✅ 高質感 brand 首頁
✅ 新品 launch 頁

何時別用

❌ 後台、工具型（不適合）
❌ 效能敏感的網站（GPU 開銷）
❌ 資訊型內容（喧賓奪主）

我踩過的坑

rotateX 太大：35deg 顯瘦，但內容讀不清。25deg 剛好。
scroll progress 沒平滑：用 useScroll + useTransform，不要手動 throttle。
沒 fallback for reduced-motion：直接顯示完整狀態，不做動畫。