宇宙ワープ・ヒーロー

使い方

src/ フォルダ一式（SpaceWarpHero.astro、PlanetLogo.astro、motion.ts、starfield.ts）を配置し、ページの先頭で読み込みます。依存パッケージは gsap と three です。

pnpm add gsap three
pnpm add -D @types/three

---
import SpaceWarpHero from '../components/space-warp-hero/SpaceWarpHero.astro';
---
<SpaceWarpHero heading="サイト名">
  <!-- ロゴが散ったあと、深宇宙の上に現れる次セクション（1画面に収まる量） -->
  <h2>星の向こうへ</h2>
  <a href="/about">私たちについて</a>
</SpaceWarpHero>

ロゴを省略すると、見本の惑星ロゴ「NOVA / SPACE LAB」（25パーツ）が表示されます。自分のロゴは slot="logo" で渡します。

<SpaceWarpHero heading="サイト名">
  <svg slot="logo" viewBox="0 0 400 400" role="img" aria-label="サイト名">
    <g data-swh-part data-cx="120" data-cy="200" data-swh-delay="0">…</g>
    <g data-swh-part data-cx="280" data-cy="200" data-swh-delay="0.05">…</g>
  </svg>
  …
</SpaceWarpHero>

• data-swh-part を付けた要素が1つずつ星屑として散ります。data-cx・data-cy はパーツの中心（viewBoxの座標）、data-swh-delay は散り始めの遅れ（0〜0.1程度）です。中心を省くと getBBox() から求めます。
• パーツが1つもないロゴ（画像やテキストなど）は、ロゴ全体がにじみながら上へ吸い上げられて消えます。
• 見本ロゴの登場・浮遊・ポインタの風で揺れる動きは見本ロゴ専用です。

主な props

| 名前 | 既定値 | 内容 | | --- | --- | --- | | heading | なし | 読み上げ専用の見出し（h1）。ロゴだけのヒーローに付けてください | | logoLabel | 見本ロゴ名 | 見本ロゴの読み上げ名 | | scrollLength | 150 | 画面を固定してスクロールさせる長さ（画面の高さに対する%） | | space | true | false で深宇宙への暗転と Three.js を使わない | | background / ink / starlight | #fbfbf9 / #1a1a1a / #f4f1ea | ヒーローの背景、ロゴと墨色の星屑、深宇宙の上の文字色 |

次セクションが表示された瞬間に、次セクションの要素で space-warp:next-reveal イベントが1回だけ発生します。中身に自前の登場演出を付けるときの合図に使えます。

動きの仕組み

• motion.ts の mountSpaceWarpHero(root) が GSAP の ScrollTrigger でヒーローを固定（pin）し、スクロール量に合わせてタイムラインを進めます。後片付け用の関数を返します。

1. 0〜1.0: パーツがロゴの中心から外向き・やや上向きに飛び、回転・縮小しながら消えます。コンテナ全体に軽いぼかしがかかります。
2. 0.92〜1.37: 背景が深宇宙のグラデーションに暗転し、Three.js の星空が前方へ流れ始めます。流れ星はこのあいだだけ現れます。
3. 1.08〜1.58: 次セクションが下から浮かび上がります。

• 手を離すと「ロゴ」か「次セクション」の近い方へ吸着します。逆にスクロールすると逆再生されます。
• starfield.ts は Three.js の WebGPURenderer で星空を描きます。WebGPU が使えない・描画に失敗するブラウザでは WebGL2 に切り替え、それも失敗した場合はグラデーションだけで表示します。Three.js は暗転が必要になる環境でだけ遅れて読み込まれます。
• 星空の描画、浮遊アニメ、流れ星は、ヒーローが画面外にあるときやタブが非表示のときは止まります。pagehide（bfcacheに入らない場合）ですべてのアニメーション、ScrollTrigger、イベント、GPU資源を解放します。ページ遷移の仕組み（View Transitionsなど）を使う場合も、遷移前に返り値の関数を呼んでください。
• JavaScriptが使えない環境や prefers-reduced-motion: reduce のときは何も動かさず、完成したロゴの下に次セクションを通常の流れで並べます。Three.js も読み込みません。設定を途中で変えた場合は gsap.matchMedia が切り替えます。
• 同じページに複数置けます。SVGの id は個別に作られ、CSSはコンポーネント内に閉じています。

調整する箇所

• 散り方: motion.ts の飛散距離（350〜850）、上向きの偏り（200〜500）、回転（±150）。
• 暗転と次セクションの時刻: タイムライン位置の 0.92 と 1.08。
• 星空: starfield.ts 冒頭の定数（星の数 STAR_COUNT、速さ WARP_SPEED、画面端の伸び STREAK_MAX など）。setTurn(-1〜1) で左右へ曲がる表現もできます。
• 次セクションはヒーローの上に重ねて表示します。1画面に収まる量にしてください。
• ScrollTrigger.config({ ignoreMobileResize: true }) はページ全体の GSAP 設定です。モバイルのアドレスバーの出し入れで固定位置がずれるのを防ぐために設定しています。

出典とライセンス

• 元のソース: GOUKI-Main/wadokaichuu-new（コミット 5bba382e15e01aa61bb4e0016e26d1a5926eacbe）の src/components/Hero.astro、src/components/AnimatedLogo.astro、src/components/SpaceBackground.astro、src/scripts/starfield.ts。
• ライセンスは元のリポジトリと同じ MIT です。LICENSE に原文を同梱しています。
• 主な変更: Tailwind のクラスを通常のCSSに置き換え、is:global のスタイルをコンポーネント内に限定しました。ページに1つだけ置く前提の処理をルート要素ごとに分け、後片付けと画面外での停止を加えました。会社サイト固有のリンク・ヘッダー・次セクションの中身を外し、ロゴと次セクションを差し替えられるようにしました。描画とタイミングの値は元のままです。元のロゴは使わず、見本ロゴを新しく描き直しました。
• 見本の惑星ロゴ「NOVA / SPACE LAB」は、このカタログ用に描いた架空のロゴです。実在の団体・サービスとは関係ありません。自分のサイトでは、自分のロゴに差し替えて使ってください。