← ANIMATION · INDEX SCROLL TYPE
FOUNDRY ÅNGSTRÖM · presents

QUARTZ
DISPLAY.

スクロール位置に応じて font-size / letter-spacing / font-weight / opsz をリアルタイムで連続変化させる scroll-driven typography。下にスクロールすると、書体『QUARTZ』の 表紙 → グリフ解剖 → ウェイト軸 → 仕様書 が 1 つの sticky stage の中で展開する。

SCROLL ↓
FOUNDRY ÅNGSTRÖM · QUARTZ VOL.01 · 2026
00%
QUARTZ DISPLAY · v1.0.4

QUARTZ

Designed for the moment after the word ends.

  • WEIGHTS200–920
  • OPSZ9–144
  • GLYPHS28,412
  • LANGSJA · EN · zh · ko · ar
02 — GLYPH ANATOMY
Q
03 — WEIGHT AXIS · 200 → 920

resonance

THIN 200
04 — SPECIMEN & SPEC SHEET
The letters do not arrive, they emerge — slowly, then all at once.
SCROLL TO MORPH ↓
FOUNDRY ÅNGSTRÖM — Stockholm / Tokyo — est. 2018 TYPESET IN QUARTZ DISPLAY (variable, opsz 14–144)

使い方

— USAGE

↑ 想定：タイプファウンダリーの新作プロダクトページ／長尺ジャーナルの章送り／製品ストーリーテリング。スクロールするだけで 同じ文字列が呼吸し、形を変える体験を作る。

01

2 ファイルをコピー

style.css の /* ─── COMPONENT ─── */ ブロックと、script.js の IIFE 全体を移植先へ。可変フォントが必要（Fraunces / Recursive / Bricolage 等）。

02

data-scroll-type で宣言

ルートに data-scroll-type、内部に data-panel（各章）。要素に data-prop-fsize="20,180" / data-prop-wght="300,900" 等で「サブ進捗 0→1 での値範囲」を書けば、スクロールで連続補間される。

03

data-from / data-to

各 data-panel は section 全体の進捗 (0–1) に対する出現範囲を持つ。要素レベルで data-sub-from / data-sub-to を書けば、パネル内のサブタイミングを細かく制御できる。

サポートされる prop

data-prop-fsizefont-size（px）"20,180"
data-prop-trackingletter-spacing（1/100em 単位）"40,-30"
data-prop-wghtfont-weight / variation wght"200,920"
data-prop-opszvariation opsz（光学サイズ）"14,144"
data-prop-softvariation SOFT（Fraunces）"0,72"
data-prop-wonkvariation WONK（Fraunces）"0,1"
data-prop-opacityopacity（0–1）"0,1"
data-prop-showshow range（from,to の間だけ表示）".18,.32"

アクセシビリティ