3D押し出し文字

Implement the following web visual TECHNIQUE as a small, self-contained demo (single HTML file, inline CSS/JS; GSAP via CDN is allowed if it fits the recipe). Invent your own placeholder content (original text/shapes/colors) — do NOT copy any existing site's content or branding.

## Technique: Extruded 3D Type (3D押し出し文字)

What happens: 文字の輪郭を押し出して厚みと側面を作る。向き・厚み・仕上げを変え、照明による陰影を比較できる

## Implementation recipe (normative)

実演は独自ベクター文字FORMの外周と穴をthree.js Shape/Path→ExtrudeGeometryへ変換。文字高110に対しdepth6〜38、bevel0.9。表面/側面のMeshPhysicalMaterial、暖色キー光・補助光・床の影。向きは8秒周期で±26度、手動では±45度。静止中は要求時だけ描画し、GPU失敗は静止見本と再試行へ。保存HTMLも同じ形状/照明/カメラのソースを使用。日本語など任意の文字は、使用許諾を確認した書体から文言に一致するベクター輪郭を用意する。CSSのtext-shadowは立体形状の代わりにしない。

## Timing values chosen by the user (normative — use these exact values)

- Preserve the recipe-specific motion law, constant speed or interpolation. Do not replace it with a generic easing curve.
- Base duration: 8.00s
- Intensity 2/5: Use restrained amplitudes (8-16px movements, soft easing, no bounce).

## Quality bar

- Runs at 60fps; animate only transform/opacity/filter where possible.
- Make the initial state legible immediately. Preserve the full timing above, including deliberately slow transitions. Repeat only when the recipe calls for a loop; give finite effects a clear ending and replay action.
- Respect prefers-reduced-motion: show a legible resting state without autoplay. Keep every operation available through keyboard and touch; allow deliberate playback of the effect for inspection.
- Difficulty reference: 高. If the recipe mentions specific libraries or shader work, follow it rather than substituting a simpler approach.

## 図鑑で選んだ実演設定（この値を優先）

レシピの標準値より、次の選択値を優先して実装してください。範囲の記述は操作の上限・下限として残します。

- 文字の厚み: 22（文字高110）
- 文字の向き: -20°
- 文字の仕上げ: 陶器

```json
{
  "depth": 22,
  "yaw": -20,
  "finish": "porcelain"
}
```

この設定は自動再生を許可するものではありません。動き軽減時は静止から開始してください。