Variable Font Morph

DEMO

<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&display=swap" rel="stylesheet">
<div class="demo-stage vfm-stage">
  <p class="vfm-text">VARIABLE</p>
  <p class="vfm-sub">wght 100 → 900 / wdth 60 → 140</p>
</div>

.vfm-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:3rem 1.5rem; background:#0F0F12; min-height:280px; overflow:hidden; }
.vfm-text {
  font-family:'Roboto Flex','Inter',sans-serif;
  font-size:clamp(2.2rem,11vw,4.5rem); line-height:1; color:#fff;
  font-variation-settings:'wght' 100,'wdth' 60;
  animation: vfm-morph 4.5s cubic-bezier(.65,0,.35,1) infinite alternate;
  will-change: font-variation-settings;
}
@keyframes vfm-morph {
  from { font-variation-settings:'wght' 100,'wdth' 60; color:#7A7A85; }
  to   { font-variation-settings:'wght' 900,'wdth' 140; color:#E91B89; }
}
.vfm-sub { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.12em; color:#5A5A66; }
@media (prefers-reduced-motion: reduce) {
  .vfm-text { animation:none; font-variation-settings:'wght' 700,'wdth' 100; color:#E91B89; }
}

AI PROMPT

可変フォント（variable font）の軸をアニメーションさせて、太さと幅が連続的に変化する見出しを作って。まず可変フォントを軸の範囲付きで読み込む（例: Google Fonts の Roboto Flex を wght@100..1000, wdth@25..151 の範囲指定で読み込む。範囲を指定しないと静的インスタンスしか降ってこず段階的にしか変化しない）。次に @keyframes で font-variation-settings: 'wght' 100, 'wdth' 60 から 'wght' 900, 'wdth' 140 へ変化させる。animation-direction: alternate を付けると往復する。font-weight プロパティでも可変軸は補間されるが、wdth など wght 以外の軸も同時に動かすなら font-variation-settings で一括指定する方が確実。will-change: font-variation-settings を添えると再ラスタライズが安定する。注意点として、可変軸のアニメーションはテキストの再描画を伴うため、大きな見出し1〜2箇所に絞ること。本文全体に掛けると重くなる。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。