スクロールでヒーローの全画面の画像が縮み、画面の中央のカードに収まる

<section class="zoom-hero">
  <div class="zoom-hero__stage">
    <!-- 縮める枠。中の画像は写真でも動画でもよい -->
    <div class="zoom-hero__media">
      <img class="zoom-hero__image" src="/img/hero-dusk.jpg" alt="" width="2560" height="1440">
      <h1 class="zoom-hero__title">ひらけた場所へ</h1>
      <p class="zoom-hero__hint" aria-hidden="true">スクロール ↓</p>
    </div>

    <!-- 縮みきったカードの上下に出る、次の節の文言 -->
    <p class="zoom-hero__eyebrow">Chapter one</p>
    <h2 class="zoom-hero__caption">丘に、光が満ちていく。</h2>
  </div>
</section>

.zoom-hero {
  --ink: #262626;
  --mute: #6b6b6b;
  --on-image: #ffffff; /* 画像の上の見出し */
  --on-image-mute: #dedcd6;
  --card-w: 44vw; /* 縮みきったカードの大きさ */
  --card-h: 56vh;
  --zoom: 110vh; /* 縮みきるまでのスクロール量 */
  --p: 0; /* 縮んだ割合（0〜1）。JS がスクロールに合わせて動かす */
  position: relative;
  height: calc(100svh + var(--zoom));
  background-color: #f2f1ed;
  color: var(--ink);
}

/* 固定する区間。JS が動かないときも、この固定だけは効く */
.zoom-hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* 中央に置いたまま、幅と高さを画面いっぱいからカードの大きさへ縮める。scale と違い、角丸と絵の縦横比が崩れない */
.zoom-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: auto;
  width: calc(100% + (var(--card-w) - 100%) * var(--p));
  height: calc(100% + (var(--card-h) - 100%) * var(--p));
  border-radius: calc(4px * var(--p));
  overflow: hidden;
}

.zoom-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08); /* 少し寄せた所から始め、縮みながら引く */
}

.zoom-hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--on-image);
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.zoom-hero__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--on-image-mute);
}

.zoom-hero__eyebrow,
.zoom-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 24px;
  text-align: center;
}

.zoom-hero__eyebrow { top: 72px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.zoom-hero__caption { bottom: 56px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }

/* 狭い画面では、カードを縦長寄りにする */
@media (max-width: 640px) {
  .zoom-hero { --card-w: 84vw; --card-h: 52vh; }
}

/* 動きを減らす設定では、縮みきったカードの形で止める（JS も縮める動きを作らない） */
@media (prefers-reduced-motion: reduce) {
  .zoom-hero { --p: 1; height: 100svh; }
  .zoom-hero__image { transform: none; }
  .zoom-hero__hint { display: none; }
}

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

document.querySelectorAll(".zoom-hero").forEach((hero) => {
  if (reduceMotion) return; // 縮みきったカードの形は CSS 側で作る
  const next = hero.querySelectorAll(".zoom-hero__eyebrow, .zoom-hero__caption");

  // 文字は opacity だけで隠す。visibility で隠すと、読み上げから外れる
  gsap.set(next, { opacity: 0, y: 24 });
  gsap
    .timeline({
      // 固定は CSS の sticky。セクションの高さ（画面 + 縮める量）を、そのまま縮める区間にする
      scrollTrigger: { trigger: hero, start: "top top", end: "bottom bottom", scrub: true },
    })
    // 枠の幅・高さ・角丸は、この 1 つの変数から CSS の calc() で決まる
    .to(hero, { "--p": 1, duration: 1, ease: "power1.inOut" }, 0)
    .to(hero.querySelector(".zoom-hero__image"), { scale: 1, duration: 1, ease: "power1.inOut" }, 0)
    .to(hero.querySelector(".zoom-hero__title"), { opacity: 0, scale: 0.8, duration: 0.45, ease: "power1.in" }, 0)
    .to(hero.querySelector(".zoom-hero__hint"), { opacity: 0, duration: 0.12, ease: "none" }, 0)
    // 次の節の文言は、縮みきる少し前から浮かべる
    .to(next, { opacity: 1, y: 0, duration: 0.3, ease: "power2.out", stagger: 0.08 }, 0.65);
});