Squash & Stretch（潰しと伸ばし）

物体は衝撃を受けると潰れ、加速すると伸びます。twelve-principles はこの変形を「体積を保つ scaleX / scaleY の組」として表し、UI では 3〜5% の控えめな弾みとして使えるようにしています。

LIVE

UI (±5%)Cartoon (±30%)jump()

UI (±5%) と Cartoon (±30%) を押し比べて、同じ関数でも強さで印象が変わることを確認してください。jump() は個性の切り替えに追従します。

アニメーションにおける原則

Squash & Stretch は12原則の中でも最も基本的で、最も効果の大きい原則とされています。代表例は弾むボールです。落下中のボールは速度に応じて縦に伸び、地面に当たった瞬間に横へ潰れ、跳ね返ると再び伸びてから丸い形に戻ります。硬いボウリングの球はほとんど変形せず、ゴムボールは大きく変形する、という違いがそのまま「素材の硬さ」と「重さ」として観客に伝わります。

重要なのは 体積を一定に保つ ことです。縦に潰れた分だけ横に膨らまなければ、物体は縮んだり膨らんだりしているように見え、変形ではなく大きさの変化として読まれてしまいます。

この原則はボールに限らず、キャラクターの顔（驚いて目を見開く、笑って頬が持ち上がる）や、筋肉の伸縮にも使われます。速い動きの途中で伸ばすことは、コマ間の飛びを埋めてモーションブラーの代わりにもなります。

UI への翻訳

UI の要素はキャラクターではないため、変形量はずっと小さくします。変形量の目安は次のとおりです。

用途	変形量	例
通常の UI	0.03〜0.05（±3〜5%）	カートのバッジ、通知の着地、ドロップ完了
遊び心のあるブランド	0.08 前後	playful 個性の squash 値
派手な演出	0.12 前後	bouncy 個性の squash 値。祝福やキャンペーンページ
キャラクター・マスコット	0.2 以上	cartoon 個性（0.22）、イラスト、空の状態のキャラクター

UI で効果が高いのは「何かが到着した」「何かが当たった」瞬間です。カートに商品が入ったときのバッジ、ドラッグしたカードがドロップ位置に収まったとき、トーストが画面下端に着地したときなどです。変形は 300ms 程度で完全に元へ戻るため、レイアウトには影響しません。

一方で、テキストが主役の要素（段落、入力欄、テーブル）を潰すと文字まで歪み、読みにくく安っぽく見えます。大きなカードやモーダル全体に使うのも避け、アイコンやバッジ、ボールのような「物体らしい」小さな要素に限定するのが安全です。押下のフィードバックは Squash & Stretch ではなく、pressable の一様な縮小（ガードレールのある Personality では scale 0.95〜0.98）で表現するほうが自然です。

API

deform

function deform(amount: number, axis?: Axis): Pose; // axis 既定 "y"
type Axis = "x" | "y";

体積を保つ変形ポーズを返す基本関数です。axis 方向の倍率を 1 + amount、直交方向の倍率をその逆数にするので、常に scaleX × scaleY = 1 が成り立ちます。

• amount > 0 で axis 方向に伸び、amount < 0 で潰れます。amount = 0 は静止状態（scaleX: 1, scaleY: 1）です。
• amount は -1 より大きい必要があり、それ以下では RangeError を投げます。
• 例: deform(-0.05) は scaleX ≈ 1.0526、scaleY = 0.95。deform(0.3, "x") は scaleX = 1.3、scaleY ≈ 0.769。

戻り値は scaleX / scaleY だけを持つ Pose なので、x / y / scale など他のキーとスプレッドで合成できます（scale とは CSS 上で乗算されます）。

squash / stretch

function squash(amount?: number, axis?: Axis): Pose;  // amount 既定 0.05、axis 既定 "y"
function stretch(amount?: number, axis?: Axis): Pose; // amount 既定 0.05、axis 既定 "y"

deform の読みやすい別名です。squash は deform(-|amount|, axis)、stretch は deform(|amount|, axis) を返すため、amount の符号は無視されます。

squashStretch

function squashStretch(options?: ImpactOptions): MotionSpec;

衝突の反応を1本のモーションとして返します。接地 → 潰れ → 反発して伸びる → 小さく潰れる → 静止、の順に、反発のたびにエネルギーが減衰していくので、重さとして読まれます。

オプション	型	既定値	説明
intensity	number	0.05	最大の変形量。UI は 0.03〜0.05、キャラクターは 0.2 以上が目安。
axis	"x" | "y"	"y"	衝撃の方向（力が進んできた軸）。
duration	number	300	尺（ms）。
origin	string	axis が "y" なら "50% 100%"、"x" なら "0% 50%"	transform-origin。物体が面に接する点。既定は下端（y）/ 左端（x）。

生成されるキーフレームは次のとおりです（intensity = 0.05、axis = "y" の場合）。

offset	ポーズ	次区間のイージング
0	静止（deform(0)）	easings.out
0.25	squash(intensity) = scaleY 0.95	easings.inOut
0.55	stretch(intensity × 0.5) = scaleY 1.025	easings.inOut
0.8	squash(intensity × 0.15) = scaleY 0.9925	easings.inOut
1	静止	—

origin が重要な理由

transform-origin が中央のままだと、潰れたときに要素の下端が床から浮き上がり、「床に当たって潰れた」ではなく「宙で縮んだ」ように見えます。squashStretch が既定で下端（"50% 100%"）を原点にするのはこのためです。右側の壁に当たる横方向の衝突なら origin: "100% 50%" を指定してください。

使用例

Vanilla

カートに商品を追加したとき、バッジを弾ませます。バッジは床に接していないので、原点は中央にします。

import { play, squashStretch } from "twelve-principles";

const badge = document.querySelector<HTMLElement>(".cart-badge")!;

export function setCartCount(count: number) {
  badge.textContent = String(count);
  play(badge, squashStretch({ intensity: 0.08, duration: 250, origin: "50% 50%" }));
}

キーポーズを自分で組む場合は、deform / squash / stretch を poseToPose のフレームに展開します。右へ素早く移動して壁で止まるチップの例です。移動中は進行方向に伸び、到着で潰れます。

import { deform, play, poseToPose, squash, stretch } from "twelve-principles";

const chip = document.querySelector<HTMLElement>(".chip")!;

play(
  chip,
  poseToPose(
    [
      { x: 0, ...deform(0, "x") },
      { x: 160, ...stretch(0.1, "x"), offset: 0.55 },
      { x: 240, ...squash(0.06, "x"), offset: 0.8 },
      { x: 240, ...deform(0, "x") },
    ],
    { duration: 300, origin: "100% 50%" },
  ),
);

React

useMotion の play には、個性（Personality）を受け取って spec を返す関数を渡せます。MotionProvider の個性に合わせて変形量が変わります（natural は 0.04、playful は 0.08）。

import { useEffect, useRef } from "react";
import { squashStretch } from "twelve-principles";
import { useMotion } from "twelve-principles/react";

export function CartBadge({ count }: { count: number }) {
  const { ref, play } = useMotion<HTMLSpanElement>();
  const previous = useRef(count);

  useEffect(() => {
    if (count > previous.current) {
      play((p) => squashStretch({ intensity: Math.max(p.squash, 0.03), origin: "50% 50%" }));
    }
    previous.current = count;
  }, [count, play]);

  return (
    <span ref={ref} className="cart-badge" aria-live="polite">
      {count}
    </span>
  );
}

注意を引くための「跳ねる」動きなら、Anticipation と Squash & Stretch をまとめた jump レシピが使えます。

import { jump } from "twelve-principles";
import { useMotion } from "twelve-principles/react";

export function Mascot() {
  const { ref, play } = useMotion<HTMLSpanElement>();
  return (
    <button type="button" onClick={() => play((p) => jump({ personality: p }))}>
      <span ref={ref} className="mascot" aria-hidden="true" />
      話しかける
    </button>
  );
}

ガイドラインと落とし穴

UI は ±5% 以内

squashStretch の既定値 0.05 は、UI で使える変形量の上限の目安です（ソース上のコメントでも UI は 0.03〜0.05、キャラクターは 0.2 以上とされています）。まず既定値で試し、物足りなければ exaggerate で倍率を上げるか、個性の squash 値を使ってください。キャラクターのような大きな変形が必要な一度きりの演出には、派手な動き の rubberBand や fallIn が使えます。

インライン要素は変形しない

CSS の transform は display: inline の要素には効きません。上の例の .cart-badge や .mascot のように <span> を使う場合は、CSS で display: inline-block などを指定してください。

体積保存を崩さない

scaleX と scaleY を別々に手書きすると、潰れと膨らみの釣り合いが崩れやすくなります。変形は必ず deform / squash / stretch から作り、他のキーとはスプレッドで合成してください。

文字を含む要素に使わない

変形は要素全体にかかるため、テキストも同じ比率で歪みます。本文や入力欄を含むカードではなく、アイコン・バッジ・イラストなど形そのものが意味を持つ要素に限定してください。

transform はライブラリが所有する

アニメーション対象の要素では transform / transform-origin をライブラリが書き換えます。CSS 側で transform: translate(-50%, -50%) などを使って配置している要素は、ラッパー要素を挟んで内側を変形させてください。

deform の範囲

deform(amount) は amount > -1 が必要です。動的に計算した値（速度など）を渡すときは、デモの straightAhead の例のように Math.min(speed / 6000, 0.2) のような上限を設けてください。

組み合わせ

• Anticipation — 跳ぶ前にしゃがむ「溜め」は、それ自体が潰れの形です。jump レシピはしゃがみ（squash）→ 離陸（stretch）→ 着地（squash）を1本にまとめています。
• Straight Ahead & Pose to Pose — poseToPose のフレームに deform を展開すれば、任意の位置で伸び縮みさせられます。物理シミュレーションなら straightAhead の draw 関数の中で速度から変形量を計算します。
• Follow Through & Overlapping Action — squashStretch の反発は、減衰していく follow through の一種です。
• Exaggeration — exaggerate(squashStretch(), 2) で変形量だけを2倍にできます。
• Appeal — 個性の squash 値（natural 0.04、snappy 0.03、calm 0.02、playful 0.08、bouncy 0.12、cartoon 0.22）で、プロダクト全体の柔らかさを一か所で決められます。
• 派手な動き — rubberBand は体積を保ったまま大きく伸び縮みを繰り返し、fallIn は落下の速度で伸びて着地で潰れます。変形量は rubberBand が exaggeration に、fallIn が個性の squash に比例します。
• レシピ — jump の詳細。

参考

• Tips for Mastering the 12 Principles of Animation — CLIP STUDIO
• Understanding the 12 principles of animation — Pluralsight
• Principles of animation — Adobe
• The 12 Principles of Animation (YouTube)