# 鼻が伸びる — Style Reference
> 明るい紙の上で、うそのスライダーに合わせて可変フォントの見出しと木の人形の鼻が伸びる

**Theme:** light  **Series:** FABLE 006  **World:** ピノキオ(コッローディ)。糸で吊られた木の人形。うそをつくと鼻が伸びる。

## Concept
左に見出しとスライダー、右に糸で吊られた木の操り人形。スライダー「うそ」を 0 → 100 に動かすと、見出しの太さ(M PLUS 1 の wght 100 → 900)と字間が増えて文字どおり長くなり、鼻の長さの数字(Roboto Flex の wdth 25 → 151)が横に広がり、人形の鼻(円錐)が 1.9 単位まで伸びる。読み込み時は 42 から始まり、1.6 秒で 78 まで自動で動くので、静止画でも伸びた状態が写る。人形の顔には目・眉・口を彫り込んである。人形は糸の物理で常に揺れ、ポインタで操作棒が傾く。色は紙と木と黒だけで進め、赤は帽子とスライダーのつまみと小さな見出し印、青は人形の半ズボンだけ。

## Signature Technique
1. 可変フォント: `font-variation-settings` を JS から毎フレーム書く。見出し `"wght" 100+800l`、`letter-spacing: .02em + .2em × l`(mobile は .16em)。鼻の数字 `"wdth" 25+126l, "wght" 300+600l`。01 区画は同じ軸をスクロール進捗 `q = (0.9H − top) / (height + 0.4H)` で動かす
2. 操り人形(Verlet): 点 14 個(頭・首・肩×2・腰×2・肘×2・手×2・膝×2・足×2)を距離拘束 21 本で結ぶ(胴体は X 型の筋交い付き)。糸は操作棒(十字の棒。`x = .32 sin(.45t) + .5 ptrX`、`rz = .09 sin(.7t)`、`ry = .35 sin(.3t)`)の 5 点から 6〜9 分割のロープで頭・両手・両膝へ。重力 −7、減衰 .985、反復 8、床 y = .12。ロープの最上点は棒のアンカーへ「長さを超えたら引き戻す」片側拘束
3. 描画(three.js 0.170): 各肢は単位円柱を関節間に置き `quaternion.setFromUnitVectors(up, dir)`、`scale.y = 長さ`。頭はグループ(箱・目・口・帽子・鼻)で、首→頭の向きを up にして `rotateY(1.0)` で顔を右前へ向け、鼻は +z 円錐の `scale.z = .08 + 1.9l`。糸は `THREE.Line` の BufferGeometry を毎フレーム更新
4. 木目シェーダー(ShaderMaterial、オブジェクト空間): `r = |p.xz × (1,.8)| + fbm(p × 2.2) × .22 + .05 p.y`、`ring = fract(4.5r)`、`band = smoothstep(0,.5,ring) × (1 − smoothstep(.6,1,ring))`、色は `mix(#A9743F, #E6BF80, .85 band + .08) − 細ノイズ .06`。照明は半球 `.55 + .3 n.y` + キー `max(n·L,0) × .65` + リム `(1 − n·V)³ × .18` + スペキュラ 28 乗 × .22。各パーツに別 seed。03 区画の 2D パネルは同じ関数を生 WebGL で描く
5. 02 区画: Canvas2D の Verlet ロープ 11 本(mobile 6 本)、16 分割、風 `14 sin(.8t + φ) + 4 sin(2.3t + 2φ)` を下端ほど強く、ポインタ速度を突風(`exp(−d²/22000) × exp(−Δt/600ms)`)として足す。先端に木の玉・棒・箱(年輪や筋は arc / line で描く)
6. 解像度: three は dpr ≤ 2(mobile 1.5、antialias off)、2D は dpr ≤ 2(mobile 1.5)、木パネルは mobile 0.7 倍。rAF 1 本、hero は画面外で止める

- 顔: 目は彫り込み(暗褐色の円盤+木の縁リング+黒目と白い点)、眉は斜めの溝、口は弧のトーラスを半分沈めた溝。

- 03 の木目パネル: 同じ年輪式を柾目の板として拡大(年輪 ×5.2)し、晩材の細い濃線、長い繊維(y 方向に引き伸ばしたノイズ 170 / 55)、導管の点(hash の閾値 .955)、斜めにゆっくり流れるニスの照り(ガウス帯、強さ .09)を重ねる。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #F1EFE8 | 地色 |
| --paper-2 | #E7E3D8 | パネル面 |
| --ink | #1C1A17 | 文字、糸、スライダーの線 |
| --mute | #6F6A60 | ラベル、注記、Latin 見本 |
| --hair | rgba(28,26,23,.14) | 罫線 |
| --red | #E03A2E | 帽子とつまみと見出しの印。hover にも使う。4 か所まで |
| --wood | #D9B47E | 木の明部(シェーダー #E6BF80 相当) |
| --wood-d | #9C6B3A | 木の暗部(シェーダー #A9743F 相当) |
| blue | #2A4FD6 | 半ズボン。人形の中だけ |

## Typography
- 見出し・本文: M PLUS 1(可変 wght 100–900)。h1 `clamp(34px, 6.4vw, 96px)` / line-height 1.12、初期 wght 100、うそで 900 まで。h2 700 `clamp(26px, 3.2vw, 44px)`(2 カラム内 `clamp(24px, 2.5vw, 36px)`)。見出しの改行は `<br>` で固定
- 数字・Latin 見本: Roboto Flex(可変 wdth 25–151 / wght 100–1000)。鼻の長さ `clamp(18px, 2vw, 28px)`、見本 `clamp(30px, 7vw, 120px)`
- ラベル: DM Mono 11.5px、tracking .22em、uppercase
- lead `clamp(16px, 1.25vw, 19px)` / line-height 1.85 / 色 #3E3A33
- `font-feature-settings: "palt"`

## Spacing & Layout
- 基本単位 8px。区画の縦余白 `clamp(96px, 16vh, 180px)`、締め `clamp(120px, 22vh, 240px)`
- gutter `clamp(20px, 4vw, 56px)`、最大幅 1240px。grid 5fr / 7fr、gap `clamp(32px, 6vw, 96px)`、860px 以下で 1 カラム
- hero 100svh(最小 600px)。下 11vh は木の床(wood.webp、720px タイル)。カメラ: desktop は人形を右 2/3 に(`camera.x = −1.55`)、mobile は中央で小さめ(`z = 13, lookAt y = 2.66`、操作棒が見出しの下に来る)
- 02 区画 88vh(最小 520px)。パネル 4:3、radius 8px、hairline 枠
- breakpoints: 860px(grid)、640px(字間の上限、ヒント非表示)

## Motion
- 自走: 人形の揺れ(操作棒の sin 合成)、02 の風、03 の木目の z ドリフト(.05/s)。文字の変化はすべてスライダーかスクロールに従属
- 起動: うそ 42 から始め、0.2s 後から 1.6s かけて cubic-out で 78 まで。読み込み直後の静止画でも太字と長い鼻が見える。スライダーに触れた時点で自動は止まる
- うその追従: `lie += (target − lie) × (1 − .002^dt)`
- ポインタ: hero では操作棒が x に ±.5、傾き ±.12 追従。02 では速度が突風になる
- reduced-motion: 人形は 240 ステップ先に計算した静止姿勢で止め、うそは 65 固定、02 のロープは初期 90 ステップで静止、木目は 1 回だけ描く。スライダー操作は残す
- WebGL 不可: canvas を外し、代替文を 1 行出す。見出しと数字の可変は動く

## Components
- hero: 見出し(h1)、鼻の長さ(数字 + mono ラベル)、スライダー(2px の線、22px 赤丸つまみ、mono の値)、右に人形。下に木の床。左下にヒント
- section 01: 見出し + 本文、右に mono 表(jp / latin / drive / css)、下に見本 2 行と軸の現在値(赤)
- section 02: 上端に 6px の黒い梁、ロープ 11 本、左下に見出しと 1 文、右下に操作の 1 行
- section 03: 見出し + 本文 + mono 表、右に木目パネル(左下に紙色のタグ)
- button: pill、ink 塗り、hover で赤。focus-visible は赤 2px outline
- footer: hairline の上に mono 11px `VALE / FABLE 006` と作品名

## Do / Don't
Do
- 伸びるのは文字の軸と鼻だけ。他の要素の大きさは変えない
- 赤は 4 か所まで。面で使わず点と線で使う
- 木目はオブジェクト空間で計算し、肢の向きに沿わせる
- 糸は 1px 前後の線のまま。太くしない
- 見出しは `<br>` で 2 行に固定し、字間が増えても 3 行にしない

Don't
- 画像を transform で引き伸ばして「伸びた」ことにしない
- 人形に影や床の反射を足さない(紙の上の立体で十分)
- 背景に格子や飾りを置かない
- 本文を 2 文より増やさない
- 人形の顔を正面に向けない(鼻の長さが読めなくなる)

## References
- Heart Aerospace(monumental type drifting through gradient skies): 「文字が主語、写真が環境、余白が贅沢」という配分を、文字が主語・3D の人形が環境・紙の余白、に置き換えた。156px の巨大見出しの考えは、サイズでなく可変軸の変化で視線を取る形に変え、空のグラデーションは捨てて平らな紙にした
- Visual(warm editorial zine): クリーム紙 + mono の欄外注記 + 黄色 1 色の印、という骨格から「紙・mono・1 色の印」を抜き出し、紙は #F1EFE8、印は赤 #E03A2E の 14×5px のバーに変えた。高コントラストのセリフは使わず、可変ゴシック(M PLUS 1 / Roboto Flex)で階層を作る