ヒーロー・タイポグラフィ

使い方

src/Component.astro を配置し、ページの先頭で読み込みます。見出しは lines に行ごとの配列で渡します。

<HeroInk
  eyebrow="Atelier — Architecture"
  lines={['建築は、', '森とつながる。']}
  lead="自然と人のあいだに、新しい風景をつくる。"
  cta={{ label: '私たちについて', href: '/about' }}
  caption="静かな場所をつくる"
/>

動きの仕組み

• src/motion.ts の mountHeroInk(root) がGSAPのタイムラインとScrollTriggerを作り、後片付け用の関数を返します。
• マークアップは完成した状態です。動きは「隠れた状態から現在の状態へ」だけを指定しているため、JavaScriptが使えない環境でも内容はすべて表示されます。
• prefers-reduced-motion: reduce のときは何も動かさず、そのまま表示します。設定を途中で変えた場合も gsap.matchMedia が切り替えます。
• ページ遷移の仕組み（View Transitionsなど）を使う場合は、遷移前に返り値の関数を呼んでください。

調整する箇所

• 配色はコンポーネント内の --hero-bg、--hero-ink、--hero-brass で変更できます。
• 文字が立ち上がる間隔は motion.ts の stagger.each、スクロール時の下がり幅は yPercent で調整します。
• 見出しは一文字ずつ分割して表示しますが、読み上げ用に分割前の文章を別に持っています。1行10文字程度までを目安にしてください。

利用条件

ライセンスは未設定です。現在はソースを配布せず、見た目と動きの参考として掲載しています。