長スクロール（600vh）の中で 1 つの sticky stage が貼り付き、スクロール位置に応じて
font-size/letter-spacing/font-weight/font-variation-settings（opsz/SOFT/WONK）をリアルタイム補間。架空タイプファウンダリー FOUNDRY ÅNGSTRÖM の新作書体『QUARTZ DISPLAY』プロダクトページに組み込んだ実用デモ。
Live demo: ./index.html
| 項目 | 内容 |
|---|---|
| ジャンル | C · タイポグラフィ |
| 用途 | Sc · スクロール |
| 主な参考 | Apple Mac Pro, Resend, FoundryStandard |
| 依存 | なし（Pure HTML + CSS + Vanilla JS、Google Fonts の Fraunces 可変軸を使用） |
| 推奨配置 | タイプファウンダリー製品ページ／長尺ジャーナルの章送り／製品ストーリーテリング |
セクション全体が 600vh の高さを持ち、内部の .st-stage が position: sticky; top: 0; height: 100vh で貼り付く。スクロールが進むと JS が以下を計算する：
p = (-rect.top) / (rect.height - vh) // 0..1
その p を 4 つのパネル (cover / anatomy / weights / specimen) の data-from / data-to 範囲とマッピングし、各パネルが範囲内で is-on クラス + opacity を持つ（隣接パネル間で smoothstep フェード）。
パネル内部の要素には data-prop-fsize="120,360" のように 「サブ進捗 0→1 での値範囲」 を書く。JS が毎フレーム補間して CSS 変数として書き込み、CSS が font-size: var(--prop-fsize) などで受ける。
| 属性 | 対応する CSS | 例 |
|---|---|---|
data-prop-fsize |
font-size (px) |
"120,360" |
data-prop-tracking |
letter-spacing (1/100em) |
"40,-30" |
data-prop-wght |
font-weight / 'wght' |
"200,920" |
data-prop-opsz |
'opsz' (光学サイズ) |
"14,144" |
data-prop-soft |
'SOFT' (Fraunces) |
"0,72" |
data-prop-wonk |
'WONK' (Fraunces) |
"0,1" |
data-prop-opacity |
opacity |
"0,1" |
data-prop-show |
from/to の間だけ表示、エッジで fade | ".18,.32" |
要素には data-sub-from / data-sub-to を付ければ、パネル進捗の特定の窓だけ反応させられる。
style.css の /* ─── COMPONENT ─── */ ブロックと、script.js の IIFE 全体を移植先へ。<head> に可変フォントの link を追加（Fraunces や Bricolage Grotesque など）。
<section class="scroll-type" data-scroll-type>
<div class="st-stage" data-stage>
<div class="st-panel" data-panel="cover" data-from="0" data-to=".26">
<h2 class="st-cover-title"
data-prop-fsize="120,360"
data-prop-tracking="40,-50"
data-prop-wght="280,920"
data-prop-opsz="14,144"
data-sub-from="0" data-sub-to=".95">QUARTZ</h2>
</div>
<!-- 他のパネル ... -->
</div>
</section>CSS 側で受け取る：
.st-cover-title{
font-family:var(--display);
font-size: var(--prop-fsize, 180px);
letter-spacing: calc(var(--prop-tracking, 0) * .01em);
font-variation-settings:
'opsz' var(--prop-opsz, 144),
'wght' var(--prop-wght, 500);
}| 段 | 範囲 | 内容 |
|---|---|---|
| 01 Cover | 0–26% | QUARTZ 巨大タイトルが scale + tracking 連続変化、kicker / サブ / メタが順に fade-in |
| 02 Anatomy | 24–52% | Q を画面いっぱいに拡大、5 つのヘアライン注釈（BOWL / COUNTER / TAIL / TERMINAL / BASELINE）が順次出現 |
| 03 Weight axis | 50–76% | resonance の文字列が wght 200 → 920 に連続遷移、現在ウェイト名 + ladder ハイライト |
| 04 Specimen + Spec sheet | 74–100% | 詩的プルクオートが scale up、右側に spec card が fade-in |
prefers-reduced-motion: reduce時はパネルをis-on固定、props はサブ進捗 0.5 で固定。連続補間は走らない。- 装飾要素は
aria-hidden、本文部は h2 / blockquote / dl の通常のセマンティクス。
- フォント可変軸を使うため、フォント未ロード時は
font-variation-settingsが無視される。CSS は通常 weight の fallback で動く。 - スクロール進捗は
getBoundingClientRect()を毎フレーム呼ぶため、コンポーネントを多数並べる場合は IntersectionObserver で見えていないものは skip すべき。 data-prop-fsizeは px 固定単位。レスポンシブ性は CSS の clamp と組み合わせる（例：font-size: clamp(2rem, var(--prop-fsize, 180px), 14rem)）。
- v0.1 — 初版。Fraunces 可変軸（opsz/wght/SOFT/WONK）、4 panel、ヘアライン注釈、weight ladder、spec card。
ANIMATION DESIGN STUDY の一部として公開（コピペ自由）。