{
 "version": "1.3ecb2619b4",
 "site": "https://showheyohtaki.github.io/motion-prompt/",
 "repo": "https://github.com/showheyohtaki/motion-prompt",
 "count": 120,
 "packs": [
  {
   "pack": "motion",
   "order": 1,
   "title": {
    "ja": "モーショングラフィックスの動き",
    "en": "Motion graphics moves"
   },
   "langs": [
    "en",
    "ja"
   ],
   "categories": [
    {
     "slug": "entrances-text",
     "ja": "登場・文字の演出",
     "en": "Entrances & text"
    },
    {
     "slug": "motion-polish",
     "ja": "動きの味付け",
     "en": "Motion polish"
    },
    {
     "slug": "transitions-highlights",
     "ja": "切り替え・見せ場",
     "en": "Transitions & highlights"
    }
   ],
   "count": 24,
   "first": "001",
   "last": "024",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "fonts": [],
   "scalable": false
  },
  {
   "pack": "camera",
   "order": 2,
   "title": {
    "ja": "カメラワークと切り替え",
    "en": "Camera moves & transitions"
   },
   "langs": [
    "en",
    "ja"
   ],
   "categories": [
    {
     "slug": "camera-movement",
     "ja": "カメラの動き",
     "en": "Camera Movement"
    },
    {
     "slug": "shooting-style-time",
     "ja": "撮り方・時間の演出",
     "en": "Shooting Style & Time"
    },
    {
     "slug": "transitions",
     "ja": "切り替え（トランジション）",
     "en": "Transitions"
    }
   ],
   "count": 24,
   "first": "025",
   "last": "048",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "fonts": [],
   "scalable": false
  },
  {
   "pack": "ui",
   "order": 3,
   "title": {
    "ja": "UIパーツの名前",
    "en": "UI component names"
   },
   "langs": [
    "en",
    "ja"
   ],
   "categories": [
    {
     "slug": "open-overlay",
     "ja": "開く・重なるパーツ",
     "en": "Opening & overlays"
    },
    {
     "slug": "select-switch",
     "ja": "選ぶ・切り替えるパーツ",
     "en": "Choosing & switching"
    },
    {
     "slug": "navigate-status",
     "ja": "案内する・状態を伝えるパーツ",
     "en": "Navigation & status"
    }
   ],
   "count": 24,
   "first": "049",
   "last": "072",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "fonts": [],
   "scalable": true
  },
  {
   "pack": "lp",
   "order": 4,
   "title": {
    "ja": "LP・Webサイトの演出",
    "en": "Landing page & web effects"
   },
   "langs": [
    "en",
    "ja"
   ],
   "categories": [
    {
     "slug": "scroll",
     "ja": "スクロールで起きる演出",
     "en": "Scroll effects"
    },
    {
     "slug": "hover-click",
     "ja": "マウス・クリックへの反応",
     "en": "Hover & click interactions"
    },
    {
     "slug": "loading-loops",
     "ja": "読み込み・移動・動き続ける演出",
     "en": "Loading, navigation & ambient loops"
    }
   ],
   "count": 24,
   "first": "073",
   "last": "096",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "fonts": [],
   "scalable": true
  },
  {
   "pack": "photo",
   "order": 5,
   "title": {
    "ja": "写真の表現・光と画風",
    "en": "Photo looks, lighting & styles"
   },
   "langs": [
    "en",
    "ja"
   ],
   "categories": [
    {
     "slug": "lighting",
     "ja": "光の当て方・時間帯",
     "en": "Lighting & time of day"
    },
    {
     "slug": "lens-camera",
     "ja": "レンズ・カメラの効果",
     "en": "Lens & camera effects"
    },
    {
     "slug": "tone-finish",
     "ja": "仕上げ・画風",
     "en": "Tones & finishing looks"
    }
   ],
   "count": 24,
   "first": "097",
   "last": "120",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "fonts": [],
   "scalable": true
  }
 ],
 "elements": [
  {
   "id": "001",
   "pack": "motion",
   "no": "01",
   "slug": "pop-in",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "ポップイン",
    "en": "Pop-in"
   },
   "meaning": {
    "ja": "ポンと弾んで現れる",
    "en": "Pops into view with a small bounce"
   },
   "ask": {
    "ja": "ロゴをポップインで出して。0.4秒で、行き過ぎは少しだけ。",
    "en": "Bring the logo in with a pop-in, about 0.4 s, with a slight overshoot."
   },
   "summary": {
    "ja": "アプリのアイコンがポンと弾んで現れ、通知バッジが遅れてポンと出る。",
    "en": "An app icon pops in with a bounce, then a notification badge pops in a moment later."
   },
   "spec": {
    "ja": [
     "2.35秒で1回（1周期4.7秒に2回。1回目はコーラル地に星、2回目は青地にハート）",
     "アイコン: 116pxの角丸四角（角丸30）。0.28秒から拡大率 0→1 をばねで出す: 1 − e^(−6.5t)·cos(15t)（最大およそ1.26まで行き過ぎる）",
     "同時に傾き −0.35rad（約−20°）→ 0 をばね（1 − e^(−6t)·cos(11t)）で戻す",
     "通知バッジ: 半径25の黄色い丸に「1」。アイコン右上（+52, −52）に 0.62秒から ばね 1 − e^(−7t)·cos(17t) で出す",
     "退場: 1.86〜2.12秒。拡大率に (1 − backIn(s=2.2)) を掛ける（少しふくらんでから 0 へ縮む）",
     "床の影: 横62×縦8の楕円をアイコンの拡大率（0〜1に制限）に合わせて伸縮"
    ],
    "en": [
     "One pop per 2.35 s (twice per 4.7 s cycle: a star on coral first, then a heart on blue).",
     "Icon: 116 px rounded square (radius 30). From 0.28 s, scale 0→1 with a spring: 1 − e^(−6.5t)·cos(15t), peaking at about 1.26.",
     "At the same time, rotation −0.35 rad (about −20°) → 0 with a spring: 1 − e^(−6t)·cos(11t).",
     "Badge: yellow circle, radius 25, with \"1\", at the icon's top-right (+52, −52). Starts at 0.62 s with spring 1 − e^(−7t)·cos(17t).",
     "Exit: 1.86–2.12 s. Scale is multiplied by (1 − backIn, s = 2.2), so it swells slightly and then shrinks to 0.",
     "Floor shadow: 62 × 8 ellipse that scales with the icon (clamped to 0–1)."
    ]
   },
   "use": {
    "ja": "アイコン・ボタン・バッジなど、小さな要素を軽く目立たせて出したいとき。",
    "en": "Use it to bring in a small element such as an icon, button or badge with a light accent."
   },
   "tags": [
    "pop",
    "pop-in",
    "spring",
    "bounce",
    "scale",
    "icon",
    "badge",
    "entrance"
   ]
  },
  {
   "id": "002",
   "pack": "motion",
   "no": "02",
   "slug": "stagger",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "スタガー",
    "en": "Stagger"
   },
   "meaning": {
    "ja": "少しずつ時間をずらして順に出す",
    "en": "Items appear one after another, slightly offset in time"
   },
   "ask": {
    "ja": "5枚のカードをスタガーで出して。左から0.08秒ずつずらして。",
    "en": "Bring in the five cards with a stagger, 0.08 s apart, left to right."
   },
   "summary": {
    "ja": "グラフの棒が、少しずつ時間をずらして左から順に立ち上がる。",
    "en": "Chart bars rise one after another from the left, each slightly delayed."
   },
   "spec": {
    "ja": [
     "2.35秒で1回。棒7本（幅44・間隔20・高さ 52, 84, 68, 112, 92, 136, 158）。色は青・コーラル・黄・ミントの順で繰り返す",
     "i本目（0始まり）は 0.15 + 0.12×i 秒に開始。0.5秒かけて高さ 0→100% を backOut（s=2.6）で伸ばす（底辺固定・行き過ぎてから戻る）",
     "棒の上の白い点（半径6.5・棒の上端から16px上）: 棒の開始から 0.34秒遅れて ばね 1 − e^(−7t)·cos(16t) で出す",
     "退場: 棒は 1.78 + 0.045×i 秒から0.26秒で easeIn（3乗）で縮む。点は 1.70 + 0.045×i 秒から0.2秒で先に消える"
    ],
    "en": [
     "One pass per 2.35 s. Seven bars (width 44, gap 20, heights 52, 84, 68, 112, 92, 136, 158), coloured blue, coral, yellow, mint in rotation.",
     "Bar i (0-based) starts at 0.15 + 0.12·i s and grows from 0 to full height in 0.5 s with backOut (s = 2.6), anchored at the baseline, overshooting and settling.",
     "White dot (radius 6.5, 16 px above the bar top): starts 0.34 s after its bar with spring 1 − e^(−7t)·cos(16t).",
     "Exit: bars shrink with cubic ease-in over 0.26 s starting at 1.78 + 0.045·i s; dots vanish first, over 0.2 s from 1.70 + 0.045·i s."
    ]
   },
   "use": {
    "ja": "リスト・グラフ・カードなど、複数の要素を順番に出して視線を流したいとき。",
    "en": "Use it to bring in several items (list rows, chart bars, cards) in sequence and lead the eye across them."
   },
   "tags": [
    "stagger",
    "sequence",
    "delay",
    "cascade",
    "bar-chart",
    "list",
    "entrance"
   ]
  },
  {
   "id": "003",
   "pack": "motion",
   "no": "03",
   "slug": "burst",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "バースト",
    "en": "Burst"
   },
   "meaning": {
    "ja": "登場に合わせて線や粒が弾ける",
    "en": "Lines and dots burst outward as something appears"
   },
   "ask": {
    "ja": "ハートが出る瞬間に、まわりへバーストを入れて。短い線を8本、0.3秒で消す。",
    "en": "Add a burst around the heart the moment it appears: 8 short lines that fade in 0.3 s."
   },
   "summary": {
    "ja": "「いいね」のハートが点くと同時に、まわりに輪・線・粒が弾ける。",
    "en": "A like heart fills in, and a ring, lines and dots burst outward at the same moment."
   },
   "spec": {
    "ja": [
     "2.35秒で1回。ハート（サイズ46・線幅7の輪郭）が中央にある",
     "予備動作: 0.3〜0.5秒で拡大率 1→0.7（easeInOut 2乗）",
     "0.5秒に発火: ハートをコーラルで塗り、拡大率 0.7→1 を ばね 1 − e^(−6.5t)·cos(16t) で戻す",
     "輪: 黄色。半径 44→90、線幅 16→0 を0.6秒で easeOut（5乗）",
     "放射の線10本（黄・ミント交互、線幅9）: 先端の半径 64→130（縦は0.82倍）。長さ36を発火後0.22〜0.7秒で0へ",
     "粒10個（コーラル・青交互、半径 8→4.8）: 半径 58→150（横1.45倍・縦0.78倍の楕円状）。発火後0.3〜0.72秒でフェードアウト。塗りは 1.92〜2.2秒で消える"
    ],
    "en": [
     "One burst per 2.35 s. A heart (size 46, 7 px outline) sits in the centre.",
     "Anticipation: 0.3–0.5 s, scale 1→0.7 (quadratic ease-in-out).",
     "Trigger at 0.5 s: the heart fills with coral and scale returns 0.7→1 with spring 1 − e^(−6.5t)·cos(16t).",
     "Ring: yellow, radius 44→90 while line width goes 16→0, over 0.6 s with quintic ease-out.",
     "10 radial lines (yellow/mint alternating, width 9): outer end radius 64→130 (y scaled 0.82); length 36 shrinks to 0 between 0.22 and 0.7 s after the trigger.",
     "10 dots (coral/blue alternating, radius 8→4.8): radius 58→150 on an ellipse (x ×1.45, y ×0.78), fading out 0.3–0.72 s after the trigger. The heart fill fades at 1.92–2.2 s."
    ]
   },
   "use": {
    "ja": "いいね・達成・正解など、押した瞬間や決まった瞬間を強調したいとき。",
    "en": "Use it to mark the instant something is triggered or achieved, such as a like, a success or a correct answer."
   },
   "tags": [
    "burst",
    "explosion",
    "radial",
    "like",
    "heart",
    "celebrate",
    "accent",
    "sparkle"
   ]
  },
  {
   "id": "004",
   "pack": "motion",
   "no": "04",
   "slug": "line-draw",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "ラインドロー",
    "en": "Line draw"
   },
   "meaning": {
    "ja": "線が描かれるように伸びる",
    "en": "A line extends as if it were being drawn"
   },
   "ask": {
    "ja": "グラフの折れ線を、ラインドローで左から描いて。1.2秒かけて。",
    "en": "Reveal the chart line with a line draw from the left, over 1.2 s."
   },
   "summary": {
    "ja": "グラフの線が描かれるように伸び、消えるときは後ろから追いかけて消える。",
    "en": "A chart line draws itself on, and is later erased from its starting end."
   },
   "spec": {
    "ja": [
     "4.7秒で1回。線の見える範囲（始点側の割合〜終点側の割合）を動かして描く（トリムパス）",
     "軸（L字・線幅6）: 0.08〜0.7秒で描く。折れ線（ミント・線幅11・7点を通るなめらかな曲線・端は丸）: 0.4〜1.95秒で描く。どちらも easeInOut（3乗）",
     "描いている間、先端に黄色い丸（半径12、中心に白の半径5）を付ける",
     "矢じり: 1.9〜2.2秒に backOut（s=2.5）で開く（羽の長さ26・開き20）",
     "山の1点を囲む丸（コーラル・半径26・線幅7）: 2.2〜2.8秒に真上から時計回りに描く",
     "消去: 丸 3.5〜4.0秒、折れ線 3.65〜4.45秒、軸 3.85〜4.55秒。いずれも始点側から縮めて消す。矢じりは 4.3〜4.45秒で消す"
    ],
    "en": [
     "One pass per 4.7 s. Drawn as a trim path: animate the visible range (start fraction to end fraction) of each stroke.",
     "Axes (L shape, width 6) draw at 0.08–0.7 s; the line (mint, width 11, a smooth curve through 7 points, round caps) draws at 0.4–1.95 s. Both use cubic ease-in-out.",
     "While drawing, a yellow dot (radius 12, white centre radius 5) rides the leading tip.",
     "Arrowhead: opens at 1.9–2.2 s with backOut (s = 2.5); wings 26 long, 20 wide.",
     "A coral circle (radius 26, width 7) is drawn around one peak at 2.2–2.8 s, clockwise from the top.",
     "Erase: circle 3.5–4.0 s, line 3.65–4.45 s, axes 3.85–4.55 s, each shrinking from its starting end. The arrowhead fades at 4.3–4.45 s."
    ]
   },
   "use": {
    "ja": "グラフ・経路・下線・囲み線など、線そのものを見せ場にしたいとき。",
    "en": "Use it when the stroke itself is the point: charts, routes, underlines, hand-drawn circles."
   },
   "tags": [
    "line-draw",
    "trim-path",
    "stroke",
    "draw-on",
    "chart",
    "path",
    "write-on"
   ]
  },
  {
   "id": "005",
   "pack": "motion",
   "no": "05",
   "slug": "mask-reveal",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "マスクリビール",
    "en": "Mask reveal"
   },
   "meaning": {
    "ja": "見えない枠の中から文字がせり上がる",
    "en": "Text rises into view from behind an invisible edge"
   },
   "ask": {
    "ja": "タイトルをマスクリビールで下からせり上げて。0.6秒、行ごとに少しずらして。",
    "en": "Bring the title in with a mask reveal from below, 0.6 s, each line slightly after the one before."
   },
   "summary": {
    "ja": "1本の線を境に、見えない枠の向こうから見出しがせり上がる。",
    "en": "Headline text slides out from behind an invisible edge marked by a single line."
   },
   "spec": {
    "ja": [
     "2.35秒で1回。境目の線（コーラル・380×6・y=124）: 0.1〜0.5秒で中央から左右へ伸ばす（easeInOut 3乗）。2.05〜2.3秒で縮めて消す",
     "上の文字（太字98px・白）: 線より上だけ見える切り抜き（y=8〜119）の中で、120px下から定位置へ。0.35〜1.0秒・easeOut（5乗）",
     "下の文字（32px・黄）: 線より下だけ見える切り抜き（y=129〜181）の中で、60px上から定位置へ。0.55〜1.15秒・easeOut（5乗）",
     "退場: 上の文字は 1.7〜2.05秒に上へ150px（backIn s=1.2・いったん少し下がる）。下の文字は 1.75〜2.05秒に下へ70px（easeIn 3乗）",
     "文字の透明度は変えない。切り抜きの外に出ると見えなくなるだけ"
    ],
    "en": [
     "One pass per 2.35 s. Divider line (coral, 380 × 6, y = 124): grows from the centre at 0.1–0.5 s (cubic ease-in-out), shrinks away at 2.05–2.3 s.",
     "Top text (bold 98 px, white): clipped to the area above the line (y 8–119); moves up into place from 120 px below at 0.35–1.0 s, quintic ease-out.",
     "Bottom text (32 px, yellow): clipped to the area below the line (y 129–181); moves down into place from 60 px above at 0.55–1.15 s, quintic ease-out.",
     "Exit: top text moves 150 px up at 1.7–2.05 s (backIn, s = 1.2, dipping slightly first); bottom text moves 70 px down at 1.75–2.05 s (cubic ease-in).",
     "Opacity never changes; the text is hidden only by leaving the clip area."
    ]
   },
   "use": {
    "ja": "タイトルや見出しを、落ち着いた印象で出したいとき。",
    "en": "Use it for titles and headings that should appear in a clean, composed way."
   },
   "tags": [
    "mask",
    "reveal",
    "clip",
    "wipe",
    "title",
    "text",
    "slide-up",
    "headline"
   ]
  },
  {
   "id": "006",
   "pack": "motion",
   "no": "06",
   "slug": "typewriter",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "タイプライター",
    "en": "Typewriter"
   },
   "meaning": {
    "ja": "1文字ずつ打たれるように出る",
    "en": "Text appears one character at a time, as if typed"
   },
   "ask": {
    "ja": "この一文をタイプライターで出して。1文字0.05秒、末尾にカーソルを付けて。",
    "en": "Show this sentence with a typewriter effect, 0.05 s per character, with a cursor at the end."
   },
   "summary": {
    "ja": "入力欄に1文字ずつ打たれ、打ち終わると送信ボタンが点いて押される。",
    "en": "Text is typed into an input field one character at a time, then the send button lights up and is pressed."
   },
   "spec": {
    "ja": [
     "4.7秒で1回。白い入力欄（471×92・角丸30）に9文字を、0.3秒から0.24秒おきに1文字ずつ出す（2.46秒で打ち終わり）",
     "出た文字は拡大率 1.35→1 に落ち着く: 1 + 0.35·e^(−16t)",
     "カーソル（コーラル・5×44）: 最後の文字の右。打っている間は点灯、それ以外は0.94秒周期（0.5秒点灯）で点滅",
     "送信ボタン（半径30）: 灰色 → 2.58秒から青の丸を ばね 1 − e^(−6.5t)·cos(15t) で出す",
     "押下: 2.96〜3.21秒にボタンを最大20%縮める（sin の山）。3.13〜3.41秒に文字が上へ70px動きながら消える",
     "文字が半分消えた時点（約3.27秒）でカーソルは先頭に戻り、3.51〜3.81秒にボタンの青が消える"
    ],
    "en": [
     "One pass per 4.7 s. Nine characters appear in a white input field (471 × 92, radius 30), one every 0.24 s starting at 0.3 s (typing ends at 2.46 s).",
     "Each new character settles from scale 1.35 to 1: 1 + 0.35·e^(−16t).",
     "Cursor (coral, 5 × 44) sits after the last character: solid while typing, otherwise blinking with a 0.94 s period (on for 0.5 s).",
     "Send button (radius 30): grey, then a blue disc appears from 2.58 s with spring 1 − e^(−6.5t)·cos(15t).",
     "Press: the button shrinks by up to 20% at 2.96–3.21 s (half sine). At 3.13–3.41 s the text moves 70 px up while fading out.",
     "The cursor returns to the start once the text is half faded (about 3.27 s); at 3.51–3.81 s the blue fades."
    ]
   },
   "use": {
    "ja": "プロンプト入力・検索・チャットなど、文字を打つ操作を見せたいとき。",
    "en": "Use it to show someone typing: a prompt, a search query, a chat message."
   },
   "tags": [
    "typewriter",
    "typing",
    "text",
    "cursor",
    "input",
    "prompt",
    "chat",
    "type-on"
   ]
  },
  {
   "id": "007",
   "pack": "motion",
   "no": "07",
   "slug": "count-up",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "カウントアップ",
    "en": "Count-up"
   },
   "meaning": {
    "ja": "数字が勢いよく増えていく",
    "en": "A number runs up quickly to its final value"
   },
   "ask": {
    "ja": "数字を0から1,280までカウントアップさせて。1.5秒で、最後はゆっくり止めて。",
    "en": "Count the figure up from 0 to 1,280 in 1.5 s, slowing down at the end."
   },
   "summary": {
    "ja": "数字が勢いよく増えて、最後にピタッと決まる。",
    "en": "A number races upward and locks onto its final value."
   },
   "spec": {
    "ja": [
     "4.7秒で1回。0.1〜0.4秒でフェードイン、4.0〜4.4秒でフェードアウト",
     "数字（太字104px）: 0.45〜2.9秒で 0→2,480。値 = 目標 × (1 − (1 − p)^4) を四捨五入（最初は速く、最後はゆっくり）",
     "桁区切りのカンマ付き。各桁は同じ幅で右そろえ（数字が変わっても横に揺れない）",
     "2.9秒に確定: 色を白→黄に変え、拡大率を 1 + 0.07·e^(−7t)·cos(15t) で小さく弾ませる",
     "左の上向き矢印（ミントの丸・半径34）: 0.35秒から ばね 1 − e^(−7t)·cos(14t)。数えている間は上下に 6px × (1 − p)^3 × sin(30u) で震える",
     "下のバー（330×12・青→ミントのグラデーション）: 値 ÷ 目標 の割合で伸びる"
    ],
    "en": [
     "One pass per 4.7 s. Fades in at 0.1–0.4 s and out at 4.0–4.4 s.",
     "Number (bold 104 px): 0→2,480 over 0.45–2.9 s. Value = round(target × (1 − (1 − p)^4)): fast at first, slow at the end.",
     "Thousands separator included. Every digit has the same width and the number is right-aligned, so it does not jitter sideways.",
     "Lands at 2.9 s: colour switches white→yellow and scale does a small bounce, 1 + 0.07·e^(−7t)·cos(15t).",
     "Up-arrow chip on the left (mint circle, radius 34): appears from 0.35 s with spring 1 − e^(−7t)·cos(14t); while counting it shakes vertically by 6 px × (1 − p)^3 × sin(30u).",
     "Bar below (330 × 12, blue→mint gradient): fills in proportion to value ÷ target."
    ]
   },
   "use": {
    "ja": "売上・人数・達成率など、数字の大きさや伸びを印象づけたいとき。",
    "en": "Use it to make a figure feel big or growing: revenue, user counts, completion rates."
   },
   "tags": [
    "count-up",
    "counter",
    "number",
    "odometer",
    "stats",
    "kpi",
    "progress"
   ]
  },
  {
   "id": "008",
   "pack": "motion",
   "no": "08",
   "slug": "kinetic-typography",
   "category": "entrances-text",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "キネティックタイポグラフィ",
    "en": "Kinetic typography"
   },
   "meaning": {
    "ja": "言葉に合わせて文字が動き回る",
    "en": "Words move, scale and turn in time with what is said"
   },
   "ask": {
    "ja": "このナレーションをキネティックタイポグラフィにして。強調する語は大きく、拍に合わせて出して。",
    "en": "Turn this narration into kinetic typography: make the stressed words larger and land them on the beat."
   },
   "summary": {
    "ja": "言葉の意味に合わせて文字が動く（のびる／はねる／まわる／ドン！）。",
    "en": "Words move the way they mean: one stretches, one bounces, one spins, one slams down."
   },
   "spec": {
    "ja": [
     "4語を1.175秒ずつ（太字88px）。各語は最後の0.2秒でフェードアウトしながら上へ46px（easeIn 3乗）",
     "のびる（青）: 横の拡大率 0.3→1 を ばね 1 − e^(−4.2t)·cos(12t) で。縦は 1/√(横) で少し縮める",
     "はねる（黄）: 1文字ずつ0.1秒ずらす。高さ 78px × |sin(πt/0.4)| × e^(−2.6t) で弾む。接地の瞬間は縦に最大16%つぶす",
     "まわる（ミント）: 1文字ずつ0.12秒ずらす。0.62秒で −360°→0° を backOut（s=1.3）。拡大率 0→1 を0.25秒で easeOut（3乗）",
     "ドン!（コーラル・100px・斜体風に傾ける）: 0.02〜0.2秒で拡大率 3.4→1（easeIn 3乗）で叩きつける",
     "着地後: 横揺れ 10px × e^(−9t) × sin(38t)、縦つぶれ 20% × e^(−11t)、放射の線8本を0.4秒"
    ],
    "en": [
     "Four words, 1.175 s each (bold 88 px). Each exits in its last 0.2 s, fading out while moving 46 px up (cubic ease-in).",
     "Stretch (blue): horizontal scale 0.3→1 with spring 1 − e^(−4.2t)·cos(12t); vertical scale is 1/√(horizontal).",
     "Bounce (yellow): characters staggered by 0.1 s; height 78 px × |sin(πt/0.4)| × e^(−2.6t); squashed vertically by up to 16% at each contact.",
     "Spin (mint): characters staggered by 0.12 s; rotation −360°→0° over 0.62 s with backOut (s = 1.3); scale 0→1 over 0.25 s, cubic ease-out.",
     "Slam (coral, 100 px, slanted): scale 3.4→1 at 0.02–0.2 s with cubic ease-in.",
     "After impact: horizontal shake 10 px × e^(−9t) × sin(38t), vertical squash 20% × e^(−11t), and 8 radial lines for 0.4 s."
    ]
   },
   "use": {
    "ja": "ナレーションや歌詞のキーワードを、意味ごと印象に残したいとき。",
    "en": "Use it to make key words from narration or lyrics memorable through how they move."
   },
   "tags": [
    "kinetic-typography",
    "text",
    "typography",
    "lyric",
    "word",
    "bounce",
    "spin",
    "slam"
   ]
  },
  {
   "id": "009",
   "pack": "motion",
   "no": "09",
   "slug": "easing",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "イージング",
    "en": "Easing"
   },
   "meaning": {
    "ja": "緩急をつけて気持ちよく動かす",
    "en": "Motion speeds up and slows down instead of moving at one speed"
   },
   "ask": {
    "ja": "この移動にイージングをかけて。イーズアウトで、止まり際をゆっくりに。",
    "en": "Add easing to this move: ease-out, slowing down as it stops."
   },
   "summary": {
    "ja": "同じ距離を同じ時間で動く2つの四角。上は一定の速さ、下は緩急あり。",
    "en": "Two squares cover the same distance in the same time: the top one at constant speed, the bottom one eased."
   },
   "spec": {
    "ja": [
     "4.7秒で1往復。62pxの四角（角丸16）2つが横に316px動く。行き 0.2〜1.75秒（1.55秒）、0.8秒止まり、戻り 2.55〜4.1秒",
     "上（一定）: 直線的に動く（linear）。形も色も変えない",
     "下（緩急）: cubic-bezier(.86, 0, .14, 1)。ゆっくり出て、中盤で一気に速くなり、ゆっくり止まる",
     "下は速さに比例して横に最大1.5倍のび、縦は0.8倍まで縮む（速さを3.6で割り 0〜1 に制限した値を使う）",
     "下の後ろに速度線3本（最長150px×0.8〜1.25倍）と、0.035秒ずつ遅れた残像4枚",
     "レールには等しい時間間隔での位置を12個の点で表示（上は等間隔、下は両端に詰まる）"
    ],
    "en": [
     "One round trip per 4.7 s. Two 62 px squares (radius 16) travel 316 px horizontally: out at 0.2–1.75 s (1.55 s), hold 0.8 s, back at 2.55–4.1 s.",
     "Top (constant): linear motion; shape and colour never change.",
     "Bottom (eased): cubic-bezier(.86, 0, .14, 1). Slow start, very fast middle, slow stop.",
     "The bottom square stretches horizontally up to 1.5× and flattens to 0.8× in proportion to speed (speed ÷ 3.6, clamped to 0–1).",
     "Behind it: 3 speed lines (up to 150 px × 0.8–1.25) and 4 ghost copies lagging 0.035 s each.",
     "Each rail shows 12 dots marking positions at equal time intervals (evenly spaced on top, bunched at both ends below)."
    ]
   },
   "use": {
    "ja": "移動・拡大・回転など、あらゆる動きに緩急を付けて機械的に見えないようにしたいとき。",
    "en": "Use it on any move, scale or rotation so the motion accelerates and decelerates instead of looking mechanical."
   },
   "tags": [
    "easing",
    "ease-in-out",
    "cubic-bezier",
    "linear",
    "timing",
    "curve",
    "acceleration"
   ]
  },
  {
   "id": "010",
   "pack": "motion",
   "no": "10",
   "slug": "overshoot",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "オーバーシュート",
    "en": "Overshoot"
   },
   "meaning": {
    "ja": "行き過ぎてから戻って止まる",
    "en": "Goes a little past the target, then settles back"
   },
   "ask": {
    "ja": "メーターの針をオーバーシュートさせて。目標を1割ほど越えてから戻して。",
    "en": "Give the gauge needle an overshoot: about 10% past the target, then back."
   },
   "summary": {
    "ja": "メーターの針が、目標を行き過ぎてから戻って止まる。",
    "en": "A gauge needle swings past its target, comes back and settles."
   },
   "spec": {
    "ja": [
     "4.7秒で1回。半円のメーター（半径128・線幅26）。目標は全体の0.7（左端から126°）",
     "0.25秒に開始: 値 = 0.7 × (1 − e^(−4.6t)·cos(10.5t))。約0.3秒後に目標を約25%行き過ぎ、揺れながら目標に落ち着く",
     "行き過ぎた分（目標より先の弧）はコーラルで塗る。目標の位置に黄色の印",
     "弧の塗りは青→ミントのグラデーション。針は白・線幅9",
     "戻り: 3.7秒から 値 = 0.7 × e^(−7.5t)·cos(8.5t) で 0 へ（0 をわずかに下回ってから止まる）"
    ],
    "en": [
     "One pass per 4.7 s. Semicircular gauge (radius 128, stroke 26). Target is 0.7 of the sweep (126° from the left end).",
     "Starts at 0.25 s: value = 0.7 × (1 − e^(−4.6t)·cos(10.5t)). About 0.3 s later it is roughly 25% past the target, then it oscillates and settles on the target.",
     "The part beyond the target is drawn in coral. A yellow tick marks the target.",
     "The filled arc is a blue→mint gradient; the needle is white, width 9.",
     "Return: from 3.7 s, value = 0.7 × e^(−7.5t)·cos(8.5t) back to 0 (dipping slightly below 0 before it stops)."
    ]
   },
   "use": {
    "ja": "要素が到着する動きに勢いと弾力を出したいとき。",
    "en": "Use it to give an arriving element energy and a springy feel."
   },
   "tags": [
    "overshoot",
    "spring",
    "bounce",
    "settle",
    "elastic",
    "gauge",
    "meter",
    "needle"
   ]
  },
  {
   "id": "011",
   "pack": "motion",
   "no": "11",
   "slug": "squash-and-stretch",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "スクワッシュ＆ストレッチ",
    "en": "Squash & stretch"
   },
   "meaning": {
    "ja": "つぶれて伸びて弾力を出す",
    "en": "Squashes and stretches so that it feels elastic"
   },
   "ask": {
    "ja": "ボールの着地にスクワッシュ＆ストレッチを入れて。つぶれは弱めに。",
    "en": "Add squash and stretch when the ball lands; keep the squash subtle."
   },
   "summary": {
    "ja": "弾むキャラクターが、着地でつぶれ、飛ぶときに伸びる。",
    "en": "A bouncing character squashes on landing and stretches as it takes off."
   },
   "spec": {
    "ja": [
     "半径37の丸いキャラクター。1.175秒で1回弾み（4.7秒で4回）、高さ92pxの放物線。左右には ±150px をsin波で1周期かけて往復",
     "接地中（各バウンドの最初と最後の10%）: 縦の拡大率 0.52（着地の瞬間）⇄ 1.28（離れる瞬間）を2乗カーブで",
     "空中: 縦の拡大率 = 1 + 0.28 × s^3。s は頂点からの時間のずれ（頂点で0、離れる瞬間と着く瞬間で1）（速いところで伸びる）",
     "横の拡大率は常に 1 ÷ 縦（体積を保つ）。変形の基準は足元",
     "影は高さに応じて小さく・細く。着地のたびに左右へ黄色い短い線が飛ぶ（1バウンドの約18%の間）"
    ],
    "en": [
     "A round character, radius 37. One bounce per 1.175 s (four per 4.7 s), a 92 px parabola. It drifts ±150 px sideways on a sine wave over the cycle.",
     "On the ground (first and last 10% of each bounce): vertical scale goes between 0.52 (moment of impact) and 1.28 (moment of leaving) on a quadratic curve.",
     "In the air: vertical scale = 1 + 0.28 × s^3, where s is the time offset from the apex (0 at the apex, 1 at take-off and touchdown), so it is stretched where it moves fast.",
     "Horizontal scale is always 1 ÷ vertical (volume is preserved). The transform is anchored at the feet.",
     "The shadow gets smaller and thinner with height. Short yellow lines flick out left and right at each landing (for about 18% of a bounce)."
    ]
   },
   "use": {
    "ja": "キャラクターやロゴの動きに、重さとやわらかさを出したいとき。",
    "en": "Use it to give a character or logo weight and softness."
   },
   "tags": [
    "squash",
    "stretch",
    "squash-and-stretch",
    "bounce",
    "character",
    "ball",
    "animation-principle"
   ]
  },
  {
   "id": "012",
   "pack": "motion",
   "no": "12",
   "slug": "shape-morph",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "モーフィング",
    "en": "Shape morph"
   },
   "meaning": {
    "ja": "形が別の形に変わる",
    "en": "One shape turns smoothly into another"
   },
   "ask": {
    "ja": "丸を星にモーフィングさせて。0.8秒で、途中で色も青から黄へ。",
    "en": "Morph the circle into a star in 0.8 s, changing the color from blue to yellow on the way."
   },
   "summary": {
    "ja": "丸 → 四角 → 星 → ハートと、形と色がなめらかに変わる。",
    "en": "A shape changes smoothly from circle to square to star to heart, with its colour."
   },
   "spec": {
    "ja": [
     "4つの形を1.175秒ずつ（丸 → 角を丸く落とした四角 → 星 → ハート → 丸に戻る）。基準の半径64",
     "各区間は前半で止まり、最後の0.62〜0.04秒前（0.58秒間）で次の形へ変形",
     "形は輪郭上の240点で持ち、同じ番号の点どうしを直線補間する。進み具合は backOut（s=1.6）で少し行き過ぎる",
     "色: 青 → コーラル → 黄 → ミント。easeInOut（2乗）で混ぜる",
     "変形中は拡大率を 1 + 0.07 × sin(π × 進み具合) でふくらませる",
     "下に4つの点。今の形の点が大きく色付きになる"
    ],
    "en": [
     "Four shapes, 1.175 s each: circle → square with rounded-off corners → star → heart → back to circle. Base radius 64.",
     "Each segment holds first, then morphs to the next shape between 0.62 s and 0.04 s before its end (0.58 s).",
     "Every outline is stored as 240 points; points with the same index are linearly interpolated. Progress uses backOut (s = 1.6), so it overshoots slightly.",
     "Colour: blue → coral → yellow → mint, blended with quadratic ease-in-out.",
     "During the morph the scale swells by 1 + 0.07 × sin(π × progress).",
     "Four dots below; the dot for the current shape is larger and coloured."
    ]
   },
   "use": {
    "ja": "アイコンやロゴを別の形へ、切らずにつなげて変えたいとき。",
    "en": "Use it to turn one icon or logo into another without a cut."
   },
   "tags": [
    "morph",
    "morphing",
    "shape",
    "path",
    "interpolate",
    "transform",
    "icon"
   ]
  },
  {
   "id": "013",
   "pack": "motion",
   "no": "13",
   "slug": "liquid-motion",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "リキッドモーション",
    "en": "Liquid motion"
   },
   "meaning": {
    "ja": "液体のようにぬるっと動く",
    "en": "Shapes move and merge like liquid"
   },
   "ask": {
    "ja": "ロゴの登場をリキッドモーションにして。しずくが集まってロゴの形になるように。",
    "en": "Make the logo entrance a liquid motion: drops gather and form the shape."
   },
   "summary": {
    "ja": "しずくが伸びて、ちぎれて、ぬるっと1つにまとまる。",
    "en": "A blob stretches out, breaks into drops and merges back into one."
   },
   "spec": {
    "ja": [
     "先頭の丸（半径44）: 0.35〜1.45秒で右へ300px、cubic-bezier(.7, 0, .2, 1)。移動中は sin の山で34px浮く。2.7〜3.8秒で同じ動きで戻る",
     "後ろに7つの丸が0.065秒ずつ遅れて同じ経路を追う。半径は44→15へ小さく、上下に±6px揺れる",
     "止まっている間も、まわりで小さな丸3つ（半径15・13・11）が距離34〜64pxを1周期に2回出入りする",
     "つながる質感: 丸を白で描く → 9pxぼかす → 透明度をしきい値（112〜144の間だけなだらか）で切る → 残った形に色を塗る",
     "色はミント → 青 → 紫（#7C5CFF）の斜めグラデーション。先頭に白い楕円のハイライト"
    ],
    "en": [
     "Lead circle (radius 44): moves 300 px right at 0.35–1.45 s with cubic-bezier(.7, 0, .2, 1), rising 34 px on a sine arc while moving; returns the same way at 2.7–3.8 s.",
     "Seven circles follow the same path, each 0.065 s later, radius tapering 44→15, wobbling ±6 px vertically.",
     "Even while it rests, three small circles (radius 15, 13, 11) move in and out between 34 and 64 px from it, twice per cycle.",
     "Merged look: draw the circles in white → blur 9 px → threshold the alpha (soft only between 112 and 144) → fill what remains with colour.",
     "Fill is a diagonal gradient mint → blue → violet (#7C5CFF), with a white elliptical highlight on the lead circle."
    ]
   },
   "use": {
    "ja": "有機的でやわらかい印象を出したいとき。ロゴ・背景・切り替えのつなぎに。",
    "en": "Use it for an organic, soft look in logos, backgrounds and connecting moves."
   },
   "tags": [
    "liquid",
    "blob",
    "goo",
    "gooey",
    "metaball",
    "fluid",
    "organic",
    "drip"
   ]
  },
  {
   "id": "014",
   "pack": "motion",
   "no": "14",
   "slug": "motion-trail",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "モーショントレイル",
    "en": "Motion trail"
   },
   "meaning": {
    "ja": "動いた跡に残像が尾を引く",
    "en": "A fading trail follows a moving object"
   },
   "ask": {
    "ja": "飛んでいく丸にモーショントレイルを付けて。残像は5個、後ろほど薄く。",
    "en": "Add a motion trail to the flying circle: five copies that fade out behind it."
   },
   "summary": {
    "ja": "8の字に動く丸の跡に、残像が尾を引く。",
    "en": "A ball moving in a figure eight leaves a fading trail of copies behind it."
   },
   "spec": {
    "ja": [
     "丸（コーラル・半径25、中心に白の半径11）が8の字を4.7秒で1周: x = 196·sin(a)、y = 62·sin(2a)。a は一定の速さで進む",
     "残像15個: 0.105rad（約0.079秒）ずつ過去の位置に置く",
     "残像の半径は 22→6、透明度は 0.9 × (1 − i/15) + 0.05 で古いほど薄く小さい",
     "残像の色は新しい順にコーラル → 黄 → 青",
     "古い残像から先に描き、本体を最後に重ねる"
    ],
    "en": [
     "A ball (coral, radius 25, white centre radius 11) traces a figure eight once per 4.7 s: x = 196·sin(a), y = 62·sin(2a), with a advancing at constant speed.",
     "15 copies, each placed 0.105 rad (about 0.079 s) further back along the path.",
     "Copy radius goes 22→6 and opacity is 0.9 × (1 − i/15) + 0.05, so older copies are smaller and fainter.",
     "Copy colour runs coral → yellow → blue from newest to oldest.",
     "Draw the oldest copy first and the ball itself last."
    ]
   },
   "use": {
    "ja": "速さや軌道を見せたいとき。飛ぶ物・カーソル・光の点に。",
    "en": "Use it to show speed or a path: flying objects, cursors, points of light."
   },
   "tags": [
    "trail",
    "motion-trail",
    "echo",
    "afterimage",
    "ghost",
    "path",
    "speed"
   ]
  },
  {
   "id": "015",
   "pack": "motion",
   "no": "15",
   "slug": "particles",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "パーティクル",
    "en": "Particles"
   },
   "meaning": {
    "ja": "粒が飛び散る",
    "en": "Many small pieces fly out and scatter"
   },
   "ask": {
    "ja": "達成の瞬間に、下からパーティクルを噴き上げて。4色で、1.5秒で落ちきるように。",
    "en": "At the moment of success, shoot particles up from the bottom: four colors, all fallen within 1.5 s."
   },
   "summary": {
    "ja": "粒が下の口から次々と噴き出して、飛び散って落ちる。",
    "en": "Particles keep shooting up from an emitter, spread out and fall."
   },
   "spec": {
    "ja": [
     "粒84個。下中央（横の中央・下端から20px上）から出る",
     "初速: 横 ±190px/秒、上向き 250〜400px/秒。重力 470px/秒²（放物線）",
     "各粒は 2.35秒 または 約1.57秒 の周期で繰り返し、開始のずれは乱数（シード固定なので毎回同じ絵になる）",
     "寿命は最長1.5秒。出た直後0.06秒でフェードイン、寿命の最後30%でフェードアウト。拡大率 1.15→0.7",
     "形は丸・四角・三角（大きさ5〜11px）、色は青・コーラル・黄・ミント。最大 ±4.5rad/秒で回転"
    ],
    "en": [
     "84 particles, emitted from the bottom centre (horizontal centre, 20 px above the bottom edge).",
     "Initial velocity: ±190 px/s horizontally, 250–400 px/s upward. Gravity 470 px/s² (parabolic paths).",
     "Each particle repeats with a period of 2.35 s or about 1.57 s, with a random start offset (fixed seed, so every run looks the same).",
     "Lifetime up to 1.5 s: fade in over the first 0.06 s, fade out over the last 30%. Scale 1.15→0.7.",
     "Shapes are circles, squares and triangles (size 5–11 px) in blue, coral, yellow and mint, spinning at up to ±4.5 rad/s."
    ]
   },
   "use": {
    "ja": "お祝い・達成・にぎやかさを足したいとき。紙吹雪や火花の代わりに。",
    "en": "Use it to add celebration or liveliness, in place of confetti or sparks."
   },
   "tags": [
    "particles",
    "confetti",
    "emitter",
    "fountain",
    "gravity",
    "celebration",
    "sparks"
   ]
  },
  {
   "id": "016",
   "pack": "motion",
   "no": "16",
   "slug": "parallax",
   "category": "motion-polish",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "パララックス",
    "en": "Parallax"
   },
   "meaning": {
    "ja": "手前と奥をずらして動かし奥行きを出す",
    "en": "Near and far layers move at different speeds to show depth"
   },
   "ask": {
    "ja": "この風景を3層に分けて、パララックスで横に流して。手前ほど速く。",
    "en": "Split this landscape into three layers and scroll them with parallax, nearer layers faster."
   },
   "summary": {
    "ja": "横に動く景色。手前ほど大きく、奥ほど小さく動いて、奥行きが出る。",
    "en": "A landscape pans sideways; near layers move more and far layers move less, creating depth."
   },
   "spec": {
    "ja": [
     "カメラの横移動: ±108px を sin波で4.7秒に1往復",
     "各層は 移動量 × 係数 だけ逆向きにずらす。係数は奥から: 星 0.05、月 0.1、遠い山 0.28、中間の山 0.6、手前の丘と木 1.25、いちばん手前の暗い丸 2.1",
     "奥の層ほど暗く背景に近い色、手前ほど明るい色。いちばん手前は暗い影として画面下に大きく置く",
     "各層は画面の左右に200px以上はみ出して描き、端が見えないようにする"
    ],
    "en": [
     "Camera pan: ±108 px on a sine wave, one round trip per 4.7 s.",
     "Each layer is offset by pan × factor in the opposite direction. Factors from back to front: stars 0.05, moon 0.1, far ridge 0.28, middle ridge 0.6, front hill and trees 1.25, nearest dark shapes 2.1.",
     "Far layers use darker colours close to the background, nearer layers brighter ones; the nearest layer is a large dark silhouette along the bottom.",
     "Every layer is drawn at least 200 px beyond both sides of the frame so its ends never show."
    ]
   },
   "use": {
    "ja": "平面の絵や写真に奥行きを出したいとき。背景・風景・スクロール表現に。",
    "en": "Use it to give flat artwork or photos depth: backgrounds, landscapes, scrolling scenes."
   },
   "tags": [
    "parallax",
    "depth",
    "layers",
    "pan",
    "2.5d",
    "background",
    "landscape"
   ]
  },
  {
   "id": "017",
   "pack": "motion",
   "no": "17",
   "slug": "mask-transition",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "マスクトランジション",
    "en": "Mask transition"
   },
   "meaning": {
    "ja": "形の中から次の画面が現れる",
    "en": "The next scene appears inside a growing shape"
   },
   "ask": {
    "ja": "次の場面へはマスクトランジションで。中央の丸が0.7秒で広がって切り替わるように。",
    "en": "Go to the next scene with a mask transition: a circle grows from the center in 0.7 s."
   },
   "summary": {
    "ja": "丸や星の形の「窓」が広がり、その中に次の画面が見える。",
    "en": "A circle- or star-shaped window grows, showing the next scene inside it."
   },
   "spec": {
    "ja": [
     "昼の画面 → 夜の画面 → 昼の画面を2.35秒ずつ。各区間の 0.45〜1.6秒（1.15秒）で切り替え、easeInOut（3乗）",
     "今の画面の上に、形で切り抜いた次の画面を重ねる。形を広げて画面全体を覆ったら完了",
     "昼→夜: 丸。太陽の中心（112, 104）から半径 0→470",
     "夜→昼: 5角の星。月の中心（427, 104）から外側の半径 0→1150、同時に1.2rad（約69°）回す",
     "広がっている間、形のふちに白い線（線幅7）を付ける"
    ],
    "en": [
     "Day scene → night scene → day scene, 2.35 s each. The change runs at 0.45–1.6 s of each half (1.15 s), cubic ease-in-out.",
     "The next scene is drawn on top of the current one, clipped to a shape; the shape grows until it covers the frame.",
     "Day→night: a circle from the sun's centre (112, 104), radius 0→470.",
     "Night→day: a five-point star from the moon's centre (427, 104), outer radius 0→1150, rotating 1.2 rad (about 69°) as it grows.",
     "While it grows, the edge of the shape has a white outline (width 7)."
    ]
   },
   "use": {
    "ja": "画面の中の物（太陽・ロゴ・ボタン）を起点に、次の場面へ切り替えたいとき。",
    "en": "Use it to change scenes starting from an object in the frame, such as a sun, logo or button."
   },
   "tags": [
    "mask",
    "transition",
    "iris",
    "wipe",
    "shape-wipe",
    "reveal",
    "scene-change"
   ]
  },
  {
   "id": "018",
   "pack": "motion",
   "no": "18",
   "slug": "shape-transition",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "シェイプトランジション",
    "en": "Shape transition"
   },
   "meaning": {
    "ja": "図形が画面を覆って切り替わる",
    "en": "Shapes cover the screen and uncover the next scene"
   },
   "ask": {
    "ja": "場面の切り替えはシェイプトランジションで。4色の斜めの帯が左から覆うように。",
    "en": "Change scenes with a shape transition: four diagonal color bands sweep in from the left."
   },
   "summary": {
    "ja": "色のついた帯が画面を覆い隠し、抜けると次の画面になっている。",
    "en": "Coloured bands sweep across and cover the frame; when they leave, the next scene is there."
   },
   "spec": {
    "ja": [
     "昼 → 夜 → 昼を2.35秒ずつ。横長の帯4本（高さ52・青、コーラル、黄、ミント）。帯の左右の端は80px斜め",
     "覆う: 0.38〜1.0秒。各帯の先端が画面の端から反対の端まで進む。帯ごとに全体の14%ずつ遅らせ、1本あたり全体の58%の長さで easeInOut（3乗）",
     "1.0秒（全部覆った瞬間）に下の画面を次の画面へ差し替える",
     "抜ける: 1.12〜1.75秒。各帯の後ろの端が同じ遅れ・同じカーブで追いかけ、次の画面が現れる",
     "向き: 昼→夜は左から右、夜→昼は左右反転"
    ],
    "en": [
     "Day → night → day, 2.35 s each. Four horizontal bands (height 52; blue, coral, yellow, mint) whose ends are slanted by 80 px.",
     "Cover: 0.38–1.0 s. Each band's leading edge travels from one side of the frame to the other. Bands are delayed by 14% of the phase each, and each uses cubic ease-in-out over 58% of the phase.",
     "At 1.0 s, when everything is covered, the scene underneath is swapped for the next one.",
     "Uncover: 1.12–1.75 s. Each band's trailing edge follows with the same delays and curve, exposing the next scene.",
     "Direction: left to right for day→night, mirrored for night→day."
    ]
   },
   "use": {
    "ja": "ブランドカラーの図形で場面を切り替えたいとき。章の区切りや話題の転換に。",
    "en": "Use it to change scenes with shapes in brand colours: chapter breaks, topic changes."
   },
   "tags": [
    "shape-transition",
    "transition",
    "wipe",
    "bands",
    "stripes",
    "cover",
    "scene-change"
   ]
  },
  {
   "id": "019",
   "pack": "motion",
   "no": "19",
   "slug": "liquid-transition",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "リキッドトランジション",
    "en": "Liquid transition"
   },
   "meaning": {
    "ja": "液体が流れ込んで切り替わる",
    "en": "Liquid flows in and replaces the scene"
   },
   "ask": {
    "ja": "ここはリキッドトランジションで。上から青いインクが垂れて画面を満たすように。",
    "en": "Use a liquid transition here: blue ink drips down from the top and fills the frame."
   },
   "summary": {
    "ja": "ペンキのような液体が上から垂れて流れ込み、次の画面になる。",
    "en": "Paint-like liquid drips down from the top and fills the frame, becoming the next scene."
   },
   "spec": {
    "ja": [
     "昼 → 夜 → 昼を2.35秒ずつ。液体は2層。どちらも上から下へ、easeInOut（2乗）",
     "1層目（単色。昼→夜は青、夜→昼はコーラル）: 0.35〜1.5秒。2層目（次の画面そのものを液体の形で切り抜く）: 0.7〜1.8秒",
     "液面は y = −110 から 画面下端+130 まで下がる。ふちは2つのsin波（振幅13pxと8px）で波打ち、波の大きさは途中で最大になる",
     "しずく7本（太さ30〜54px・先端は丸）を液面から垂らす。長さは 基準30〜110px × (0.25 + 0.9 × 波の強さ) で、途中で最大になる",
     "つながる質感: 形を白で描く → 7pxぼかす → 透明度をしきい値で切る → 色（または次の画面）を塗る"
    ],
    "en": [
     "Day → night → day, 2.35 s each. Two liquid layers, both moving top to bottom with quadratic ease-in-out.",
     "Layer 1 (flat colour: blue for day→night, coral for night→day): 0.35–1.5 s. Layer 2 (the next scene itself, clipped to the liquid shape): 0.7–1.8 s.",
     "The liquid front moves from y = −110 to 130 px below the bottom edge. Its edge waves with two sine waves (amplitudes 13 px and 8 px), strongest midway.",
     "Seven drips (30–54 px wide, round tips) hang from the front; length = base 30–110 px × (0.25 + 0.9 × wave strength), greatest midway.",
     "Merged look: draw the shape in white → blur 7 px → threshold the alpha → fill with the colour (or the next scene)."
    ]
   },
   "use": {
    "ja": "やわらかく有機的に場面を切り替えたいとき。食品・美容・クリエイティブ系の映像に。",
    "en": "Use it for a soft, organic scene change, for example in food, beauty or creative videos."
   },
   "tags": [
    "liquid",
    "transition",
    "drip",
    "paint",
    "goo",
    "fluid",
    "wipe",
    "scene-change"
   ]
  },
  {
   "id": "020",
   "pack": "motion",
   "no": "20",
   "slug": "zoom-through",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "ズームスルー",
    "en": "Zoom through"
   },
   "meaning": {
    "ja": "物の中へ突き抜けて次へ",
    "en": "Zooms into an object and passes through it into the next scene"
   },
   "ask": {
    "ja": "ロゴの「O」の穴へズームスルーして、次の場面へ。0.6秒で、加速しながら。",
    "en": "Zoom through the hole of the \"O\" in the logo into the next scene, 0.6 s, accelerating."
   },
   "summary": {
    "ja": "文字の「O」の穴へ突っ込んで、その先の画面へ抜ける。",
    "en": "The camera pushes into the hole of a letter O and comes out in the next scene."
   },
   "spec": {
    "ja": [
     "画面X（黄地に ZOOM）→ 画面Y（青地に GO!）→ 画面X を2.35秒ずつ",
     "今の画面を「O」の穴の中心（半径24.5）を基準に拡大する。最大倍率は穴が画面全体を覆う値の1.08倍（約14倍）",
     "倍率 = 最大倍率^p（指数で拡大。速さが一定に見える）",
     "p = 0.8 × easeIn（3乗・0.25〜1.2秒）+ 0.2 × easeOut（3乗・1.2〜1.65秒）。加速して突っ込み、最後に減速",
     "穴の中には次の画面を 1/最大倍率 に縮めて置く。拡大が終わるとちょうど等倍になり、そのまま次の画面に切り替わる"
    ],
    "en": [
     "Scene X (ZOOM on yellow) → scene Y (GO! on blue) → scene X, 2.35 s each.",
     "The current scene is scaled around the centre of an O's hole (radius 24.5). Maximum scale is 1.08× the value at which the hole covers the whole frame (about 14×).",
     "Scale = maxScale^p (exponential zoom, which reads as constant speed).",
     "p = 0.8 × cubic ease-in (0.25–1.2 s) + 0.2 × cubic ease-out (1.2–1.65 s): accelerate in, slow down at the end.",
     "Inside the hole the next scene is placed at 1/maxScale. When the zoom ends it is exactly at full size, and the view switches to the next scene."
    ]
   },
   "use": {
    "ja": "ロゴや文字の中へ入り込んで、勢いよく次の場面へ進みたいとき。",
    "en": "Use it to dive into a logo or letter and move to the next scene with momentum."
   },
   "tags": [
    "zoom",
    "zoom-through",
    "transition",
    "push-in",
    "scale",
    "tunnel",
    "scene-change"
   ]
  },
  {
   "id": "021",
   "pack": "motion",
   "no": "21",
   "slug": "flip",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "フリップ",
    "en": "Flip"
   },
   "meaning": {
    "ja": "カードのように裏返る",
    "en": "Turns over like a card to show the other side"
   },
   "ask": {
    "ja": "料金カードをフリップで裏返して、裏に詳細を出して。0.5秒で。",
    "en": "Flip the pricing card to show the details on its back, in 0.5 s."
   },
   "summary": {
    "ja": "カードが縦の軸で回って裏返り、裏の面が出る。",
    "en": "A card turns over around its vertical axis and shows its other side."
   },
   "spec": {
    "ja": [
     "カード（300×156・角丸22）。表（青・Q）⇄ 裏（黄・A）を2.35秒ずつ",
     "0.45〜1.5秒（1.05秒）で180°回す。backOut（s=1.5）で180°を少し行き過ぎてから戻る",
     "カードの幅 = 元の幅 × |cos θ|。90°を越えたところで面の絵を差し替える",
     "遠近感: カードを縦に細く切り、左右で高さを最大±20% × sin θ 変える（奥が低く、手前が高い）",
     "回転中は sin の山で8%拡大し6px浮かせる。面に暗い色を透明度 0.34 × |sin θ| で重ねる。床に楕円の影"
    ],
    "en": [
     "A card (300 × 156, radius 22). Front (blue, Q) ⇄ back (yellow, A), 2.35 s each.",
     "Rotates 180° at 0.45–1.5 s (1.05 s) with backOut (s = 1.5), going slightly past 180° and coming back.",
     "Card width = original width × |cos θ|. The face artwork is swapped as it passes 90°.",
     "Perspective: the card is drawn in thin vertical slices whose height varies by up to ±20% × sin θ from one side to the other (far side shorter, near side taller).",
     "During the turn it scales up 8% and lifts 6 px on a sine curve; a dark overlay with opacity 0.34 × |sin θ| shades the face. An elliptical shadow sits on the floor."
    ]
   },
   "use": {
    "ja": "問いと答え、ビフォーとアフターなど、表と裏の関係にある2つを見せたいとき。",
    "en": "Use it for two things that are sides of one another: question and answer, before and after."
   },
   "tags": [
    "flip",
    "card",
    "3d",
    "rotate",
    "turn",
    "reveal",
    "question-answer"
   ]
  },
  {
   "id": "022",
   "pack": "motion",
   "no": "22",
   "slug": "light-sweep",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "ライトスイープ",
    "en": "Light sweep"
   },
   "meaning": {
    "ja": "光が表面を横切る",
    "en": "A band of light crosses a surface"
   },
   "ask": {
    "ja": "ロゴが止まったあとに、ライトスイープを1回。左上から右下へ、弱めに。",
    "en": "After the logo settles, add one light sweep from top-left to bottom-right, subtle."
   },
   "summary": {
    "ja": "ロゴの表面を、光の帯が斜めに横切る。",
    "en": "A band of light crosses the surface of a logo badge at an angle."
   },
   "spec": {
    "ja": [
     "2.35秒で1回。バッジ（400×112・角丸28・青のグラデーション）の形で切り抜いた中だけ光を描く",
     "光の帯: 幅116pxの白いグラデーション（中央の透明度0.72、両端0）＋ 78px離れた幅12pxの細い帯（透明度0.5）。0.42rad（約24°）傾ける",
     "0.45〜1.5秒でバッジの左130px外から右130px外まで（660px）進む。easeInOut（2乗）",
     "きらめき: 1.38〜1.98秒、右上の角に4角の星。大きさ 30 × sin(πq) × (1 + 0.2(1 − q))、0.9rad回す",
     "バッジ自体は動かさない"
    ],
    "en": [
     "One sweep per 2.35 s. The light is drawn only inside a clip of the badge (400 × 112, radius 28, blue gradient).",
     "Light band: a 116 px wide white gradient (opacity 0.72 in the middle, 0 at the edges) plus a thin 12 px band (opacity 0.5) 78 px away, rotated 0.42 rad (about 24°).",
     "It moves from 130 px left of the badge to 130 px right of it (660 px) at 0.45–1.5 s, quadratic ease-in-out.",
     "Sparkle: a four-point star at the top-right corner at 1.38–1.98 s; size 30 × sin(πq) × (1 + 0.2(1 − q)), rotating 0.9 rad.",
     "The badge itself does not move."
    ]
   },
   "use": {
    "ja": "ロゴ・バッジ・ボタンに上質な印象を足したいとき。",
    "en": "Use it to give a logo, badge or button a premium finish."
   },
   "tags": [
    "light-sweep",
    "shine",
    "sheen",
    "glint",
    "highlight",
    "logo",
    "badge",
    "premium"
   ]
  },
  {
   "id": "023",
   "pack": "motion",
   "no": "23",
   "slug": "glitch",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "グリッチ",
    "en": "Glitch"
   },
   "meaning": {
    "ja": "映像がバグったように乱れる",
    "en": "The picture breaks up as if it were malfunctioning"
   },
   "ask": {
    "ja": "タイトルに一瞬だけグリッチを入れて。0.3秒、色ずれは弱めで、点滅はさせないで。",
    "en": "Add a brief glitch to the title: 0.3 s, a mild color split, no flashing."
   },
   "summary": {
    "ja": "文字が横にずれ、色がずれ、帯が走る。明るさの点滅はさせない。",
    "en": "Text slices shift sideways, colours split and small bars appear, with no brightness flashing."
   },
   "spec": {
    "ja": [
     "白い太字（104px）。4.7秒に2回乱れる: 0.55〜1.25秒（5コマ）と 2.9〜3.74秒（6コマ）。それ以外は静止",
     "1コマ0.14秒。コマごとに決め打ちの乱れを表示する（なめらかに動かさず、コマ送りで切り替える）",
     "色ずれ: コーラルの文字を左へ7〜16px・下へ2px、シアン（#22D3EE）の文字を右へ同じ量・上へ2px、白の文字を上に重ねる",
     "横ずれ: 高さ10〜35pxの横帯2〜4本（y=40〜150）を、左右どちらかへ18〜64pxずらす",
     "小さな色の帯3本（コーラル・シアン・黄、幅30〜120×高さ5〜12）をランダムな位置に置く",
     "背景の明るさは変えない（画面全体の点滅をしない）。乱数はシード固定"
    ],
    "en": [
     "White bold text (104 px). It glitches twice per 4.7 s: 0.55–1.25 s (5 steps) and 2.9–3.74 s (6 steps); otherwise it is still.",
     "Each step lasts 0.14 s and shows one fixed disturbance (stepped, not smoothly animated).",
     "Colour split: a coral copy shifted 7–16 px left and 2 px down, a cyan (#22D3EE) copy shifted the same amount right and 2 px up, with the white text on top.",
     "Slice shift: 2–4 horizontal strips (10–35 px tall, y 40–150) are displaced 18–64 px to the left or right.",
     "Three small colour bars (coral, cyan, yellow; 30–120 wide × 5–12 tall) at random positions.",
     "Background brightness never changes (no full-frame flashing). The random values use a fixed seed."
    ]
   },
   "use": {
    "ja": "デジタル感・エラー・不穏さを出したいとき。タイトルや場面転換のアクセントに。",
    "en": "Use it for a digital, error or uneasy feel, as an accent on titles and scene changes."
   },
   "tags": [
    "glitch",
    "rgb-split",
    "chromatic-aberration",
    "distortion",
    "digital",
    "error",
    "slice"
   ]
  },
  {
   "id": "024",
   "pack": "motion",
   "no": "24",
   "slug": "impact-shake",
   "category": "transitions-highlights",
   "width": 539,
   "height": 208,
   "cycle": 4.7,
   "name": {
    "ja": "インパクトシェイク",
    "en": "Impact shake"
   },
   "meaning": {
    "ja": "着地の衝撃で画面が揺れる",
    "en": "The whole frame shakes when something lands"
   },
   "ask": {
    "ja": "見出しがドンと落ちた瞬間に、インパクトシェイクを入れて。0.4秒で収まる程度に。",
    "en": "Add an impact shake when the headline lands; it should settle within 0.4 s."
   },
   "summary": {
    "ja": "重い見出しの板がドンと落ち、その衝撃で画面ごと揺れる。",
    "en": "A heavy headline slab drops with a thud and the whole frame shakes from the impact."
   },
   "spec": {
    "ja": [
     "2.35秒で1回（1回目は黄色の板、2回目はコーラルの板）。板は250×100・角丸18",
     "落下: 0.3〜0.62秒で画面上の外から床へ。easeIn（3乗）で加速。落下中は縦に1.12倍のびる",
     "0.62秒に着地。画面全体を1.1秒揺らす: 横 15px × e^(−5t) × sin(2π·5t)、縦 11px × e^(−5t) × cos(2π·6.5t)、傾き 0.02rad × e^(−5t) × sin(2π·5t + 0.6)",
     "板は着地後0.3秒、縦に最大22%つぶれて戻る（横はその分ひろがる。基準は底辺）",
     "背景の箱4つは0.03〜0.06秒遅れて最大24px跳ねる（0.5秒）。床から白い線6本と、ほこりの丸6個が0.55秒で広がって消える",
     "退場: 1.85〜2.2秒に板が上へ300px（backIn s=1.6）"
    ],
    "en": [
     "One drop per 2.35 s (a yellow slab first, then a coral one). The slab is 250 × 100, radius 18.",
     "Fall: 0.3–0.62 s from above the frame to the floor, cubic ease-in (accelerating). While falling it is stretched 1.12× vertically.",
     "Lands at 0.62 s. The whole frame shakes for 1.1 s: x 15 px × e^(−5t) × sin(2π·5t), y 11 px × e^(−5t) × cos(2π·6.5t), rotation 0.02 rad × e^(−5t) × sin(2π·5t + 0.6).",
     "For 0.3 s after landing the slab squashes vertically by up to 22% and recovers (it widens by the same amount; anchored at its base).",
     "Four background blocks hop up to 24 px, 0.03–0.06 s late, over 0.5 s. Six white lines and six dust puffs spread from the floor and fade within 0.55 s.",
     "Exit: the slab moves 300 px up at 1.85–2.2 s (backIn, s = 1.6)."
    ]
   },
   "use": {
    "ja": "重要な見出しや数字を、重さと衝撃で強く印象づけたいとき。",
    "en": "Use it to land an important headline or number with weight and force."
   },
   "tags": [
    "shake",
    "impact",
    "camera-shake",
    "slam",
    "drop",
    "thud",
    "headline",
    "emphasis"
   ]
  },
  {
   "id": "025",
   "pack": "camera",
   "no": "01",
   "slug": "pan",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "パン",
    "en": "Pan"
   },
   "meaning": {
    "ja": "カメラを横に振る",
    "en": "Pivot the camera left or right"
   },
   "ask": {
    "ja": "カメラの位置は固定で、街並みを左から右へゆっくりパン。5秒かけて。",
    "en": "Slow pan from left to right across the skyline, camera fixed in place, over 5 seconds."
   },
   "summary": {
    "ja": "カメラの位置は変えず、首を左から右へ振る。回転なので手前も奥も同じ量だけ横に流れる。",
    "en": "The camera stays in place and pivots from left to right; because it is a rotation, near and far layers slide sideways by the same amount."
   },
   "spec": {
    "ja": [
     "カメラ: 位置固定（高さ1.5m）、ヨーだけ -0.32rad → +0.32rad（-18° → +18°、計約37°）",
     "時間: 0.5秒から3.4秒まで2.9秒かけて回す。イージングは3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物（身長約1.8m）は正面8m先で動かない。画面上では右から左へ流れる",
     "視差なし: 山・建物・木・人物が同じ角度ぶん動く（焦点距離330px、539×208のカード）",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）",
     "右上に角度を整数の度で表示（-18° → +18°）"
    ],
    "en": [
     "Camera: position fixed (height 1.5 m); yaw only, -0.32 rad → +0.32 rad (-18° → +18°, about 37° in total)",
     "Timing: rotate from 0.5 s to 3.4 s (2.9 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: a person (about 1.8 m tall) stands still 8 m ahead and slides right-to-left in frame",
     "No parallax: mountains, buildings, trees and the person all shift by the same angle (focal length 330 px on a 539×208 card)",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)",
     "Top-right readout shows the angle in whole degrees (-18° → +18°)"
    ]
   },
   "use": {
    "ja": "横に広い場所を見せるとき、または視線を左右の別の対象へ移すとき。",
    "en": "To reveal a wide location or to shift attention from one side of the scene to the other."
   },
   "tags": [
    "pan",
    "panning",
    "yaw",
    "rotate",
    "horizontal",
    "camera move",
    "reveal"
   ]
  },
  {
   "id": "026",
   "pack": "camera",
   "no": "02",
   "slug": "tilt",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ティルト",
    "en": "Tilt"
   },
   "meaning": {
    "ja": "カメラを縦に振る",
    "en": "Pivot the camera up or down"
   },
   "ask": {
    "ja": "人物の足元から塔の先まで、ゆっくりティルトアップ。",
    "en": "Slow tilt up from the person's feet to the top of the tower."
   },
   "summary": {
    "ja": "カメラの位置は変えず、首を下から上へ振る。足元の人物から塔の先端まで見上げていく。",
    "en": "The camera stays in place and pivots upward, from a person at ground level up to the top of a tower."
   },
   "spec": {
    "ja": [
     "カメラ: 位置固定（高さ1.4m）、ピッチだけ -0.06rad → +0.36rad（-3° → +21°、計約24°）",
     "時間: 0.5秒から3.4秒まで2.9秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は7m先で動かない。その奥26mに高さ9.5mの塔（先端のアンテナは11.8mまで）",
     "画面上は全体が上から下へ流れ、人物は下へ切れていき、塔の上部と先端のアンテナが入ってくる",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）",
     "右上に角度を整数の度で表示（-3° → +21°）"
    ],
    "en": [
     "Camera: position fixed (height 1.4 m); pitch only, -0.06 rad → +0.36 rad (-3° → +21°, about 24° in total)",
     "Timing: 0.5 s to 3.4 s (2.9 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: a person stands still 7 m ahead; a 9.5 m tower (antenna tip at 11.8 m) stands 26 m away behind",
     "On screen everything slides downward: the person leaves at the bottom while the tower top and its antenna enter",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)",
     "Top-right readout shows the angle in whole degrees (-3° → +21°)"
    ]
   },
   "use": {
    "ja": "建物や人物の高さ・大きさを見せるとき。",
    "en": "To show the height or scale of a building or a person."
   },
   "tags": [
    "tilt",
    "tilt up",
    "pitch",
    "vertical",
    "look up",
    "camera move"
   ]
  },
  {
   "id": "027",
   "pack": "camera",
   "no": "03",
   "slug": "dolly-in",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ドリーイン",
    "en": "Dolly in"
   },
   "meaning": {
    "ja": "カメラごと被写体に近づく",
    "en": "Move the camera toward the subject"
   },
   "ask": {
    "ja": "人物の顔へゆっくりドリーイン。ズームではなく、カメラごと近づく。",
    "en": "Slow dolly in toward her face; move the camera, do not zoom."
   },
   "summary": {
    "ja": "カメラそのものが被写体へ前進する。手前の物ほど大きく速く流れ、奥の山はほとんど変わらない。",
    "en": "The camera itself moves toward the subject; near objects grow and pass quickly while the distant mountains barely change."
   },
   "spec": {
    "ja": [
     "カメラ: 前（奥行き方向）へ 0m → 5.8m 進む。高さ1.5m、向きと焦点距離（330px＝24mm表示）は固定",
     "時間: 0.5秒から3.4秒まで2.9秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は8m先で動かない。距離が8m → 2.2mになり、画面上の大きさは約3.6倍",
     "視差あり: 手前の杭（左1.5m・奥3.6m）と岩（右1.6m・奥4.8m）は途中で画面外へ抜ける。120m以上先の山はほぼ同じ大きさ",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）",
     "右上の表示は 24mm のまま変わらない（04 ズームインとの違い）"
    ],
    "en": [
     "Camera: moves forward (in depth) 0 m → 5.8 m; height 1.5 m, direction and focal length (330 px, shown as 24mm) fixed",
     "Timing: 0.5 s to 3.4 s (2.9 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: a person stands still 8 m ahead; distance goes 8 m → 2.2 m, so they appear about 3.6× larger",
     "Parallax: a foreground post (1.5 m left, 3.6 m deep) and a rock (1.6 m right, 4.8 m deep) pass out of frame; mountains 120 m+ away stay almost the same size",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)",
     "The top-right readout stays at 24mm (the difference from 04 Zoom in)"
    ]
   },
   "use": {
    "ja": "人物の感情や一点へ、空間の奥行きを感じさせながら寄るとき。",
    "en": "To move in on a person or detail while keeping a sense of depth."
   },
   "tags": [
    "dolly",
    "dolly in",
    "push in",
    "track in",
    "move forward",
    "parallax",
    "camera move"
   ]
  },
  {
   "id": "028",
   "pack": "camera",
   "no": "04",
   "slug": "zoom-in",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ズームイン",
    "en": "Zoom in"
   },
   "meaning": {
    "ja": "レンズで寄る（位置は動かない）",
    "en": "Magnify with the lens (camera stays put)"
   },
   "ask": {
    "ja": "カメラは動かさず、窓辺の人物へ3秒でズームイン。",
    "en": "The camera stays still; zoom in on the person at the window over 3 seconds."
   },
   "summary": {
    "ja": "カメラの位置は動かさず、レンズの焦点距離だけを伸ばす。画面全体が同じ比率で拡大する。",
    "en": "The camera does not move; only the focal length gets longer, so the whole picture enlarges by the same ratio."
   },
   "spec": {
    "ja": [
     "カメラ: 位置・向きは固定（高さ1.5m）。焦点距離だけ 330px → 1200px（24mm → 87mm表示、約3.6倍）",
     "倍率は指数補間: f = 330 × (8/2.2)^p。p は 0.5秒〜3.4秒（2.9秒）の3次イーズインアウト",
     "被写体: 人物は8m先で動かない。最終の大きさは 03 ドリーインと同じ約3.6倍",
     "視差なし: 手前の杭・岩、人物、建物、山がすべて同じ比率で大きくなる（重なり方が変わらない）",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）",
     "右上に焦点距離を mm で表示（24mm → 87mm）"
    ],
    "en": [
     "Camera: position and direction fixed (height 1.5 m); only the focal length changes, 330 px → 1200 px (shown as 24mm → 87mm, about 3.6×)",
     "Exponential interpolation: f = 330 × (8/2.2)^p, where p is a cubic ease-in-out from 0.5 s to 3.4 s (2.9 s)",
     "Subject: a person stands still 8 m ahead; the final size matches 03 Dolly in (about 3.6×)",
     "No parallax: the foreground post and rock, the person, buildings and mountains all scale by the same ratio (overlaps do not change)",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)",
     "Top-right readout shows the focal length in mm (24mm → 87mm)"
    ]
   },
   "use": {
    "ja": "その場から動かずに一点へ注目を集めるとき。ドリーインより平面的で観察する印象になる。",
    "en": "To direct attention to one point without moving the camera; it looks flatter and more observational than a dolly in."
   },
   "tags": [
    "zoom",
    "zoom in",
    "focal length",
    "lens",
    "magnify",
    "telephoto",
    "camera move"
   ]
  },
  {
   "id": "029",
   "pack": "camera",
   "no": "05",
   "slug": "tracking-shot",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "トラッキング",
    "en": "Tracking shot"
   },
   "meaning": {
    "ja": "被写体と並んで動く",
    "en": "Move along with the subject"
   },
   "ask": {
    "ja": "歩く人物を真横からトラッキング。同じ速さで並んで動く。",
    "en": "Tracking shot from the side, moving along with the walking person at the same speed."
   },
   "summary": {
    "ja": "歩く人物と同じ速さでカメラが真横に並走する。人物は画面中央のまま、手前の杭ほど速く後ろへ流れる。",
    "en": "The camera moves sideways at the same speed as a walking person; the person stays centred while nearer posts sweep past faster."
   },
   "spec": {
    "ja": [
     "カメラ: 右へ等速 1.7m/s で横移動（x = -4.0m → +4.0m、4.7秒）。高さ1.3m、向きは正面のまま。イージングなし",
     "被写体: 人物はカメラと同じ x を歩く（奥7.5m）。画面中央から動かない。脚と腕は sin(u×7)×0.42rad で振る",
     "視差: 奥4mに1.6m間隔で並ぶ杭が最も速く左へ流れ、木、建物（48m先）の順に遅くなり、山はほぼ動かない",
     "右上に「→ 1.7m/s」を表示",
     "くり返し: 4.7秒ごとに開始位置へ戻る（杭と地面の格子は継ぎ目が合うが、背景の建物と木は位置が飛ぶ）"
    ],
    "en": [
     "Camera: moves right at a constant 1.7 m/s (x = -4.0 m → +4.0 m in 4.7 s); height 1.3 m, facing straight ahead; no easing",
     "Subject: a person walks at the same x as the camera (7.5 m away) and stays in the centre of frame; legs and arms swing by sin(u×7)×0.42 rad",
     "Parallax: posts every 1.6 m at 4 m depth sweep left fastest, then trees, then buildings (48 m away); mountains hardly move",
     "Top-right readout shows \"→ 1.7m/s\"",
     "Repeat: jumps back to the start every 4.7 s (posts and ground grid line up at the seam; background buildings and trees jump)"
    ]
   },
   "use": {
    "ja": "歩く・走る人物に付いていき、移動している感じを保ったまま表情や動作を見せるとき。",
    "en": "To follow a walking or running subject and keep the sense of movement while showing their action."
   },
   "tags": [
    "tracking",
    "tracking shot",
    "follow",
    "truck",
    "lateral",
    "sideways",
    "parallax",
    "walk"
   ]
  },
  {
   "id": "030",
   "pack": "camera",
   "no": "06",
   "slug": "orbit-arc-shot",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "オービット",
    "en": "Orbit (Arc shot)"
   },
   "meaning": {
    "ja": "被写体の周りを回り込む",
    "en": "Circle around the subject"
   },
   "ask": {
    "ja": "立っている人物の周りを半周オービット。人物は画面の中央のまま。",
    "en": "Half orbit around the standing person, keeping them in the center of the frame."
   },
   "summary": {
    "ja": "被写体を中心に、カメラが円を描いて回り込む。人物は中央のまま、背景の木と建物が横に大きく流れる。",
    "en": "The camera travels on a circle around the subject; the person stays centred while the trees and buildings behind sweep sideways."
   },
   "spec": {
    "ja": [
     "カメラ: 人物（正面9m先）を中心とする半径6mの円周上を -0.95rad → +0.95rad（-54° → +54°、計約109°）移動",
     "向き: 常に中心を向く（ヨー = -角度）。高さ1.7m、ピッチ -0.07rad（約4°下向き）で固定",
     "時間: 0.5秒から3.6秒まで3.1秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は動かない。顔の白い点が角度に応じて横へずれ、回り込みが分かる。足元に半径1.3mの点線の円",
     "背景: 半径10mに12本の木を等間隔で並べ、回り込むと人物の後ろを横切る",
     "戻り: 3.6〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード。右上に角度（-54° → +54°）"
    ],
    "en": [
     "Camera: travels on a circle of radius 6 m centred on the person (9 m ahead), from -0.95 rad → +0.95 rad (-54° → +54°, about 109° in total)",
     "Direction: always faces the centre (yaw = -angle); height 1.7 m, pitch fixed at -0.07 rad (about 4° down)",
     "Timing: 0.5 s to 3.6 s (3.1 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: the person does not move; a white dot on the face shifts sideways with the angle; a dashed circle of radius 1.3 m marks the ground",
     "Background: 12 trees evenly spaced on a 10 m radius cross behind the person as the camera moves round",
     "Return: hold 3.6–4.2 s, then cross-fade back over the last 0.5 s; top-right readout shows the angle (-54° → +54°)"
    ]
   },
   "use": {
    "ja": "人物や商品を立体的に見せたいとき、登場や決めの場面を強調するとき。",
    "en": "To show a person or product in three dimensions, or to emphasise an entrance or a key moment."
   },
   "tags": [
    "orbit",
    "arc shot",
    "circle",
    "360",
    "rotate around",
    "revolve",
    "camera move"
   ]
  },
  {
   "id": "031",
   "pack": "camera",
   "no": "07",
   "slug": "crane-up",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "クレーンアップ",
    "en": "Crane up"
   },
   "meaning": {
    "ja": "カメラが上へ昇っていく",
    "en": "Lift the camera up"
   },
   "ask": {
    "ja": "人物の目の高さから、街全体が見える高さまでクレーンアップ。",
    "en": "Crane up from eye level until the whole town comes into view."
   },
   "summary": {
    "ja": "カメラが真上へ上昇しながら下を向き、人物を見下ろす構図になる。",
    "en": "The camera rises while tilting down until it looks down on the person."
   },
   "spec": {
    "ja": [
     "カメラ: 高さ 1.4m → 9m へ上昇。同時に前へ 0m → 1.5m 進む",
     "向き: 人物（8m先）を画面に収めるよう下へ振る。ピッチ = -0.86 × atan2(高さ-1.0, 8-前進量)。約 -2.5° → -44°",
     "時間: 0.5秒から3.4秒まで2.9秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は動かない。上昇につれて小さくなり、地面の格子が画面いっぱいに広がって地平線は上へ抜ける",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）",
     "右上に高さを表示（↑ 1.4m → ↑ 9.0m）"
    ],
    "en": [
     "Camera: rises from 1.4 m to 9 m while moving forward 0 m → 1.5 m",
     "Direction: tilts down to keep the person (8 m ahead) in frame; pitch = -0.86 × atan2(height - 1.0, 8 - forward), about -2.5° → -44°",
     "Timing: 0.5 s to 3.4 s (2.9 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: the person does not move; they get smaller as the camera rises, the ground grid fills the frame and the horizon leaves at the top",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)",
     "Top-right readout shows the height (↑ 1.4m → ↑ 9.0m)"
    ]
   },
   "use": {
    "ja": "場面の終わりに人物から離れて全体を見せるとき、場所の広さを明かすとき。",
    "en": "To pull away from a person at the end of a scene or to reveal how large the location is."
   },
   "tags": [
    "crane",
    "crane up",
    "jib",
    "boom up",
    "rise",
    "high angle",
    "camera move"
   ]
  },
  {
   "id": "032",
   "pack": "camera",
   "no": "08",
   "slug": "dolly-zoom-vertigo",
   "category": "camera-movement",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ドリーズーム",
    "en": "Dolly zoom (Vertigo)"
   },
   "meaning": {
    "ja": "人物はそのまま背景だけ伸び縮み",
    "en": "Subject stays, background warps"
   },
   "ask": {
    "ja": "気づいた瞬間の顔にドリーズーム。人物の大きさは変えず、背景だけが遠ざかる。",
    "en": "Dolly zoom on his face at the moment he realizes: he stays the same size while the background stretches away."
   },
   "summary": {
    "ja": "カメラを引きながら同じ比率でズームする。人物の大きさは変わらず、背景だけが迫ってくる。",
    "en": "The camera pulls back while zooming in by the same ratio; the person keeps the same size and only the background closes in."
   },
   "spec": {
    "ja": [
     "カメラ: 人物（8m先）との距離 d を 3.2m → 8m に広げる（4.8m後退）。高さ1.3m",
     "焦点距離: f = 330 × d/8 px。132px → 330px（10mm → 24mm表示）。距離と焦点距離の比を一定に保つ",
     "時間: 0.5秒から3.4秒まで2.9秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は動かず、画面上の高さも一定。頭（1.8m）と足元に幅160pxの青い点線を引き、大きさが変わらないことを示す",
     "背景: 建物（48m先）は約2.2倍、山は約2.4倍に拡大して人物の後ろに迫る。人物より手前の地面は逆に縮む",
     "戻り: 3.4〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード（1周4.7秒）"
    ],
    "en": [
     "Camera: distance d to the person (8 m ahead) widens from 3.2 m → 8 m (a 4.8 m pull-back); height 1.3 m",
     "Focal length: f = 330 × d/8 px, i.e. 132 px → 330 px (shown as 10mm → 24mm), keeping distance ÷ focal length constant",
     "Timing: 0.5 s to 3.4 s (2.9 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: the person does not move and keeps the same height in frame; blue dashed lines 160 px wide at head (1.8 m) and feet show the size is constant",
     "Background: buildings (48 m away) grow about 2.2× and mountains about 2.4×, closing in behind the person, while the ground in front of the person shrinks",
     "Return: hold 3.4–4.2 s, then cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)"
    ]
   },
   "use": {
    "ja": "人物が何かに気づいた瞬間や、不安・動揺を映像で表すとき。",
    "en": "For a moment of realisation, or to show unease or shock visually."
   },
   "tags": [
    "dolly zoom",
    "vertigo",
    "zolly",
    "push pull",
    "background stretch",
    "unease",
    "camera move"
   ]
  },
  {
   "id": "033",
   "pack": "camera",
   "no": "09",
   "slug": "rack-focus",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ラックフォーカス",
    "en": "Rack focus"
   },
   "meaning": {
    "ja": "ピントを手前と奥のあいだで送る",
    "en": "Shift focus between near and far"
   },
   "ask": {
    "ja": "手前のカップから奥の人物へ、1秒でラックフォーカス。",
    "en": "Rack focus from the cup in the foreground to the person behind it, in 1 second."
   },
   "summary": {
    "ja": "カメラは動かさず、ピントを手前の花から奥の人物へ送る。ぼけている側が入れ替わる。",
    "en": "The camera does not move; focus shifts from a flower in the foreground to a person behind it, swapping which one is blurred."
   },
   "spec": {
    "ja": [
     "カメラ: 位置・向き・焦点距離すべて固定（高さ1.1m）。変わるのはぼかしの量だけ",
     "ぼかし: 手前の花（左0.75m・奥2m）を 0px → 7px、人物と背景（人物は右0.9m・奥9m）を 6px → 0px。地面の格子は背景の0.6倍",
     "時間: 1.0秒から2.6秒まで1.6秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "ピント枠: 青い四隅の枠が花から人物へ直線移動し、一辺の半分が 46px → 30px に縮む",
     "被写体: 花も人物も動かない",
     "戻り: 2.6〜4.2秒は止め、最後の0.5秒で開始状態へクロスフェード。右上にピント距離（◎ 2m → ◎ 9m）"
    ],
    "en": [
     "Camera: position, direction and focal length all fixed (height 1.1 m); only the blur amounts change",
     "Blur: the foreground flower (0.75 m left, 2 m away) goes 0 px → 7 px; the person and background (person 0.9 m right, 9 m away) go 6 px → 0 px; the ground grid uses 0.6× the background blur",
     "Timing: 1.0 s to 2.6 s (1.6 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Focus marker: blue corner brackets travel in a straight line from the flower to the person, half-width shrinking 46 px → 30 px",
     "Subject: neither the flower nor the person moves",
     "Return: hold 2.6–4.2 s, then cross-fade back over the last 0.5 s; top-right readout shows focus distance (◎ 2m → ◎ 9m)"
    ]
   },
   "use": {
    "ja": "カットを割らずに、見てほしい対象を手前から奥（または逆）へ移すとき。",
    "en": "To move attention from foreground to background (or back) without cutting."
   },
   "tags": [
    "rack focus",
    "focus pull",
    "pull focus",
    "depth of field",
    "blur",
    "bokeh",
    "foreground"
   ]
  },
  {
   "id": "034",
   "pack": "camera",
   "no": "10",
   "slug": "handheld",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "手持ち",
    "en": "Handheld"
   },
   "meaning": {
    "ja": "手で持って撮ったように小さく揺らす（ハンドヘルド）",
    "en": "A slight shake, as if the camera were held by hand"
   },
   "ask": {
    "ja": "手持ちで、歩く人物の後ろをついていく。揺れは弱めに。",
    "en": "Handheld shot following behind the walking person, with only a slight shake."
   },
   "summary": {
    "ja": "三脚を使わず手で持ったような、小さく不規則な揺れを画面全体に加える。",
    "en": "Adds a small, irregular shake to the whole frame, as if the camera were held by hand instead of on a tripod."
   },
   "spec": {
    "ja": [
     "カメラ: 位置はほぼ固定。ヨー・ピッチ・ロール・高さに、周期の違う正弦波を重ねた揺れを足す（T = 2π×u/4.7）",
     "ヨー(rad) = 0.016·sin(3T) + 0.008·sin(7T+1) + 0.004·sin(13T+2)。最大で約±1.6°",
     "ピッチ(rad) = 0.012·sin(4T+2) + 0.006·sin(9T+0.5) + 0.003·sin(17T+1.2)。最大で約±1.2°",
     "ロール(rad) = 0.02·sin(5T+1) + 0.008·sin(11T+3)。最大で約±1.6°。高さ = 1.5 + 0.03·sin(6T) m",
     "被写体: 人物は6.5m先で動かない。イージングや止めはなく揺れ続ける",
     "係数がすべて整数倍なので4.7秒で継ぎ目なく戻る。右上に「HANDHELD」"
    ],
    "en": [
     "Camera: position almost fixed; yaw, pitch, roll and height each get a sum of sine waves with different periods (T = 2π×u/4.7)",
     "Yaw (rad) = 0.016·sin(3T) + 0.008·sin(7T+1) + 0.004·sin(13T+2), at most about ±1.6°",
     "Pitch (rad) = 0.012·sin(4T+2) + 0.006·sin(9T+0.5) + 0.003·sin(17T+1.2), at most about ±1.2°",
     "Roll (rad) = 0.02·sin(5T+1) + 0.008·sin(11T+3), at most about ±1.6°; height = 1.5 + 0.03·sin(6T) m",
     "Subject: a person stands still 6.5 m ahead; the shake runs continuously with no easing or hold",
     "All multipliers are integers, so it loops seamlessly every 4.7 s; top-right readout shows \"HANDHELD\""
    ]
   },
   "use": {
    "ja": "ドキュメンタリーのような臨場感や、その場にいる感じを出すとき。",
    "en": "To give a documentary feel or the sense of being present in the scene."
   },
   "tags": [
    "handheld",
    "camera shake",
    "shaky",
    "documentary",
    "wobble",
    "noise",
    "realism"
   ]
  },
  {
   "id": "035",
   "pack": "camera",
   "no": "11",
   "slug": "fpv-drone-shot",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "FPV",
    "en": "FPV drone shot"
   },
   "meaning": {
    "ja": "ドローンで突き進む疾走感",
    "en": "Fast, immersive fly-through"
   },
   "ask": {
    "ja": "FPVドローンで、森の木々の間をすり抜けて川の上へ出る。",
    "en": "FPV drone shot weaving between the trees and out over the river."
   },
   "summary": {
    "ja": "並木の間を低空・高速で前進しながら、機体を左右に傾けて蛇行する一人称視点。",
    "en": "A first-person view flying low and fast between two rows of trees, banking from side to side."
   },
   "spec": {
    "ja": [
     "カメラ: 前へ等速 14m/s（50km/h表示）。イージングなしで進み続ける。ピッチは -0.05rad で固定",
     "蛇行（T = 2π×u/4.7、4.7秒に2往復）: 横位置 0.6·sin(2T-0.4) m、高さ 1.4 + 0.5·sin(2T) m",
     "傾き: ロール 0.22·sin(2T+0.6) rad（約±12.6°）、ヨー 0.05·sin(2T) rad（約±2.9°）",
     "被写体なし。左右3.6mの位置に高さ4.2mの木を8m間隔で並べ、左右は4mずらす。次々に手前へ流れる",
     "スピード線: 中心から放射状に10本、長さ約32〜76px（横方向ほど長い）、半透明の灰色。外側へ流れて循環する",
     "止め・戻りのクロスフェードなし（4.7秒ごとに木の並びの位相がずれて切り替わる）"
    ],
    "en": [
     "Camera: flies forward at a constant 14 m/s (shown as 50km/h) with no easing; pitch fixed at -0.05 rad",
     "Weave (T = 2π×u/4.7, two swings per 4.7 s): sideways 0.6·sin(2T-0.4) m, height 1.4 + 0.5·sin(2T) m",
     "Bank: roll 0.22·sin(2T+0.6) rad (about ±12.6°), yaw 0.05·sin(2T) rad (about ±2.9°)",
     "No subject. Trees 4.2 m tall stand 3.6 m to each side, every 8 m, the two rows offset by 4 m, and rush toward the camera",
     "Speed lines: 10 radial strokes about 32–76 px long (longer toward the sides) in translucent grey, flowing outward and recycling",
     "No hold and no cross-fade reset (the tree rows shift phase when it restarts every 4.7 s)"
    ]
   },
   "use": {
    "ja": "スピード感と没入感を出すとき。場所の中を一気に通り抜けて見せるとき。",
    "en": "For speed and immersion, or to fly through a location in one continuous move."
   },
   "tags": [
    "fpv",
    "drone",
    "fly through",
    "first person",
    "banking",
    "speed",
    "aerial"
   ]
  },
  {
   "id": "036",
   "pack": "camera",
   "no": "12",
   "slug": "dutch-angle",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ダッチアングル",
    "en": "Dutch angle"
   },
   "meaning": {
    "ja": "画面を斜めに傾ける",
    "en": "Tilt the frame diagonally"
   },
   "ask": {
    "ja": "不安な場面なので、ダッチアングルで15度ほど傾けて。",
    "en": "Use a Dutch angle of about 15 degrees for this uneasy scene."
   },
   "summary": {
    "ja": "水平だったカメラを光軸まわりに傾け、地平線を斜めにしたまま止める。",
    "en": "A level camera rolls around its lens axis and holds with the horizon on a diagonal."
   },
   "spec": {
    "ja": [
     "カメラ: 位置固定（高さ1.5m）。ロールだけ 0 → 0.36rad（約21°）。画面中央を軸に全体が回る",
     "時間: 0.6秒から2.2秒まで1.6秒。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "被写体: 人物は7m先で動かない。地平線・建物・人物がそろって同じ角度だけ傾く",
     "止め: 2.2〜4.2秒は傾いたまま保つ（傾けた構図そのものを見せる時間）",
     "戻り: 最後の0.5秒で水平の開始状態へクロスフェード（1周4.7秒）",
     "右上に角度を表示（∠ 0° → ∠ 21°）"
    ],
    "en": [
     "Camera: position fixed (height 1.5 m); roll only, 0 → 0.36 rad (about 21°); the whole picture turns around the frame centre",
     "Timing: 0.6 s to 2.2 s (1.6 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Subject: a person stands still 7 m ahead; horizon, buildings and person all tilt by the same angle",
     "Hold: stays tilted from 2.2 s to 4.2 s (time to read the tilted composition itself)",
     "Return: cross-fade back to the level start over the last 0.5 s (one pass = 4.7 s)",
     "Top-right readout shows the angle (∠ 0° → ∠ 21°)"
    ]
   },
   "use": {
    "ja": "不安・緊張・違和感を画面で表すとき。",
    "en": "To express unease, tension or the feeling that something is wrong."
   },
   "tags": [
    "dutch angle",
    "dutch tilt",
    "canted angle",
    "oblique",
    "roll",
    "tension",
    "tilted horizon"
   ]
  },
  {
   "id": "037",
   "pack": "camera",
   "no": "13",
   "slug": "slow-motion",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "スローモーション",
    "en": "Slow motion"
   },
   "meaning": {
    "ja": "動きをゆっくり見せる",
    "en": "Play the action slower"
   },
   "ask": {
    "ja": "水しぶきが上がる瞬間を、スローモーションで。",
    "en": "Show the moment of the splash in slow motion."
   },
   "summary": {
    "ja": "固定カメラの前で人物がゆっくり跳び上がり、葉もゆっくり落ちる。動き全体を引き伸ばして見せる。",
    "en": "In front of a fixed camera a person rises and falls slowly through a jump while leaves drift down slowly; the whole action is stretched out."
   },
   "spec": {
    "ja": [
     "カメラ: 完全に固定（高さ1.3m）。動くのは被写体だけ",
     "被写体: 人物（7m先）が1回の跳躍に3.8秒かける（0.5秒〜4.3秒）。高さ = 4q(1-q)×1.1m の放物線、頂点1.1m。q は等速",
     "跳んでいる間は両腕を上げる。跳ぶ前の0.5秒と着地後の0.4秒は立ったまま",
     "葉: 9枚が高さ3.4mから地面まで4.7秒かけて落ち、回転する。位相を1/9ずつずらして循環",
     "右上に「120fps ×0.25」を表示（4倍に引き伸ばした再生という設定）",
     "止め・クロスフェードなし。4.7秒で継ぎ目なくくり返す"
    ],
    "en": [
     "Camera: completely fixed (height 1.3 m); only the subject moves",
     "Subject: a person 7 m away takes 3.8 s for one jump (0.5 s to 4.3 s); height = 4q(1-q)×1.1 m, a parabola peaking at 1.1 m, with q linear in time",
     "Both arms are raised while airborne; the person stands still for 0.5 s before the jump and 0.4 s after landing",
     "Leaves: 9 leaves fall from 3.4 m to the ground over 4.7 s while rotating, each offset by 1/9 of the cycle",
     "Top-right readout shows \"120fps ×0.25\" (playback stretched 4×)",
     "No hold and no cross-fade; loops seamlessly every 4.7 s"
    ]
   },
   "use": {
    "ja": "一瞬の動きや表情をじっくり見せたいとき、感情の山場を強調するとき。",
    "en": "To let viewers study a brief action or expression, or to emphasise an emotional peak."
   },
   "tags": [
    "slow motion",
    "slow-mo",
    "slomo",
    "high frame rate",
    "120fps",
    "time stretch",
    "jump"
   ]
  },
  {
   "id": "038",
   "pack": "camera",
   "no": "14",
   "slug": "speed-ramp",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "スピードランプ",
    "en": "Speed ramp"
   },
   "meaning": {
    "ja": "速い→遅いと速さを変える",
    "en": "Change speed mid-shot"
   },
   "ask": {
    "ja": "ジャンプの頂点だけ遅くなるスピードランプ。前後は通常の速さで。",
    "en": "Speed ramp: normal speed, slowing at the top of the jump, then back to normal."
   },
   "summary": {
    "ja": "1つのショットの途中で再生速度を速い状態から遅い状態へ滑らかに変える。左下のグラフが速度を示す。",
    "en": "Within one shot the playback speed changes smoothly from fast to slow; a graph at bottom left shows the speed."
   },
   "spec": {
    "ja": [
     "カメラ: 完全に固定（高さ1.3m）。変わるのは再生速度だけ",
     "再生速度: 2.4倍 → 0.25倍。切り替えは1.2秒から1.9秒までの0.7秒、2次のイーズインアウト（cubic-bezier(0.45,0,0.55,1) 相当）",
     "被写体: 人物（8m先）が左6mから右へ走る。位置 x = -6 + 映像時間×2.0 m。速い区間で一気に近づく",
     "跳躍: x が -1.5m〜2.5m の間で放物線、頂点0.99m、両腕を上げる。約0.94秒で踏み切り、滞空の大半をスローで見せて約3.68秒で着地",
     "グラフ: 左下に幅120×高さ40pxの速度曲線と現在位置の青い点（半径5px）",
     "戻り: 4.2秒で止め、最後の0.5秒で開始状態へクロスフェード。右上に倍率（×2.4 → ×0.3）"
    ],
    "en": [
     "Camera: completely fixed (height 1.3 m); only the playback speed changes",
     "Playback speed: 2.4× → 0.25×; the change takes 0.7 s (1.2 s to 1.9 s) with a quadratic ease-in-out (about cubic-bezier(0.45,0,0.55,1))",
     "Subject: a person 8 m away runs from 6 m left toward the right; x = -6 + footage time × 2.0 m; they close in quickly during the fast section",
     "Jump: a parabola while x is between -1.5 m and 2.5 m, peak 0.99 m, arms raised; take-off at about 0.94 s, most of the airtime plays in slow motion, landing at about 3.68 s",
     "Graph: a 120×40 px speed curve at bottom left with a blue dot (radius 5 px) at the current time",
     "Return: stops at 4.2 s, then cross-fades back over the last 0.5 s; top-right readout shows the rate (×2.4 → ×0.3)"
    ]
   },
   "use": {
    "ja": "動きの見せ場だけをスローにして、前後はテンポよく進めたいとき。",
    "en": "To slow down only the key part of an action while keeping the lead-in quick."
   },
   "tags": [
    "speed ramp",
    "time remap",
    "ramping",
    "fast to slow",
    "variable speed",
    "velocity"
   ]
  },
  {
   "id": "039",
   "pack": "camera",
   "no": "15",
   "slug": "time-lapse",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "タイムラプス",
    "en": "Time-lapse"
   },
   "meaning": {
    "ja": "長い時間を早送りで見せる",
    "en": "Compress hours into seconds"
   },
   "ask": {
    "ja": "夕方から夜まで、街の灯りがともっていくタイムラプス。",
    "en": "Time-lapse of the city from dusk to night as the lights come on."
   },
   "summary": {
    "ja": "固定カメラのまま、朝6時から夕方18時までを数秒に縮める。太陽・雲・人・影が早送りで動く。",
    "en": "With a fixed camera, 06:00 to 18:00 is compressed into a few seconds; sun, clouds, people and shadows move in fast forward."
   },
   "spec": {
    "ja": [
     "カメラ: 完全に固定（高さ1.6m、ピッチ +0.08rad＝約5°上向き）",
     "時間: 0.4秒から4.1秒まで3.7秒で12時間ぶん進める。3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "太陽: 角度 a = -1.25rad → +1.25rad の弧を左から右へ。位置は (sin a×120, cos a×60 - 8) m、奥170m",
     "雲3つ: 右へ合計140m流れ、80mごとに循環。人影7つ: 左右18mの幅をそれぞれ6回横切る（奇数番と偶数番は逆向き）",
     "建物の影: 太陽と反対側へ伸び、太陽の動きに合わせて向きが振れる（半透明の灰色）",
     "戻り: 最後の0.5秒で開始状態へクロスフェード。右上の時計は 06:00 → 18:00 を10分刻みで表示"
    ],
    "en": [
     "Camera: completely fixed (height 1.6 m, pitch +0.08 rad, about 5° up)",
     "Timing: 12 hours pass in 3.7 s (0.4 s to 4.1 s), cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "Sun: travels left to right along an arc, angle a = -1.25 rad → +1.25 rad; position (sin a×120, cos a×60 - 8) m at 170 m depth",
     "Three clouds drift 140 m to the right in total, wrapping every 80 m; seven small figures each cross an 18 m width 6 times (odd and even ones in opposite directions)",
     "Building shadows fall away from the sun and swing as it moves (translucent grey)",
     "Return: cross-fade back to the start over the last 0.5 s; the top-right clock runs 06:00 → 18:00 in 10-minute steps"
    ]
   },
   "use": {
    "ja": "長い時間の経過や、街・空・作業の変化を短く見せるとき。",
    "en": "To show a long stretch of time, or how a city, sky or task changes, in a short clip."
   },
   "tags": [
    "time-lapse",
    "timelapse",
    "fast forward",
    "time compression",
    "sun",
    "clouds",
    "day to night"
   ]
  },
  {
   "id": "040",
   "pack": "camera",
   "no": "16",
   "slug": "freeze-frame",
   "category": "shooting-style-time",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "フリーズフレーム",
    "en": "Freeze frame"
   },
   "meaning": {
    "ja": "動きを一瞬止める",
    "en": "Pause the action for a beat"
   },
   "ask": {
    "ja": "振り向いた瞬間でフリーズフレーム。1秒止めて、名前を出す。",
    "en": "Freeze frame at the moment she turns around; hold for 1 second and show her name."
   },
   "summary": {
    "ja": "跳び上がった人物が頂点に来た瞬間に映像を止め、1.4秒後に続きから再開する。",
    "en": "The picture stops at the moment a jumping person reaches the top, then resumes from the same frame 1.4 s later."
   },
   "spec": {
    "ja": [
     "カメラ: 完全に固定（高さ1.3m）。止まるのは映像の時間",
     "停止: 1.6秒で止め、3.0秒で再開（1.4秒間）。映像時間は 0〜1.6秒は等速、停止中は1.6秒のまま、再開後は u-1.4",
     "被写体: 人物（7m先）の跳躍は映像時間0.6〜2.6秒の放物線、頂点1.1m。停止位置は頂点ちょうど（進み50%）",
     "停止中は落ち葉9枚も止まる。葉の速さは 13 スローモーションの1.5倍",
     "停止の印: 太さ5pxの青い枠と、下中央の一時停止マーク（68×40pxの白い角丸に青い縦棒2本）。出入りは0.12秒のフェード",
     "右上に停止中だけ「FREEZE」を表示。戻りのクロスフェードなし"
    ],
    "en": [
     "Camera: completely fixed (height 1.3 m); what stops is the footage time",
     "Freeze: stops at 1.6 s and resumes at 3.0 s (1.4 s); footage time runs normally for 0–1.6 s, stays at 1.6 s while frozen, then continues as u-1.4",
     "Subject: the jump of a person 7 m away is a parabola over footage time 0.6–2.6 s, peak 1.1 m; the freeze lands exactly on the peak (50% through)",
     "Nine falling leaves also stop during the freeze; they fall 1.5× as fast as in 13 Slow motion",
     "Freeze markers: a 5 px blue border and a pause icon at bottom centre (two blue bars on a 68×40 px white rounded box), fading in and out over 0.12 s",
     "Top-right readout shows \"FREEZE\" only while frozen; no cross-fade reset"
    ]
   },
   "use": {
    "ja": "決定的な瞬間を強調するとき、止めた画に名前や説明のテロップを載せるとき。",
    "en": "To emphasise a decisive moment, or to pause so a name or caption can be placed over the frame."
   },
   "tags": [
    "freeze frame",
    "still frame",
    "pause",
    "hold",
    "stop motion",
    "highlight"
   ]
  },
  {
   "id": "041",
   "pack": "camera",
   "no": "17",
   "slug": "jump-cut",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ジャンプカット",
    "en": "Jump cut"
   },
   "meaning": {
    "ja": "同じ画角のまま時間を飛ばす",
    "en": "Same framing, skip ahead in time"
   },
   "ask": {
    "ja": "同じ画角のままジャンプカットでつないで、準備の様子をテンポよく見せる。",
    "en": "Use jump cuts from the same framing to move quickly through the preparation."
   },
   "summary": {
    "ja": "カメラの位置も画角も同じまま、人物の位置と時刻だけが飛ぶ。同じ場面の中で時間を省く切り方。",
    "en": "Camera position and framing stay the same while the person's position and the clock jump; time is skipped inside one scene."
   },
   "spec": {
    "ja": [
     "つなぎ方: つなぎの効果なしの直結（0フレーム）。5ショットを0.94秒ずつ（4.7秒÷5）",
     "カメラ: 全ショット同じ位置・同じ画角（高さ1.4m、正面向き）。背景は1pxも動かない",
     "変わるもの: 人物（7m先）の横位置が -2.2m → 1.4m → -0.4m → 2.4m → 0.6m と飛ぶ。2・4番目は両腕を上げた姿勢",
     "各ショットの中では人物は動かない（位置と姿勢の差だけで飛びを見せる）",
     "右上の時計: 10:02 → 10:17 → 10:41 → 11:06 → 11:30。同じ場所で時間が飛んだことを示す",
     "5番目から1番目へも直結で戻る"
    ],
    "en": [
     "Join: a straight cut with no effect (0 frames); 5 shots of 0.94 s each (4.7 s ÷ 5)",
     "Camera: identical position and framing in every shot (height 1.4 m, facing forward); the background does not move by a pixel",
     "What changes: the person (7 m away) jumps in sideways position, -2.2 m → 1.4 m → -0.4 m → 2.4 m → 0.6 m; in shots 2 and 4 both arms are raised",
     "Within each shot the person is still (the jump is shown only by the difference in position and pose)",
     "Top-right clock: 10:02 → 10:17 → 10:41 → 11:06 → 11:30, showing that time was skipped in the same place",
     "Shot 5 cuts straight back to shot 1"
    ]
   },
   "use": {
    "ja": "話や作業の間を詰めてテンポを上げるとき、時間の経過を短く示すとき。",
    "en": "To tighten pauses in talk or work and raise the pace, or to show time passing quickly."
   },
   "tags": [
    "jump cut",
    "cut",
    "time skip",
    "same framing",
    "vlog",
    "ellipsis",
    "edit"
   ]
  },
  {
   "id": "042",
   "pack": "camera",
   "no": "18",
   "slug": "match-cut",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "マッチカット",
    "en": "Match cut"
   },
   "meaning": {
    "ja": "形や動きをそろえて場面を変える",
    "en": "Cut on a matching shape or motion"
   },
   "ask": {
    "ja": "丸いコーヒーカップから、同じ位置にある満月へマッチカット。",
    "en": "Match cut from the round coffee cup to a full moon in the same position."
   },
   "summary": {
    "ja": "投げ上げたボールが、次のカットでは同じ位置・同じ大きさの太陽になる。形をそろえて別の場面へつなぐ。",
    "en": "A thrown ball becomes, in the next shot, a sun at the same position and size; two different scenes are joined on a matching shape."
   },
   "spec": {
    "ja": [
     "つなぎ方: 2.3秒で直結（0フレーム）。前後で青い円の位置（中心から右120px・上46px）と半径17pxを一致させる",
     "前の絵（0〜2.3秒）: 固定カメラ（高さ1.4m）。人物（左1.2m・奥7m）が0.5秒から両腕を上げてボールを投げる。3次のイーズアウト（cubic-bezier(0.33,1,0.68,1) 相当）",
     "ボール: 人物の頭上（高さ2.3m）から一致点へ移動。半径 5px → 17px、途中は最大30px上へふくらむ弧",
     "後の絵（2.3〜4.7秒）: 別の場所（建物なし・高さ1.2m）。同じ位置の青い円が太陽になり、2.4秒かけて14px下がる",
     "目印: 半径26pxの青い点線の円を、カットの前後0.7秒だけフェードで表示",
     "右上に「SHOT 1」→「SHOT 2」。4.7秒でSHOT 1へ直結で戻る"
    ],
    "en": [
     "Join: a straight cut at 2.3 s (0 frames); the blue circle has the same position (120 px right, 46 px above centre) and radius 17 px on both sides",
     "Outgoing shot (0–2.3 s): fixed camera (height 1.4 m); a person (1.2 m left, 7 m away) throws a ball from 0.5 s, cubic ease-out (about cubic-bezier(0.33,1,0.68,1))",
     "Ball: travels from above the person's head (2.3 m high) to the match point; radius 5 px → 17 px, on an arc bulging up to 30 px",
     "Incoming shot (2.3–4.7 s): a different place (no buildings, height 1.2 m); the blue circle in the same spot is now the sun and sinks 14 px over 2.4 s",
     "Marker: a blue dashed circle of radius 26 px fades in and out within 0.7 s either side of the cut",
     "Top-right readout shows \"SHOT 1\" → \"SHOT 2\"; at 4.7 s it cuts straight back to SHOT 1"
    ]
   },
   "use": {
    "ja": "時間や場所が大きく離れた2つの場面を、形や動きの共通点で意味を持たせてつなぐとき。",
    "en": "To link two scenes far apart in time or place through a shared shape or motion."
   },
   "tags": [
    "match cut",
    "graphic match",
    "shape match",
    "cut",
    "transition",
    "edit"
   ]
  },
  {
   "id": "043",
   "pack": "camera",
   "no": "19",
   "slug": "whip-pan",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ホイップパン",
    "en": "Whip pan"
   },
   "meaning": {
    "ja": "素早く振ってブレで次へ",
    "en": "Fast pan blur into the next shot"
   },
   "ask": {
    "ja": "ホイップパンで右へ素早く振って、次の場所へつなぐ。",
    "en": "Whip pan to the right and land in the next location."
   },
   "summary": {
    "ja": "カメラを素早く横に振り、流れてぼけた映像の中で次の場面に入れ替える。",
    "en": "The camera swings sideways very fast and the next scene is swapped in during the streaked blur."
   },
   "spec": {
    "ja": [
     "つなぎ方: 1.7秒から2.5秒までの0.8秒。前半0.4秒は前の絵を振り出し、後半0.4秒は次の絵が振り込んで止まる",
     "前半: 前の絵のヨーを 0 → +0.45rad（約26°）、2次のイーズインアウト。後半: 次の絵のヨーを -0.45rad → 0、同じイージング",
     "入れ替え: 進み50%の瞬間に直結で差し替える。ぶれが最大なので切れ目は見えない",
     "ぶれ: 前後1.6フレームぶん（30fps）の範囲を9枚描いて平均する",
     "カメラ: 高さ1.4m。振っている間以外は固定。被写体（Aは人物、Bは車と街）は動かない",
     "4.7秒ごとに A→B、B→A を交互に行う（往復で9.4秒）。右上に「A → B」「B → A」"
    ],
    "en": [
     "Join: 0.8 s, from 1.7 s to 2.5 s; in the first 0.4 s the outgoing shot swings away, in the last 0.4 s the incoming shot swings in and settles",
     "First half: outgoing yaw 0 → +0.45 rad (about 26°), quadratic ease-in-out; second half: incoming yaw -0.45 rad → 0, same easing",
     "Swap: a straight replacement at the 50% point, hidden because the blur is at its strongest",
     "Blur: 9 renders spread over ±1.6 frames (at 30 fps) are averaged",
     "Camera: height 1.4 m, fixed except during the swing; the subjects (a person in A, a car and city in B) do not move",
     "Alternates A→B and B→A every 4.7 s (9.4 s for the round trip); top-right readout shows \"A → B\" / \"B → A\""
    ]
   },
   "use": {
    "ja": "勢いを保ったまま場所や話題を切り替えるとき。",
    "en": "To change location or topic while keeping the energy up."
   },
   "tags": [
    "whip pan",
    "swish pan",
    "motion blur",
    "fast pan",
    "transition",
    "energy"
   ]
  },
  {
   "id": "044",
   "pack": "camera",
   "no": "20",
   "slug": "cross-dissolve",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "クロスディゾルブ",
    "en": "Cross dissolve"
   },
   "meaning": {
    "ja": "前後の映像を重ねて溶かす",
    "en": "Blend one shot into the next"
   },
   "ask": {
    "ja": "朝の部屋から夜の同じ部屋へ、1秒のクロスディゾルブ。",
    "en": "Cross dissolve from the room in the morning to the same room at night, 1 second."
   },
   "summary": {
    "ja": "前の絵に次の絵を重ね、不透明度を上げていって入れ替える。途中は2つの絵が透けて重なる。",
    "en": "The next picture is laid over the current one and its opacity rises until it takes over; both show through each other midway."
   },
   "spec": {
    "ja": [
     "つなぎ方: 1.5秒から3.0秒までの1.5秒。次の絵の不透明度を 0 → 100%",
     "イージング: 2次のイーズインアウト（cubic-bezier(0.45,0,0.55,1) 相当）。中間の2.25秒で50%",
     "前の絵は不透明のまま下に置き、その上に次の絵を重ねる（前の絵を先に消さない）",
     "カメラ: 両方の絵とも固定（Aは高さ1.4m、Bは高さ1.6m・ピッチ+0.1rad）。被写体も動かない",
     "0〜1.5秒は前の絵だけ、3.0〜4.7秒は次の絵だけを見せる",
     "4.7秒ごとに A→B、B→A を交互に行う（往復で9.4秒）。右上に「A → B」「B → A」"
    ],
    "en": [
     "Join: 1.5 s, from 1.5 s to 3.0 s; the incoming picture's opacity goes 0 → 100%",
     "Easing: quadratic ease-in-out (about cubic-bezier(0.45,0,0.55,1)); 50% at 2.25 s",
     "The outgoing picture stays fully opaque underneath and the incoming one is drawn on top (the outgoing one is not faded out first)",
     "Camera: fixed in both pictures (A at height 1.4 m; B at height 1.6 m, pitch +0.1 rad); the subjects do not move either",
     "Only the outgoing picture shows for 0–1.5 s, only the incoming one for 3.0–4.7 s",
     "Alternates A→B and B→A every 4.7 s (9.4 s for the round trip); top-right readout shows \"A → B\" / \"B → A\""
    ]
   },
   "use": {
    "ja": "時間の経過や場所の移動を穏やかに伝えるとき、回想へ入るとき。",
    "en": "To convey a gentle passage of time or change of place, or to move into a memory."
   },
   "tags": [
    "cross dissolve",
    "dissolve",
    "crossfade",
    "fade",
    "opacity",
    "blend",
    "transition"
   ]
  },
  {
   "id": "045",
   "pack": "camera",
   "no": "21",
   "slug": "wipe",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "ワイプ",
    "en": "Wipe"
   },
   "meaning": {
    "ja": "境目が横切って画面が入れ替わる",
    "en": "A moving edge replaces the shot"
   },
   "ask": {
    "ja": "左から右へのワイプで、次の場面に入れ替える。",
    "en": "Wipe from left to right into the next scene."
   },
   "summary": {
    "ja": "縦の境界線が左から右へ動き、通過した側から次の絵に置き換わる。",
    "en": "A vertical edge moves from left to right and the next picture replaces the current one behind it."
   },
   "spec": {
    "ja": [
     "つなぎ方: 1.7秒から2.8秒までの1.1秒。境界線が左端の外（x=-4px）から右端の外（x=543px）へ移動",
     "イージング: 3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当）",
     "境界線の左側に次の絵、右側に前の絵を表示。どちらの絵も位置は動かさない（押し出しではなく切り抜き）",
     "境界: 幅4pxの青い縦線を、移動中だけ表示",
     "カメラ: 両方の絵とも固定。被写体も動かない",
     "4.7秒ごとに A→B、B→A を交互に行う（往復で9.4秒）。右上に「A → B」「B → A」"
    ],
    "en": [
     "Join: 1.1 s, from 1.7 s to 2.8 s; the edge travels from just outside the left side (x = -4 px) to just outside the right side (x = 543 px)",
     "Easing: cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1))",
     "The incoming picture shows left of the edge and the outgoing one right of it; neither picture moves (a reveal by clipping, not a push)",
     "Edge: a 4 px blue vertical line, visible only while it is moving",
     "Camera: fixed in both pictures; the subjects do not move either",
     "Alternates A→B and B→A every 4.7 s (9.4 s for the round trip); top-right readout shows \"A → B\" / \"B → A\""
    ]
   },
   "use": {
    "ja": "場面や話題の区切りをはっきり見せたいとき、比較の前後を切り替えるとき。",
    "en": "To mark a clear change of scene or topic, or to switch between the two sides of a comparison."
   },
   "tags": [
    "wipe",
    "linear wipe",
    "reveal",
    "clip",
    "edge",
    "left to right",
    "transition"
   ]
  },
  {
   "id": "046",
   "pack": "camera",
   "no": "22",
   "slug": "smash-cut",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "スマッシュカット",
    "en": "Smash cut"
   },
   "meaning": {
    "ja": "対照的な場面へ前触れなく切り替える",
    "en": "Abrupt cut to a contrasting scene"
   },
   "ask": {
    "ja": "静かな寝室から、騒がしい交差点へスマッシュカット。",
    "en": "Smash cut from the quiet bedroom to a noisy intersection."
   },
   "summary": {
    "ja": "人物が寝ている静かな場面から、前触れなく激しい場面へ直結で切り替える。音量メーターも一気に上がる。",
    "en": "A quiet scene of a person asleep cuts with no warning straight to an intense one; the volume meter jumps at the same moment."
   },
   "spec": {
    "ja": [
     "つなぎ方: 2.4秒で直結（0フレーム）。つなぎの効果は入れず、前後の落差で見せる",
     "前の絵（0〜2.4秒）: 固定カメラ（高さ1.2m、焦点距離330px）。7m先で横になった人物、「z」の文字が3つ浮かんで消える。音量メーターは8段中ほぼ0〜1段（0.08±0.04）",
     "後の絵（2.4〜4.2秒）: 焦点距離を2.6倍（858px）にして寄り、ロール -0.12rad（約-7°）で傾ける。人物は両腕を上げ、放射状の青い線18本",
     "後の絵の揺れ: ロール ±0.03rad（毎秒約6回）と ヨー ±0.006rad（毎秒約8回）で振る。音量メーターは0.85±0.15でほぼ満杯",
     "戻り: 最後の0.5秒で静かな絵へクロスフェード（2次のイーズインアウト）",
     "右上に「♪ 静か」→「♪ 大音量」"
    ],
    "en": [
     "Join: a straight cut at 2.4 s (0 frames); no transition effect, the contrast does the work",
     "Outgoing shot (0–2.4 s): fixed camera (height 1.2 m, focal length 330 px); a person lying down 7 m away, three \"z\" letters float up and fade; volume meter at about 0–1 of 8 bars (0.08±0.04)",
     "Incoming shot (2.4–4.2 s): focal length 2.6× (858 px) for a tight framing, rolled -0.12 rad (about -7°); the person has both arms raised, with 18 radial blue lines",
     "Shake in the incoming shot: roll ±0.03 rad (about 6 cycles per second) and yaw ±0.006 rad (about 8 per second); volume meter at 0.85±0.15, nearly full",
     "Return: cross-fade back to the quiet shot over the last 0.5 s (quadratic ease-in-out)",
     "Top-right readout shows \"♪ 静か\" (quiet) → \"♪ 大音量\" (loud)"
    ]
   },
   "use": {
    "ja": "笑いや驚きを作るとき。静と動、予想と現実の落差を一瞬で見せるとき。",
    "en": "For comedy or shock, showing in an instant the gap between calm and chaos or between expectation and reality."
   },
   "tags": [
    "smash cut",
    "hard cut",
    "abrupt",
    "contrast",
    "quiet to loud",
    "comedy",
    "transition"
   ]
  },
  {
   "id": "047",
   "pack": "camera",
   "no": "23",
   "slug": "j-cut",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "Jカット",
    "en": "J-cut"
   },
   "meaning": {
    "ja": "次の場面の音が先に聞こえる",
    "en": "Next scene's audio starts first"
   },
   "ask": {
    "ja": "Jカットで、次の場面の波の音を先に聞かせてから、海の映像に切り替える。",
    "en": "J-cut: let the sound of waves from the next scene start before cutting to the sea."
   },
   "summary": {
    "ja": "映像が切り替わる前に、次の場面の音が先に入る。上に映像、下に映像と音のタイムラインを表示する。",
    "en": "The next scene's audio starts before the picture changes; the picture is shown on top with video and audio timelines below."
   },
   "spec": {
    "ja": [
     "つなぎ方: 映像は直結。音だけ映像より先に次の場面（B）へ切り替える。ずれはタイムライン全体の20%（0.72秒）",
     "再生ヘッド: 0.4秒から4.0秒まで3.6秒かけて等速で左から右へ。音の切り替えは35%（約1.66秒）、映像の切り替えは55%（約2.38秒）",
     "ずれている区間（35〜55%）は、映像がAのまま音だけBになる。区間を薄い青の帯と青い点線2本で強調",
     "画面構成: 上134pxが映像（固定カメラ・被写体は動かない）、下74pxが「映像」「音」の2段のタイムライン（A＝灰色、B＝薄い青、音の段に波形）",
     "表示: 映像の左下に「映像A / 映像B」、右下に今流れている音（「♪ Aの音」灰色 →「♪ Bの音」青）",
     "戻り: 最後の0.5秒で開始状態へクロスフェード（1周4.7秒）"
    ],
    "en": [
     "Join: the picture is a straight cut; only the audio switches to the next scene (B) before the picture does. The offset is 20% of the timeline (0.72 s)",
     "Playhead: moves left to right at constant speed over 3.6 s (0.4 s to 4.0 s); audio switches at 35% (about 1.66 s), picture at 55% (about 2.38 s)",
     "In the offset section (35–55%) the picture is still A while the audio is already B; the section is marked with a pale blue band and two blue dashed lines",
     "Layout: the top 134 px is the picture (fixed camera, subjects do not move); the bottom 74 px holds two timeline rows, video and audio (A grey, B pale blue, waveform on the audio row)",
     "Labels: \"映像A / 映像B\" (video A / B) at bottom left of the picture; the audio now playing at bottom right (\"♪ Aの音\" grey → \"♪ Bの音\" blue)",
     "Return: cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)"
    ]
   },
   "use": {
    "ja": "次の場面への期待を先に作りたいとき、会話や場面転換を自然につなぐとき。",
    "en": "To build anticipation for the next scene, or to make a change of scene or speaker feel natural."
   },
   "tags": [
    "j-cut",
    "j cut",
    "split edit",
    "audio lead",
    "sound first",
    "audio transition",
    "edit"
   ]
  },
  {
   "id": "048",
   "pack": "camera",
   "no": "24",
   "slug": "l-cut",
   "category": "transitions",
   "width": 539,
   "height": 208,
   "cycle": 9.4,
   "name": {
    "ja": "Lカット",
    "en": "L-cut"
   },
   "meaning": {
    "ja": "前の場面の音が後まで残る",
    "en": "Previous scene's audio carries over"
   },
   "ask": {
    "ja": "Lカットで、彼女の話し声を残したまま、聞き手の顔に切り替える。",
    "en": "L-cut: keep her voice going while cutting to the listener's face."
   },
   "summary": {
    "ja": "映像が次の場面に切り替わったあとも、前の場面の音がしばらく残る。上に映像、下に映像と音のタイムラインを表示する。",
    "en": "The previous scene's audio carries on for a while after the picture has changed; the picture is shown on top with video and audio timelines below."
   },
   "spec": {
    "ja": [
     "つなぎ方: 映像は直結。音だけ映像より後に次の場面（B）へ切り替える。ずれはタイムライン全体の20%（0.72秒）",
     "再生ヘッド: 0.4秒から4.0秒まで3.6秒かけて等速で左から右へ。映像の切り替えは55%（約2.38秒）、音の切り替えは75%（約3.10秒）",
     "ずれている区間（55〜75%）は、映像がBになっても音はAのまま。区間を薄い青の帯と青い点線2本で強調",
     "画面構成: 上134pxが映像（固定カメラ・被写体は動かない）、下74pxが「映像」「音」の2段のタイムライン（A＝灰色、B＝薄い青、音の段に波形）",
     "表示: 映像の左下に「映像A / 映像B」、右下に今流れている音（「♪ Aの音」灰色 →「♪ Bの音」青）",
     "戻り: 最後の0.5秒で開始状態へクロスフェード（1周4.7秒）"
    ],
    "en": [
     "Join: the picture is a straight cut; only the audio switches to the next scene (B) after the picture does. The offset is 20% of the timeline (0.72 s)",
     "Playhead: moves left to right at constant speed over 3.6 s (0.4 s to 4.0 s); picture switches at 55% (about 2.38 s), audio at 75% (about 3.10 s)",
     "In the offset section (55–75%) the picture is already B while the audio is still A; the section is marked with a pale blue band and two blue dashed lines",
     "Layout: the top 134 px is the picture (fixed camera, subjects do not move); the bottom 74 px holds two timeline rows, video and audio (A grey, B pale blue, waveform on the audio row)",
     "Labels: \"映像A / 映像B\" (video A / B) at bottom left of the picture; the audio now playing at bottom right (\"♪ Aの音\" grey → \"♪ Bの音\" blue)",
     "Return: cross-fade back to the start over the last 0.5 s (one pass = 4.7 s)"
    ]
   },
   "use": {
    "ja": "話している人の声を残したまま、聞き手の反応や関連する映像を見せるとき。",
    "en": "To keep a speaker's voice running while showing the listener's reaction or related footage."
   },
   "tags": [
    "l-cut",
    "l cut",
    "split edit",
    "audio lag",
    "sound carries over",
    "audio transition",
    "edit"
   ]
  },
  {
   "id": "049",
   "pack": "ui",
   "no": "01",
   "slug": "modal-dialog",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "モーダル",
    "en": "Modal dialog"
   },
   "meaning": {
    "ja": "画面を暗くして中央に窓が出る",
    "en": "A window opens in the middle while the page behind dims"
   },
   "ask": {
    "ja": "削除ボタンを押したらモーダルで確認を出して。背景は4割ほど暗くし、0.3秒で少し拡大しながらフェードイン。",
    "en": "When the delete button is pressed, show a confirmation in a modal dialog. Dim the page about 40% and fade it in over 0.3 s with a slight scale-up."
   },
   "summary": {
    "ja": "「開く」ボタンを押すと画面全体が暗くなり、中央に小窓が少し拡大しながら出る。×を押すと閉じる。",
    "en": "Clicking \"Open\" dims the whole page and a small window scales up slightly into the centre; clicking × closes it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。カーソルが0.95秒に左下の「開く」ボタン（120×36）へ着き、1.0秒にクリック",
     "開く量 a: 1.0〜1.32秒に easeOutCubic で 0→1。全面に rgba(18,20,28) の幕を不透明度 0.42×a で敷く",
     "窓: 白 280×140・角丸12を (271, 97) 中心に置き、影 blur 24・下へ8・濃さ0.25。拡大率 0.9+0.1×a、不透明度 a",
     "窓の中: 見出しの太線・本文2行・右下に青いボタン 88×30・右上に×",
     "閉じる: カーソルが3.0秒に×へ移り3.3秒にクリック。a に (1 − easeInOutCubic(3.3〜3.58秒)) を掛けて消す"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. The cursor reaches the \"Open\" button (120×36, lower left) at 0.95 s and clicks at 1.0 s.",
     "Open amount a: 0→1 over 1.0–1.32 s with easeOutCubic. A full-card scrim rgba(18,20,28) at opacity 0.42·a.",
     "Window: white 280×140, radius 12, centred at (271, 97), shadow blur 24, offset y 8, alpha 0.25. Scale 0.9 + 0.1·a, opacity a.",
     "Inside: a bold title bar, two text lines, a blue 88×30 button at lower right and × at top right.",
     "Close: the cursor moves to × by 3.0 s and clicks at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.58 s)."
    ]
   },
   "use": {
    "ja": "確認・入力など、今の作業を止めて1つのことに集中させたいとき。",
    "en": "Use it when the user must stop and deal with one thing, such as a confirmation or a short form."
   },
   "tags": [
    "modal",
    "modal-dialog",
    "dialog",
    "popup",
    "overlay",
    "backdrop",
    "lightbox",
    "confirm"
   ]
  },
  {
   "id": "050",
   "pack": "ui",
   "no": "02",
   "slug": "drawer",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ドロワー",
    "en": "Drawer (Off-canvas)"
   },
   "meaning": {
    "ja": "横からメニューが引き出される",
    "en": "A menu panel slides in from the side of the screen"
   },
   "ask": {
    "ja": "メニューボタンを押したら左からドロワーを出して。幅は画面の4割、0.4秒で引き出し、背景は少し暗く。",
    "en": "Open a drawer from the left when the menu button is pressed: 40% of the screen wide, sliding in over 0.4 s, with the page slightly dimmed."
   },
   "summary": {
    "ja": "「メニュー」を押すと左から縦長のパネルが引き出され、外側を押すと戻る。",
    "en": "Clicking \"Menu\" slides a tall panel in from the left; clicking outside slides it back."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。カーソルが左上の「メニュー」ボタン（110×34）を1.0秒にクリック",
     "開く量 a: 1.0〜1.38秒に easeOutCubic で 0→1。全面に rgba(18,20,28) の幕を不透明度 0.36×a",
     "パネル: 白・幅210・カードの高さいっぱい。x = −210 + 210×a で左端から出る。影 blur 22・濃さ0.25",
     "パネルの中: 上に丸アイコン（半径14）と名前、下に32px間隔で4行のメニュー。1行目は薄い青の帯で選択中",
     "閉じる: カーソルがパネルの外 (420, 120) を3.3秒にクリック。a に (1 − easeInOutCubic(3.3〜3.65秒)) を掛けて左へ戻す"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. The cursor clicks the \"Menu\" button (110×34, top left) at 1.0 s.",
     "Open amount a: 0→1 over 1.0–1.38 s with easeOutCubic. Full-card scrim rgba(18,20,28) at opacity 0.36·a.",
     "Panel: white, 210 wide, full card height, x = −210 + 210·a so it slides in from the left edge. Shadow blur 22, alpha 0.25.",
     "Inside: an avatar (radius 14) and name at the top, then four menu rows 32 px apart; the first row is selected with a light-blue band.",
     "Close: the cursor clicks outside at (420, 120) at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.65 s) and the panel slides back."
    ]
   },
   "use": {
    "ja": "スマホの全体メニューや、絞り込み条件など、場所を取る操作を横に隠しておきたいとき。",
    "en": "Use it to keep navigation or filters off screen until needed, especially on mobile."
   },
   "tags": [
    "drawer",
    "off-canvas",
    "offcanvas",
    "side-menu",
    "navigation-drawer",
    "sheet",
    "sidebar",
    "slide-in"
   ]
  },
  {
   "id": "051",
   "pack": "ui",
   "no": "03",
   "slug": "bottom-sheet",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ボトムシート",
    "en": "Bottom sheet"
   },
   "meaning": {
    "ja": "下からパネルがせり上がる",
    "en": "A panel slides up from the bottom of the screen"
   },
   "ask": {
    "ja": "「詳細を見る」を押したらボトムシートで詳細を出して。高さは画面の4割、0.4秒でせり上げ、下へ引くと閉じる。",
    "en": "Show the details in a bottom sheet when \"View details\" is tapped: 40% of the screen tall, rising over 0.4 s, closing when dragged down."
   },
   "summary": {
    "ja": "指で「詳細を見る」を押すと下からパネルがせり上がり、上端のつまみを下へ引くと閉じる。",
    "en": "A finger taps \"View details\" and a panel rises from the bottom; dragging its handle down closes it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。指（半径17の半透明の丸＋白い縁）が下中央の「詳細を見る」（170×36の青い角丸）を1.0秒に押す",
     "開く量: 1.05〜1.45秒に easeOutCubic で 0→1。全面に rgba(18,20,28) の幕を不透明度 0.36×a",
     "シート: 白・高さ136・上の角丸18。上端 y = 191 − 136×a。影 blur 22・上へ4。上端中央につまみ 52×6",
     "シートの中: 見出しの太線と、アイコン（26×26）付きの2行",
     "閉じる: 指が2.75秒につまみ (271, 68) に乗り、3.0〜3.6秒に下へ引く。a に (1 − easeInOutCubic(3.0〜3.6秒)) を掛け、シートが指と一緒に下へ消える"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A finger (semi-transparent circle, radius 17, white rim) taps the \"View details\" pill (170×36, bottom centre) at 1.0 s.",
     "Open amount: 0→1 over 1.05–1.45 s with easeOutCubic. Full-card scrim rgba(18,20,28) at opacity 0.36·a.",
     "Sheet: white, 136 tall, top corners radius 18, top edge at y = 191 − 136·a. Shadow blur 22, offset y −4. A 52×6 grab handle at top centre.",
     "Inside: a bold title bar and two rows with 26×26 icons.",
     "Close: the finger lands on the handle (271, 68) at 2.75 s and drags down over 3.0–3.6 s; a is multiplied by (1 − easeInOutCubic over 3.0–3.6 s), so the sheet follows the finger off the bottom."
    ]
   },
   "use": {
    "ja": "スマホで、今の画面を残したまま詳細や選択肢を出したいとき。",
    "en": "Use it on mobile to show details or choices while keeping the current screen in view."
   },
   "tags": [
    "bottom-sheet",
    "sheet",
    "modal-sheet",
    "mobile",
    "slide-up",
    "drag-to-dismiss",
    "panel"
   ]
  },
  {
   "id": "052",
   "pack": "ui",
   "no": "04",
   "slug": "accordion",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "アコーディオン",
    "en": "Accordion"
   },
   "meaning": {
    "ja": "押すと中身が開閉する",
    "en": "Click a heading to show or hide its content"
   },
   "ask": {
    "ja": "よくある質問をアコーディオンにして。押した項目だけ0.35秒で開き、矢印を180度回して。",
    "en": "Make the FAQ an accordion: the clicked item opens over 0.35 s and its arrow turns 180°."
   },
   "summary": {
    "ja": "3段の見出しのうち1段目を押すと下に本文が開き、下の段が押し下げられる。もう一度押すと閉じる。",
    "en": "Clicking the first of three headings opens its content and pushes the rows below down; clicking again closes it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。3段の見出し（幅494・高さ34・角丸8・間隔6）。右端に下向きの矢印",
     "カーソルが0.95秒に1段目に着き、1.0秒と3.3秒にクリック",
     "開く量 ex: 1.0〜1.35秒に easeInOutCubic で 0→1、3.3〜3.62秒に同じく 1→0",
     "1段目の高さを 34 → 92（+58×ex）に伸ばし、下の段をその分押し下げる。本文2行は枠の中に切り抜いて不透明度 ex で出す",
     "開いている間、矢印は 180°×ex 回り、枠は薄い青・見出しは青になる"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Three headings (494 wide, 34 tall, radius 8, gap 6) with a down chevron at the right.",
     "The cursor reaches the first heading at 0.95 s and clicks at 1.0 s and 3.3 s.",
     "Open amount ex: 0→1 over 1.0–1.35 s with easeInOutCubic, then 1→0 over 3.3–3.62 s.",
     "The first row grows from 34 to 92 tall (+58·ex) and pushes the rows below down; its two content lines are clipped to the row and fade in with opacity ex.",
     "While open, the chevron rotates 180°·ex, the border turns light blue and the heading blue."
    ]
   },
   "use": {
    "ja": "FAQや詳細な説明など、見出しだけ並べて中身は必要な人にだけ見せたいとき。",
    "en": "Use it for FAQs or long details where people scan the headings and open only what they need."
   },
   "tags": [
    "accordion",
    "collapsible",
    "expand",
    "collapse",
    "disclosure",
    "faq",
    "details"
   ]
  },
  {
   "id": "053",
   "pack": "ui",
   "no": "05",
   "slug": "dropdown-menu",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ドロップダウン",
    "en": "Dropdown (select)"
   },
   "meaning": {
    "ja": "押すと選択肢が下に広がる",
    "en": "Click a field to drop a list of options below it"
   },
   "ask": {
    "ja": "都道府県の入力欄をドロップダウンにして。押したら0.25秒で選択肢を下に開き、選んだら閉じて値を入れて。",
    "en": "Make the prefecture field a dropdown: open the options below it in 0.25 s and close it with the value filled in once one is picked."
   },
   "summary": {
    "ja": "入力欄を押すと下に4つの選択肢が開き、「名古屋」を選ぶと閉じて欄に入る。",
    "en": "Clicking the field opens four options below it; picking \"Nagoya\" closes the list and fills the field."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。入力欄 260×38（角丸8）に「選択してください」と右端の矢印。カーソルが1.0秒にクリック",
     "開く量: 1.0〜1.25秒に easeOutCubic で 0→1。一覧（白 260×112・影 blur 18）が不透明度とともに上から6px下りて出る。矢印は180°回り、枠は青2px",
     "一覧は26px間隔の4行（東京・大阪・名古屋・福岡）。カーソルが下りるにつれ1.55秒から大阪、1.95秒から名古屋の行を薄い青で強調",
     "2.3秒に名古屋をクリック: 一覧は2.3〜2.45秒に (1 − easeInOutCubic) で閉じ、プレースホルダーは2.2〜2.3秒に消え、「名古屋」が2.32〜2.42秒に出る",
     "戻し: 名古屋は3.9〜4.08秒に消え、プレースホルダーが4.1〜4.3秒に戻る（文字を重ねない）"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A 260×38 field (radius 8) shows a placeholder and a chevron; the cursor clicks it at 1.0 s.",
     "Open amount: 0→1 over 1.0–1.25 s with easeOutCubic. The list (white 260×112, shadow blur 18) fades in while dropping 6 px. The chevron turns 180° and the field border becomes 2 px blue.",
     "Four options 26 px apart (Tokyo, Osaka, Nagoya, Fukuoka in Japanese). As the cursor moves down, Osaka is highlighted light blue from 1.55 s and Nagoya from 1.95 s.",
     "Click on Nagoya at 2.3 s: the list closes over 2.3–2.45 s (1 − easeInOutCubic); the placeholder fades out over 2.2–2.3 s and \"Nagoya\" fades in over 2.32–2.42 s.",
     "Reset: Nagoya fades out over 3.9–4.08 s, then the placeholder returns over 4.1–4.3 s, so the two texts never overlap."
    ]
   },
   "use": {
    "ja": "フォームで、決まった候補の中から1つを選ばせたいとき。",
    "en": "Use it in a form when people pick one value from a fixed list."
   },
   "tags": [
    "dropdown",
    "dropdown-menu",
    "select",
    "picker",
    "combobox",
    "options",
    "form"
   ]
  },
  {
   "id": "054",
   "pack": "ui",
   "no": "06",
   "slug": "tooltip",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ツールチップ",
    "en": "Tooltip"
   },
   "meaning": {
    "ja": "乗せると小さな説明が出る",
    "en": "Hover over something to show a short label"
   },
   "ask": {
    "ja": "「?」アイコンにツールチップを付けて。カーソルを乗せて0.2秒で上に説明を出し、離れたら消して。",
    "en": "Add a tooltip to the \"?\" icon: show the note above it 0.2 s after hover, and hide it when the cursor leaves."
   },
   "summary": {
    "ja": "カーソルを「?」に乗せると、上に黒い吹き出しで短い説明が出る。離れると消える。",
    "en": "Hovering over a \"?\" icon shows a short note in a dark bubble above it; it disappears when the cursor leaves."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。見出しの横に「?」（半径13の青い丸枠）を (196, 121) に置く",
     "カーソルは押さずに乗せるだけ: 1.05秒に「?」へ着き、3.15秒まで留まり、4.1秒にカードの外へ出る",
     "出る量 a: 1.15〜1.35秒に easeOutCubic で 0→1。不透明度 a で、6px下から所定の位置へ上がる",
     "吹き出し: #26282c の 184×36・角丸8、上端 y 64。下に幅16・高さ8の三角で「?」を指す。白い15pxの文字「小さな説明が出る」",
     "消える: 3.25〜3.45秒に直線で 1→0"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A \"?\" icon (blue ring, radius 13) at (196, 121) next to a label.",
     "The cursor only hovers, no click: it arrives on \"?\" at 1.05 s, stays until 3.15 s and leaves the card by 4.1 s.",
     "Show amount a: 0→1 over 1.15–1.35 s with easeOutCubic; opacity a, rising 6 px into place.",
     "Bubble: #26282c, 184×36, radius 8, top at y 64, with a 16-wide, 8-tall triangle pointing down at the icon; white 15 px text.",
     "Hide: linear 1→0 over 3.25–3.45 s."
    ]
   },
   "use": {
    "ja": "アイコンや略語など、見ればすぐ分かる補足を1行だけ添えたいとき。",
    "en": "Use it to add a one-line hint to an icon or abbreviation without taking space on the page."
   },
   "tags": [
    "tooltip",
    "hint",
    "hover",
    "help",
    "info",
    "title"
   ]
  },
  {
   "id": "055",
   "pack": "ui",
   "no": "07",
   "slug": "popover",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ポップオーバー",
    "en": "Popover"
   },
   "meaning": {
    "ja": "押すと吹き出しの小窓が出る",
    "en": "Click a button to open a small panel pointing at it"
   },
   "ask": {
    "ja": "「詳細」ボタンにポップオーバーを付けて。押したら右に吹き出しの小窓を0.3秒で出し、OKで閉じて。",
    "en": "Attach a popover to the \"Details\" button: clicking opens a small panel to its right over 0.3 s, and OK closes it."
   },
   "summary": {
    "ja": "「詳細」を押すと右に、三角でボタンを指す白い小窓が出る。小窓のOKを押すと閉じる。",
    "en": "Clicking \"Details\" opens a small white panel to its right with a pointer at the button; clicking OK inside closes it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。青い枠のボタン「詳細」108×36 を (24, 112) に置く。カーソルが1.0秒にクリック",
     "出る量 a: 1.0〜1.28秒に easeOutCubic で 0→1。不透明度 a で、6px右から所定の位置へ寄る",
     "小窓: 白 300×120・角丸10を (156, 62) に置き、1pxの枠線、影 blur 22・下へ6。左辺の y 122〜138 に幅10の三角でボタンを指す",
     "中身: 見出しの太線・本文2行・下に枠のボタン 70×26 と青いOK 72×26",
     "閉じる: カーソルが3.0秒にOK (402, 157) へ移り3.3秒にクリック。a に (1 − easeInOutCubic(3.3〜3.5秒)) を掛ける"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. An outlined blue \"Details\" button (108×36) at (24, 112); the cursor clicks it at 1.0 s.",
     "Show amount a: 0→1 over 1.0–1.28 s with easeOutCubic; opacity a, sliding 6 px in from the right.",
     "Panel: white 300×120, radius 10, at (156, 62), 1 px border, shadow blur 22, offset y 6. A 10-wide triangle on its left edge (y 122–138) points at the button.",
     "Inside: a bold title bar, two text lines, an outlined 70×26 button and a blue 72×26 OK button.",
     "Close: the cursor moves to OK (402, 157) by 3.0 s and clicks at 3.3 s; a is multiplied by (1 − easeInOutCubic over 3.3–3.5 s)."
    ]
   },
   "use": {
    "ja": "ボタンの近くで、短い設定や確認をその場で済ませたいとき。",
    "en": "Use it for a short setting or confirmation that belongs right next to the button that opened it."
   },
   "tags": [
    "popover",
    "popup",
    "callout",
    "bubble",
    "flyout",
    "overlay"
   ]
  },
  {
   "id": "056",
   "pack": "ui",
   "no": "08",
   "slug": "toast",
   "category": "open-overlay",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "トースト",
    "en": "Toast notification"
   },
   "meaning": {
    "ja": "隅に通知が出て自動で消える",
    "en": "A short message appears in a corner and goes away on its own"
   },
   "ask": {
    "ja": "保存したら右下にトーストで「保存しました」と出して。0.35秒で右から出し、2秒後に自動で消して。",
    "en": "After saving, show \"Saved\" as a toast at the bottom right: slide it in from the right in 0.35 s and dismiss it automatically after 2 s."
   },
   "summary": {
    "ja": "「保存」を押すと右下に黒い通知が右から滑り込み、残り時間の線が縮みきると右へ消える。",
    "en": "Clicking \"Save\" slides a dark notice into the bottom-right corner; when its time bar runs out it slides away."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。左下の青い「保存」ボタン（110×36）をカーソルが1.0秒にクリックし、左下へ去る",
     "通知: #26282c の 214×52・角丸10。右端から18px・下端から16pxの位置に、1.05〜1.4秒に easeOutCubic で右から240px滑り込む",
     "中身: 青い丸に白いチェックと、白い15pxの「保存しました」",
     "下端に残り時間の線（幅194→0・高さ3）を1.4〜3.2秒に直線で縮める",
     "消える: 3.2〜3.55秒に easeInOutCubic で右へ240px滑り出る"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. The cursor clicks the blue \"Save\" button (110×36, bottom left) at 1.0 s and leaves to the bottom left.",
     "Toast: #26282c, 214×52, radius 10, 18 px from the right and 16 px from the bottom; slides in 240 px from the right over 1.05–1.4 s with easeOutCubic.",
     "Inside: a white check in a blue circle and white 15 px text \"Saved\".",
     "A time-left line along the bottom (3 px tall) shrinks linearly from 194 px to 0 over 1.4–3.2 s.",
     "Exit: slides 240 px out to the right over 3.2–3.55 s with easeInOutCubic."
    ]
   },
   "use": {
    "ja": "保存・送信などの結果を、作業を止めずに短く知らせたいとき。",
    "en": "Use it to confirm a result such as a save or send without interrupting the user."
   },
   "tags": [
    "toast",
    "snackbar",
    "notification",
    "alert",
    "message",
    "auto-dismiss"
   ]
  },
  {
   "id": "057",
   "pack": "ui",
   "no": "09",
   "slug": "tabs",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "タブ",
    "en": "Tabs"
   },
   "meaning": {
    "ja": "見出しを押して中身を切り替える",
    "en": "Click a label to switch which panel is shown"
   },
   "ask": {
    "ja": "料金ページの上にタブを3つ置いて。押したら下線を0.25秒で滑らせ、中身を0.2秒のクロスフェードで切り替えて。",
    "en": "Put three tabs at the top of the pricing page. On click, slide the underline over 0.25 s and cross-fade the content in 0.2 s."
   },
   "summary": {
    "ja": "「概要・料金・レビュー」のタブを順に押すと、青い下線が滑って移り、下の中身が入れ替わる。",
    "en": "Clicking the tabs \"Overview, Pricing, Reviews\" in turn slides a blue underline across and swaps the content below."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。タブ3つ（x 24・114・204、幅 70・70・100）。下に2pxの区切り線（y 50）と、4pxの青い下線",
     "カーソルが1.0秒に2つ目、2.2秒に3つ目、3.4秒に1つ目をクリック",
     "下線: 位置と幅を各クリックから0.25秒、easeInOutCubic で次のタブへ移す（3つ目から1つ目へは中央を通って戻る）",
     "文字: 選択中は青・太字、それ以外は灰色。切り替わりは1.1・2.3・3.5秒",
     "中身: 前のパネルが0.2秒で直線的に消え、0.1秒後に次のパネルが0.2秒で出る（出るとき8px下から上がる）"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Three tabs at x 24, 114, 204, widths 70, 70, 100; a 2 px divider at y 50 and a 4 px blue underline.",
     "The cursor clicks the second tab at 1.0 s, the third at 2.2 s and the first at 3.4 s.",
     "Underline: position and width move to the new tab over 0.25 s from each click with easeInOutCubic (from the third back to the first it passes through the middle).",
     "Labels: selected is blue and bold, others grey; the switch happens at 1.1, 2.3 and 3.5 s.",
     "Content: the old panel fades out linearly in 0.2 s; 0.1 s later the new one fades in over 0.2 s while rising 8 px."
    ]
   },
   "use": {
    "ja": "同じ場所で、並んだ種類の情報を切り替えて見せたいとき。",
    "en": "Use it to show several related views in the same space and let people switch between them."
   },
   "tags": [
    "tabs",
    "tab-bar",
    "tabbed",
    "navigation",
    "switch-view",
    "underline"
   ]
  },
  {
   "id": "058",
   "pack": "ui",
   "no": "10",
   "slug": "carousel",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "カルーセル",
    "en": "Carousel"
   },
   "meaning": {
    "ja": "横に送って順番に見せる",
    "en": "Slides that move sideways to show one item at a time"
   },
   "ask": {
    "ja": "トップの画像をカルーセルにして。右矢印で1枚ずつ0.4秒で送り、下に今の位置の点を出して。",
    "en": "Turn the top images into a carousel: the right arrow moves one slide in 0.4 s, with position dots below."
   },
   "summary": {
    "ja": "右の矢印を押すたびに、横に並んだ3種類の絵が1枚ずつ左へ送られ、下の点が移る。",
    "en": "Each click on the right arrow slides a row of three different images one step to the left, and the dot below moves."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。スライド 330×138・角丸8を中央に置き、間隔18。両隣が端から少し見える",
     "左右に白い丸ボタン（半径18・影 blur 10）と矢印。下に点3つ（今の位置は青の 16×8、他は 8×8）",
     "カーソルが右の矢印 (514, 88) を1.0・2.1・3.2秒にクリック",
     "各クリックで、0.4秒かけて easeInOutCubic で列を左へ348px（1枚＋間隔）送る",
     "絵は3種類（山の風景・丸3つ・棒グラフ）の繰り返しなので、3回送ると最初の絵に戻る"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Slides 330×138, radius 8, centred with an 18 px gap; the neighbours peek in at the edges.",
     "White round buttons (radius 18, shadow blur 10) with chevrons at left and right; three dots below (current one blue 16×8, others 8×8).",
     "The cursor clicks the right arrow (514, 88) at 1.0, 2.1 and 3.2 s.",
     "Each click moves the row 348 px left (one slide plus gap) over 0.4 s with easeInOutCubic.",
     "The three pictures (landscape, three circles, bar chart) repeat, so after three moves the first is back."
    ]
   },
   "use": {
    "ja": "限られた場所で、画像やおすすめを何枚も順に見せたいとき。",
    "en": "Use it to show several images or featured items in limited space, one at a time."
   },
   "tags": [
    "carousel",
    "slider",
    "slideshow",
    "gallery",
    "swipe",
    "paging-dots"
   ]
  },
  {
   "id": "059",
   "pack": "ui",
   "no": "11",
   "slug": "toggle-switch",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "トグルスイッチ",
    "en": "Toggle switch"
   },
   "meaning": {
    "ja": "オン・オフを切り替える",
    "en": "Flip a setting on or off"
   },
   "ask": {
    "ja": "通知設定の各行にトグルスイッチを置いて。押したら0.2秒でつまみを滑らせ、オンは青にして。",
    "en": "Put a toggle switch on each notification setting: the knob slides in 0.2 s and the track turns blue when on."
   },
   "summary": {
    "ja": "設定の3行のうち上の2つのスイッチを順にオンにし、その後オフに戻す。",
    "en": "The switches on the first two of three setting rows are turned on in turn, then off again."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。設定の行3つ（60px間隔・区切り線あり）。右端 x 450 に 64×34・角丸17 の溝と、白いつまみ（半径13・影）",
     "カーソルのクリック: 1行目オン1.0秒、2行目オン1.8秒、1行目オフ3.0秒、2行目オフ3.6秒。3行目はオフのまま",
     "1回の切り替えは0.2秒・easeOutCubic。つまみを30px（17→47）滑らせる",
     "溝の色は灰色 #d9d7d5 から青 #1f5ae8 へ、切り替えの進み具合で重ねて変える"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Three setting rows 60 px apart with dividers. At x 450 a 64×34 track (radius 17) and a white knob (radius 13, shadow).",
     "Clicks: row 1 on at 1.0 s, row 2 on at 1.8 s, row 1 off at 3.0 s, row 2 off at 3.6 s. Row 3 stays off.",
     "Each switch takes 0.2 s with easeOutCubic; the knob slides 30 px (17 → 47).",
     "The track colour blends from grey #d9d7d5 to blue #1f5ae8 with the switch progress."
    ]
   },
   "use": {
    "ja": "設定画面で、すぐ反映されるオン・オフを並べたいとき。",
    "en": "Use it for settings that take effect immediately and have only two states."
   },
   "tags": [
    "toggle",
    "switch",
    "toggle-switch",
    "on-off",
    "boolean",
    "settings"
   ]
  },
  {
   "id": "060",
   "pack": "ui",
   "no": "12",
   "slug": "segmented-control",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "セグメントコントロール",
    "en": "Segmented control"
   },
   "meaning": {
    "ja": "並んだボタンで表示を切り替える",
    "en": "A row of joined buttons that switches the view"
   },
   "ask": {
    "ja": "グラフの上に「日・週・月」のセグメントコントロールを置いて。押したら選択の背景を0.25秒で滑らせ、グラフも同時に変えて。",
    "en": "Put a Day / Week / Month segmented control above the chart: the selected background slides over 0.25 s and the chart changes with it."
   },
   "summary": {
    "ja": "「日・週・月」を押すと青い選択部分が滑って移り、下の棒グラフの高さが変わる。",
    "en": "Clicking Day, Week or Month slides a blue highlight across and the bar chart below changes height."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。灰色の台 300×40・角丸10 を (121, 12) に置き、3等分（各100）に「日・週・月」",
     "選択部分: 青の 92×32・角丸8（影 blur 6）。選ばれた文字は白",
     "カーソルが1.0秒に「週」、2.1秒に「月」、3.3秒に「日」をクリック。選択部分は各0.25秒、easeInOutCubic で滑る",
     "下の棒グラフ: 幅34・58px間隔の7本（6本目だけ青）。高さを3組のデータ（例 30〜85 / 40〜100 / 60〜115）の間で、選択部分と同時に easeInOutCubic で変える"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A grey 300×40 base (radius 10) at (121, 12), split into three 100-wide segments: Day, Week, Month (in Japanese).",
     "Selection: blue 92×32, radius 8, shadow blur 6; the selected label is white.",
     "The cursor clicks Week at 1.0 s, Month at 2.1 s and Day at 3.3 s; the selection slides over 0.25 s each with easeInOutCubic.",
     "Chart below: seven bars 34 wide, 58 px apart (the sixth is blue). Heights move between three data sets (about 30–85, 40–100, 60–115) together with the selection, eased the same way."
    ]
   },
   "use": {
    "ja": "同じデータの見え方を、2〜4通りから切り替えたいとき。",
    "en": "Use it to switch between two to four views of the same content, such as day, week and month."
   },
   "tags": [
    "segmented-control",
    "segmented-button",
    "button-group",
    "toggle-group",
    "switcher",
    "view-switch"
   ]
  },
  {
   "id": "061",
   "pack": "ui",
   "no": "13",
   "slug": "filter-chips",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "チップ",
    "en": "Filter chips"
   },
   "meaning": {
    "ja": "押して絞り込み条件を付け外し",
    "en": "Small pills you click to add or remove a filter"
   },
   "ask": {
    "ja": "一覧の上に絞り込みのチップを並べて。押したらチェックを付けて青くし、0.15秒で一覧を絞り込んで。",
    "en": "Add filter chips above the list: a clicked chip gets a check mark and turns blue, and the list filters within 0.15 s."
   },
   "summary": {
    "ja": "「新着」「無料」のチップを押すとチェックが付いて青くなり、条件に合わないカードが薄くなる。",
    "en": "Clicking the \"New\" and \"Free\" chips adds a check mark and turns them blue, and cards that do not match fade out."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。チップ4つ「すべて・新着・人気・無料」: 高さ34・角丸17、幅は文字幅+32、10px間隔で左から並べる",
     "カーソルのクリック: 新着オン0.95秒、無料オン1.75秒、新着オフ3.0秒、無料オフ3.6秒",
     "1回の切り替えは0.15秒・easeOutCubic。チップが18px広がって左にチェックが出て、地は薄い青・枠と文字は青",
     "下の一覧: カード4枚（242×54、2列2段）。条件に合わないカードは不透明度を 1 → 0.12 に下げる"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Four chips (\"All, New, Popular, Free\" in Japanese): 34 tall, radius 17, width = text + 32, 10 px apart from the left.",
     "Clicks: New on at 0.95 s, Free on at 1.75 s, New off at 3.0 s, Free off at 3.6 s.",
     "Each change takes 0.15 s with easeOutCubic: the chip widens 18 px to make room for a check mark; fill light blue, border and text blue.",
     "List below: four cards (242×54, two columns, two rows); cards that do not match drop from opacity 1 to 0.12."
    ]
   },
   "use": {
    "ja": "一覧や検索結果を、条件を重ねて手早く絞り込ませたいとき。",
    "en": "Use it to let people narrow a list or search results by combining a few quick filters."
   },
   "tags": [
    "chips",
    "filter-chips",
    "tags",
    "filter",
    "facets",
    "pills"
   ]
  },
  {
   "id": "062",
   "pack": "ui",
   "no": "14",
   "slug": "range-slider",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "レンジスライダー",
    "en": "Range slider"
   },
   "meaning": {
    "ja": "つまみ2つで範囲を選ぶ",
    "en": "Two handles on one track pick a minimum and a maximum"
   },
   "ask": {
    "ja": "価格の絞り込みをレンジスライダーにして。つまみは2つ、動かしている間は値を吹き出しで出して。",
    "en": "Make the price filter a range slider with two handles, showing each value in a bubble while it is dragged."
   },
   "summary": {
    "ja": "価格のスライダーで、左のつまみを右へ、右のつまみを左へ動かして範囲を狭め、元に戻す。",
    "en": "On a price slider, the left handle is dragged right and the right handle left to narrow the range, then both go back."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。溝: x 54〜488・高さ8・y 120。つまみ2つの間を青で塗る。範囲は ¥0〜¥10,000",
     "つまみ: 白・半径13・青い3pxの縁。ドラッグ中は半径15になり、半径24の薄い青の円が付く",
     "下限: 1.0〜1.6秒に 0.1→0.3（¥1,000→¥3,000）、3.55〜3.9秒に戻す。上限: 2.1〜2.6秒に 1.0→0.8（¥10,000→¥8,000）、2.95〜3.3秒に戻す。どれも easeInOutCubic",
     "各つまみの上に値の吹き出し（高さ28・ドラッグ中は青地に白文字）。右上に「¥1,000 〜 ¥10,000」の形で範囲を青で出し、100円単位で更新",
     "カーソルがつまみに乗って一緒に動く（押す時刻 1.0・2.1・2.95・3.55秒）"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Track: x 54–488, 8 tall, at y 120; the part between the two handles is blue. Range ¥0–¥10,000.",
     "Handles: white, radius 13, 3 px blue rim; while dragged, radius 15 with a light-blue halo of radius 24.",
     "Low handle: 0.1 → 0.3 (¥1,000 → ¥3,000) over 1.0–1.6 s, back over 3.55–3.9 s. High handle: 1.0 → 0.8 (¥10,000 → ¥8,000) over 2.1–2.6 s, back over 2.95–3.3 s. All easeInOutCubic.",
     "A value bubble (28 tall) above each handle, blue with white text while dragged. The range \"¥1,000 – ¥10,000\" is shown in blue at top right, updated in ¥100 steps.",
     "The cursor sits on the handle it drags (presses at 1.0, 2.1, 2.95 and 3.55 s)."
    ]
   },
   "use": {
    "ja": "価格・日付・数量などを、下限と上限の範囲で絞り込ませたいとき。",
    "en": "Use it to filter by a range, such as price, date or size, with a minimum and a maximum."
   },
   "tags": [
    "range-slider",
    "slider",
    "dual-thumb",
    "min-max",
    "price-filter",
    "range"
   ]
  },
  {
   "id": "063",
   "pack": "ui",
   "no": "15",
   "slug": "stepper",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ステッパー",
    "en": "Stepper (+/−)"
   },
   "meaning": {
    "ja": "＋/−ボタンで数を増減する",
    "en": "Plus and minus buttons that change a number by one"
   },
   "ask": {
    "ja": "数量の欄をステッパーにして。＋と−で1ずつ増減し、押すたびに数字を0.25秒で少し弾ませて。",
    "en": "Make the quantity field a stepper: + and − change it by one, and the number pops slightly for 0.25 s on each press."
   },
   "summary": {
    "ja": "＋を3回押して数が1から4に増え、−を3回押して1に戻る。押すたびに数字が少し弾む。",
    "en": "Pressing + three times raises the number from 1 to 4, and pressing − three times brings it back to 1; the number pops on each press."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。枠 200×60・角丸12 を (171, 52) に置く。左60pxに「−」、右60pxに「＋」（青）、中央に30pxの太い数字",
     "カーソルのクリック: ＋を0.9・1.35・1.8秒（1→4）、−を2.8・3.25・3.7秒（4→1）",
     "押した側の区画を、押す0.05秒前から0.15秒後まで薄い青にする",
     "数字: 押すたびに拡大率 1.18 → 1 を0.25秒で直線的に戻し、その間は青"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A 200×60 box (radius 12) at (171, 52): \"−\" in the left 60 px, a blue \"+\" in the right 60 px, and a bold 30 px number in the middle.",
     "Clicks: + at 0.9, 1.35, 1.8 s (1 → 4), − at 2.8, 3.25, 3.7 s (4 → 1).",
     "The pressed segment is tinted light blue from 0.05 s before to 0.15 s after each click.",
     "Number: on each press its scale goes linearly from 1.18 back to 1 over 0.25 s, and it is blue meanwhile."
    ]
   },
   "use": {
    "ja": "カートの数量や人数など、小さな数を1つずつ変えさせたいとき。",
    "en": "Use it for small whole numbers changed one at a time, such as quantity or number of guests."
   },
   "tags": [
    "stepper",
    "quantity",
    "number-input",
    "increment",
    "decrement",
    "plus-minus",
    "spin-button"
   ]
  },
  {
   "id": "064",
   "pack": "ui",
   "no": "16",
   "slug": "pagination",
   "category": "select-switch",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ページネーション",
    "en": "Pagination"
   },
   "meaning": {
    "ja": "番号でページを送る",
    "en": "Numbered buttons that move between pages"
   },
   "ask": {
    "ja": "検索結果の下にページネーションを付けて。今のページは青い丸にし、押したら0.2秒で丸を移して一覧を入れ替えて。",
    "en": "Add pagination under the search results: the current page is a blue circle that moves in 0.2 s on click, and the list is replaced."
   },
   "summary": {
    "ja": "下の番号で2、3と押すと青い丸が移り、上の一覧が切り替わる。最後に1へ戻る。",
    "en": "Clicking 2 and then 3 in the page numbers moves the blue circle and swaps the list above; finally it goes back to 1."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。「‹ 1 2 3 4 5 ›」を直径36・間隔8で中央に並べる（y 160）。今のページに青い丸（半径18）、文字は白",
     "カーソルが1.0秒に2、2.1秒に3、3.3秒に1をクリック",
     "青い丸は各0.2秒、easeInOutCubic で1ページ44pxずつ移る（3から1へは一度に88px）",
     "上の一覧（3行）は1.05・2.15・3.35秒の前後0.2秒で不透明度を 1→0→1 と下げて、中身を入れ替える"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. \"‹ 1 2 3 4 5 ›\" centred, each 36 in diameter with 8 px gaps, at y 160. A blue circle (radius 18) marks the current page, with white text.",
     "The cursor clicks 2 at 1.0 s, 3 at 2.1 s and 1 at 3.3 s.",
     "The blue circle moves 44 px per page over 0.2 s each with easeInOutCubic (88 px at once from 3 back to 1).",
     "The three-row list above dips in opacity 1 → 0 → 1 within 0.2 s either side of 1.05, 2.15 and 3.35 s, and its content changes at the dip."
    ]
   },
   "use": {
    "ja": "検索結果や記事一覧など、長い一覧をページに分けて見せたいとき。",
    "en": "Use it to split a long list, such as search results or articles, into numbered pages."
   },
   "tags": [
    "pagination",
    "pager",
    "page-numbers",
    "paging",
    "next-prev",
    "navigation"
   ]
  },
  {
   "id": "065",
   "pack": "ui",
   "no": "17",
   "slug": "hamburger-menu",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ハンバーガーメニュー",
    "en": "Hamburger menu"
   },
   "meaning": {
    "ja": "三本線を押すとメニューが開く",
    "en": "A three-line icon that opens the menu"
   },
   "ask": {
    "ja": "スマホのヘッダー右にハンバーガーメニューを置いて。押したら三本線を0.3秒で×に変え、メニューを上から下ろして。",
    "en": "Put a hamburger menu at the right of the mobile header: on tap, morph the three lines into × in 0.3 s and drop the menu down from the top."
   },
   "summary": {
    "ja": "ヘッダー右の三本線を押すと×に変わり、ヘッダーの下からメニューが下りてくる。もう一度押すと閉じる。",
    "en": "Clicking the three-line icon at the header's right turns it into ×, and a menu drops down from under the header; clicking again closes it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。高さ44の白いヘッダー。右の (500, 22) に三本線（長さ24・太さ3・8px間隔）",
     "カーソルが1.0秒と3.3秒にクリック。開く量 a: 1.0〜1.3秒に easeInOutCubic で 0→1、3.3〜3.6秒に 1→0",
     "三本線→×: 上下の線を中央へ8px寄せつつ ±45°回し、中の線を不透明度 1−a で消す。開いている間は青",
     "メニュー: 白・高さ140。上端 y = 44 − 140 + 140×a でヘッダーの下から下りる（ヘッダーの下だけ見せる）。影 blur 16。中に4項目、1つ目は青"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A white 44-tall header; three lines (24 long, 3 thick, 8 px apart) at (500, 22) on the right.",
     "The cursor clicks at 1.0 s and 3.3 s. Open amount a: 0→1 over 1.0–1.3 s, 1→0 over 3.3–3.6 s, easeInOutCubic.",
     "Lines to ×: the top and bottom lines move 8 px to the centre and rotate ±45°; the middle line fades with opacity 1 − a. Blue while open.",
     "Menu: white, 140 tall, top at y = 44 − 140 + 140·a so it drops from under the header (clipped below the header), shadow blur 16, four items, the first blue."
    ]
   },
   "use": {
    "ja": "スマホなど幅の狭い画面で、全体メニューを1つのボタンにしまいたいとき。",
    "en": "Use it on narrow screens to tuck the main navigation behind one button."
   },
   "tags": [
    "hamburger-menu",
    "hamburger",
    "menu-icon",
    "nav-toggle",
    "mobile-menu",
    "menu"
   ]
  },
  {
   "id": "066",
   "pack": "ui",
   "no": "18",
   "slug": "breadcrumbs",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "パンくずリスト",
    "en": "Breadcrumbs"
   },
   "meaning": {
    "ja": "今いる場所を階層で示す",
    "en": "A trail of links showing where the page sits in the site"
   },
   "ask": {
    "ja": "記事ページの上にパンくずリストを付けて。「ホーム › 講座 › Web制作」の形で、今のページは太字でリンクなし。",
    "en": "Add breadcrumbs above the article: \"Home › Courses › Web design\", with the current page in bold and not linked."
   },
   "summary": {
    "ja": "パンくずの「講座」を押すと一つ上の一覧ページに戻り、一覧のカードを押すと元の詳細ページへ進む。",
    "en": "Clicking \"Courses\" in the breadcrumbs goes up to the list page; clicking a card there returns to the detail page."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。上に「ホーム › 講座 › Web制作」（17px）。リンクは青、今のページは黒の太字。下に区切り線（y 46）",
     "カーソルが「講座」に乗ると0.9〜1.2秒に下線、1.0秒にクリック",
     "上へ戻る量 up: 1.0〜1.25秒に easeInOutCubic で 0→1。「› Web制作」が消え、「講座」が今のページ（黒の太字）になる",
     "中身: 詳細ページ（見出しと本文）から、3枚のカード（158×118・山の絵付き）の一覧へ不透明度で切り替える",
     "戻る: カーソルが1枚目のカードに乗り（2.45〜2.8秒に青い枠）、2.7秒にクリック。2.7〜2.95秒に元の詳細ページへ"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. At the top \"Home › Courses › Web design\" (in Japanese, 17 px): links blue, current page black and bold; a divider at y 46.",
     "The cursor hovers \"Courses\" (underline 0.9–1.2 s) and clicks at 1.0 s.",
     "Up amount: 0→1 over 1.0–1.25 s with easeInOutCubic. \"› Web design\" fades out and \"Courses\" becomes the current page (black, bold).",
     "Content cross-fades from a detail page (title and text) to a list of three cards (158×118, with a landscape picture).",
     "Back: the cursor moves onto the first card (blue outline 2.45–2.8 s) and clicks at 2.7 s; the detail page returns over 2.7–2.95 s."
    ]
   },
   "use": {
    "ja": "階層の深いサイトで、今いる場所と上の階層への戻り道を示したいとき。",
    "en": "Use it on sites with deep hierarchies to show where the page is and give a way back up."
   },
   "tags": [
    "breadcrumbs",
    "breadcrumb",
    "trail",
    "hierarchy",
    "navigation",
    "path"
   ]
  },
  {
   "id": "067",
   "pack": "ui",
   "no": "19",
   "slug": "mega-menu",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "メガメニュー",
    "en": "Mega menu"
   },
   "meaning": {
    "ja": "大きな一覧メニューが広がる",
    "en": "A wide panel of grouped links that opens from the main menu"
   },
   "ask": {
    "ja": "ヘッダーの「製品」にメガメニューを付けて。乗せたら0.25秒で全幅のパネルを下ろし、3列のリンクと画像を並べて。",
    "en": "Give \"Products\" in the header a mega menu: on hover, drop a full-width panel in 0.25 s with three columns of links and an image."
   },
   "summary": {
    "ja": "ヘッダーの「製品」にカーソルを乗せると、全幅のパネルが下りて3列のリンクと画像が並ぶ。離れると閉じる。",
    "en": "Hovering over \"Products\" in the header drops a full-width panel with three columns of links and an image; it closes when the cursor leaves."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。高さ42のヘッダーに「製品・料金・サポート」（各16px、下向き矢印付き）",
     "カーソルは押さずに乗せるだけ: 1.0秒に「製品」へ着く。開く量 a: 1.05〜1.3秒に easeOutCubic で 0→1。「製品」は青・下線付きになる",
     "パネル: 白・全幅・高さ146。ヘッダーの下から12px上から下りつつ不透明度 a で出る。影 blur 18・下へ8",
     "中身: 130px間隔の3列（青い見出しと3つのリンク）と、右に絵 104×112。カーソルが下りて1.75〜2.9秒に2列目の2つ目のリンクを薄い青で強調",
     "閉じる: カーソルが2.9秒からパネルの外へ出て、3.15〜3.4秒に (1 − easeInOutCubic) で消える"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A 42-tall header with \"Products, Pricing, Support\" (in Japanese, 16 px, each with a down chevron).",
     "The cursor only hovers: it reaches \"Products\" at 1.0 s. Open amount a: 0→1 over 1.05–1.3 s with easeOutCubic; \"Products\" turns blue with an underline.",
     "Panel: white, full width, 146 tall, dropping 12 px into place under the header while fading in with a. Shadow blur 18, offset y 8.",
     "Inside: three columns 130 px apart (a blue heading and three links each) and a 104×112 picture at the right. The cursor moves down and the second link of the second column is highlighted light blue from 1.75 to 2.9 s.",
     "Close: the cursor leaves the panel from 2.9 s; it fades over 3.15–3.4 s (1 − easeInOutCubic)."
    ]
   },
   "use": {
    "ja": "製品やサービスが多いサイトで、全体を一度に見渡せるメニューにしたいとき。",
    "en": "Use it on sites with many products or sections so visitors can see the whole range at once."
   },
   "tags": [
    "mega-menu",
    "megamenu",
    "dropdown-navigation",
    "navigation",
    "header-menu",
    "multi-column"
   ]
  },
  {
   "id": "068",
   "pack": "ui",
   "no": "20",
   "slug": "step-indicator",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "ステップインジケーター",
    "en": "Step indicator"
   },
   "meaning": {
    "ja": "手続きの何番目かを示す",
    "en": "Shows which step of a process you are on"
   },
   "ask": {
    "ja": "申し込みフォームの上にステップインジケーターを付けて。入力・確認・支払い・完了の4段階で、済んだ段階はチェックにして。",
    "en": "Add a step indicator above the sign-up form with four steps: Details, Review, Payment, Done; completed steps show a check."
   },
   "summary": {
    "ja": "「次へ」を押すたびに、4段階の丸が順にチェックに変わり、青い線が次の段階へ伸びる。",
    "en": "Each click on \"Next\" turns the next of four step circles into a check and extends the blue line to the following step."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。4つの段階「入力・確認・支払い・完了」を x 80・207・334・461、y 35 に置く。丸は半径17、間を灰色の4pxの線でつなぐ",
     "カーソルが右下の「次へ」（110×38）を0.9・1.7・2.5秒にクリック",
     "押すたびに、今の段階は青い丸に白いチェック、次の段階は青い丸に白い番号になる。未到達は白い丸に灰色の縁と番号",
     "青い線は1回につき127px、0.3秒の easeInOutCubic で伸びる。3回目で4つすべてがチェックになる",
     "戻し: 3.75〜4.05秒に段階の表示ごと消し、4.05〜4.3秒に1段目の状態で出し直す"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. Four steps (\"Details, Review, Payment, Done\" in Japanese) at x 80, 207, 334, 461, y 35; circles of radius 17 joined by a 4 px grey line.",
     "The cursor clicks \"Next\" (110×38, bottom right) at 0.9, 1.7 and 2.5 s.",
     "On each click the current step becomes a blue circle with a white check and the next becomes the current one (blue circle, white number). Steps not reached are white with a grey rim.",
     "The blue line grows 127 px per click over 0.3 s with easeInOutCubic; after the third click all four are checked.",
     "Reset: the indicator fades out over 3.75–4.05 s and fades back in at step 1 over 4.05–4.3 s."
    ]
   },
   "use": {
    "ja": "申し込みや購入など、何段階かに分かれた手続きで今の位置を示したいとき。",
    "en": "Use it in multi-step flows such as sign-up or checkout to show progress and what is left."
   },
   "tags": [
    "step-indicator",
    "stepper",
    "steps",
    "progress-steps",
    "wizard",
    "multi-step",
    "checkout"
   ]
  },
  {
   "id": "069",
   "pack": "ui",
   "no": "21",
   "slug": "skeleton-screen",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "スケルトン",
    "en": "Skeleton screen"
   },
   "meaning": {
    "ja": "読み込み中に灰色の枠を出す",
    "en": "Grey shapes stand in for content while it loads"
   },
   "ask": {
    "ja": "一覧の読み込み中はスケルトンを出して。中身と同じ形の灰色の枠にして、光が左から右へ0.9秒で流れるように。",
    "en": "While the list loads, show a skeleton screen: grey blocks in the shape of the content, with a shine sweeping left to right every 0.9 s."
   },
   "summary": {
    "ja": "再読み込みを押すと、一覧の中身が同じ形の灰色の枠に変わり、光が横に流れる。読み込みが済むと中身に戻る。",
    "en": "Clicking reload turns the list into grey blocks of the same shape with a sweeping shine; the content returns when loading ends."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。2行の一覧（絵 96×56 と文字3行）。右上の再読み込みアイコンをカーソルが1.0秒にクリック",
     "1.05〜1.2秒に直線で、中身から同じ位置・同じ大きさの灰色 #e9e7e5 の角丸の枠へ切り替える",
     "光: 白の帯（幅160、両端は透明・中央は不透明度0.75）を、0.9秒ごとに左（x −200）から右（x 742）へ流す。枠の上だけに重ねる",
     "3.0〜3.3秒に直線で中身へ戻す"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A two-row list (a 96×56 picture and three text lines each). The cursor clicks the reload icon at top right at 1.0 s.",
     "Over 1.05–1.2 s (linear) the content switches to grey #e9e7e5 rounded blocks of the same size and position.",
     "Shine: a white band 160 wide (transparent at the edges, opacity 0.75 in the middle) sweeps from x −200 to x 742 every 0.9 s, drawn only over the blocks.",
     "The content returns over 3.0–3.3 s (linear)."
    ]
   },
   "use": {
    "ja": "読み込みに少し時間がかかる一覧やカードで、待っている間も画面の形を見せたいとき。",
    "en": "Use it for lists or cards that take a moment to load, so the layout is visible while people wait."
   },
   "tags": [
    "skeleton",
    "skeleton-screen",
    "placeholder",
    "shimmer",
    "loading",
    "ghost-content"
   ]
  },
  {
   "id": "070",
   "pack": "ui",
   "no": "22",
   "slug": "spinner",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "スピナー",
    "en": "Spinner"
   },
   "meaning": {
    "ja": "くるくる回って待ちを示す",
    "en": "A spinning circle that means \"please wait\""
   },
   "ask": {
    "ja": "送信中はボタンの上にスピナーを出して。1秒に1回転強で回し、終わったら青い丸のチェックに替えて。",
    "en": "While sending, show a spinner over the form, turning a little over once per second, then replace it with a blue check when done."
   },
   "summary": {
    "ja": "「送信」を押すと画面が白くかすみ、中央で青い弧が回る。済むとチェックに変わって消える。",
    "en": "Clicking \"Send\" washes the card white and a blue arc spins in the middle; when finished it changes to a check and fades."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。下中央の「送信」（120×40）をカーソルが1.0秒にクリック",
     "1.05〜1.2秒に直線で、全面に白の幕（不透明度0.78）とスピナーを出す",
     "スピナー: (271, 92) に半径26・太さ6の薄い輪と、その上に長さ243°（1.35π）の青い弧（端は丸）。1秒に1.3回転（468°/秒）で回す",
     "2.95〜3.05秒にスピナーを消し、2.95〜3.2秒に青い丸（半径28）と白いチェックを拡大率 0.7→1（easeOutCubic）で出す",
     "3.75〜4.0秒に直線で幕ごと消す"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. The cursor clicks \"Send\" (120×40, bottom centre) at 1.0 s.",
     "Over 1.05–1.2 s (linear) a white scrim (opacity 0.78) and the spinner fade in over the whole card.",
     "Spinner at (271, 92): a pale ring, radius 26, 6 thick, with a blue 243° (1.35π) arc on top (round caps), turning 1.3 times per second (468°/s).",
     "Over 2.95–3.05 s the spinner fades; over 2.95–3.2 s a blue circle (radius 28) with a white check scales 0.7 → 1 (easeOutCubic).",
     "Everything fades out linearly over 3.75–4.0 s."
    ]
   },
   "use": {
    "ja": "送信・保存など、終わるまでの時間が読めない短い待ちを示したいとき。",
    "en": "Use it for short waits of unknown length, such as sending or saving."
   },
   "tags": [
    "spinner",
    "loading",
    "loader",
    "activity-indicator",
    "progress-circle",
    "busy"
   ]
  },
  {
   "id": "071",
   "pack": "ui",
   "no": "23",
   "slug": "badge",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "バッジ",
    "en": "Badge"
   },
   "meaning": {
    "ja": "件数を小さな丸で示す",
    "en": "A small dot with a number showing a count"
   },
   "ask": {
    "ja": "ヘッダーのベルにバッジを付けて未読数を出して。増えるたびに0.3秒で少し弾ませ、開いたら消して。",
    "en": "Add a badge to the bell in the header to show the unread count: it pops for 0.3 s each time the count goes up and disappears when opened."
   },
   "summary": {
    "ja": "ヘッダーのベルに通知が届くたび、右上の青い丸の数が1・2・3と増える。ベルを押すと消える。",
    "en": "Each time a notification arrives, the blue dot on the bell in the header counts up 1, 2, 3; clicking the bell clears it."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。高さ54のヘッダー。右の (482, 27) にベルの線画",
     "バッジ: ベル右上（+12, −12）に半径12の青い丸、白い2.5pxの縁、白い14pxの数字",
     "通知が0.7・1.3・1.9秒に届き、数が 1→2→3。1つ目は0.7〜0.9秒に easeOutCubic で拡大して出る",
     "届くたびに拡大率 1.3→1 を0.3秒で戻し、同時に波紋（半径 12→28、不透明度 0.5→0）を0.5秒で広げる",
     "カーソルが2.95秒にベルへ着き3.0秒にクリック。3.0〜3.25秒に easeInOutCubic でバッジを0まで縮める"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A 54-tall header with a line-drawn bell at (482, 27) on the right.",
     "Badge: a blue circle of radius 12 at the bell's top right (+12, −12), 2.5 px white rim, white 14 px number.",
     "Notifications arrive at 0.7, 1.3 and 1.9 s: the count goes 1 → 2 → 3. The first scales in over 0.7–0.9 s with easeOutCubic.",
     "Each arrival pops the scale from 1.3 back to 1 over 0.3 s and sends out a ripple ring (radius 12 → 28, opacity 0.5 → 0) over 0.5 s.",
     "The cursor reaches the bell at 2.95 s and clicks at 3.0 s; the badge shrinks to 0 over 3.0–3.25 s with easeInOutCubic."
    ]
   },
   "use": {
    "ja": "未読・新着・カートの中身など、件数を目立たせたいとき。",
    "en": "Use it to call attention to a count, such as unread messages or items in a cart."
   },
   "tags": [
    "badge",
    "notification-badge",
    "counter",
    "count",
    "dot",
    "unread"
   ]
  },
  {
   "id": "072",
   "pack": "ui",
   "no": "24",
   "slug": "empty-state",
   "category": "navigate-status",
   "width": 542,
   "height": 191,
   "cycle": 4.5,
   "name": {
    "ja": "エンプティステート",
    "en": "Empty state"
   },
   "meaning": {
    "ja": "中身がないときの案内画面",
    "en": "The screen shown when there is nothing to list yet"
   },
   "ask": {
    "ja": "リストが空になったらエンプティステートを出して。線画のアイコン、「まだ何もありません」、追加するボタンを0.35秒で出して。",
    "en": "When the list is empty, show an empty state: a line icon, \"Nothing here yet\" and an add button, fading in over 0.35 s."
   },
   "summary": {
    "ja": "一覧の2行をごみ箱で順に消すと、空の箱の線画と「まだ何もありません」「追加する」ボタンが出る。",
    "en": "Deleting the two list rows with their trash icons brings up an empty-box drawing, \"Nothing here yet\" and an \"Add\" button."
   },
   "spec": {
    "ja": [
     "4.5秒周期・カード542×191。2行の一覧（494×48・角丸8、右端にごみ箱）",
     "カーソルがごみ箱を0.95秒と1.65秒にクリック。各行は0.3秒の easeInOutCubic で左へ60px動きながら消え、2行目は1行目の位置へ58px上がる",
     "1.95〜2.3秒に直線で、空の状態を8px下から上げつつ出す: 青い線画の受け箱、「まだ何もありません」（16px）、青い「追加する」ボタン（112×34）",
     "カーソルが3.3秒に「追加する」をクリック。空の状態は3.25〜3.45秒に消え、2行が3.35〜3.7秒に easeOutCubic で左から戻る"
    ],
    "en": [
     "4.5 s cycle on a 542×191 card. A two-row list (494×48, radius 8, a trash icon at the right).",
     "The cursor clicks the trash icons at 0.95 s and 1.65 s. Each row slides 60 px left while fading out over 0.3 s (easeInOutCubic); the second row moves up 58 px into the first slot.",
     "Over 1.95–2.3 s (linear) the empty state fades in while rising 8 px: a blue line drawing of an inbox tray, \"Nothing here yet\" (16 px, in Japanese) and a blue \"Add\" button (112×34).",
     "The cursor clicks \"Add\" at 3.3 s; the empty state fades over 3.25–3.45 s and the two rows come back from the left over 3.35–3.7 s with easeOutCubic."
    ]
   },
   "use": {
    "ja": "初めて使う画面や、検索で何も見つからないときに、次にすることを案内したいとき。",
    "en": "Use it for first-use screens or no-results pages to tell people what to do next."
   },
   "tags": [
    "empty-state",
    "no-data",
    "zero-state",
    "blank-state",
    "no-results",
    "onboarding"
   ]
  },
  {
   "id": "073",
   "pack": "lp",
   "no": "01",
   "slug": "parallax-scrolling",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "パララックススクロール",
    "en": "Parallax scrolling"
   },
   "meaning": {
    "ja": "スクロールで奥の層ほどゆっくり動く",
    "en": "On scroll, background layers move slower than the content"
   },
   "ask": {
    "ja": "ファーストビューの背景をパララックススクロールにして。背景はスクロール量の0.3倍で動かして。",
    "en": "Make the hero background a parallax scroll: move it at 0.3× the scroll distance."
   },
   "summary": {
    "ja": "ページを下へスクロールすると、見出しはふつうに上がり、空と太陽・遠い山・近い山はそれより遅く動く。",
    "en": "As the page scrolls down, the headline moves up normally while the sky and sun, far hills and near hills move more slowly."
   },
   "spec": {
    "ja": [
     "表示域 511×168 のブラウザの窓。スクロール量: 0.3〜1.9秒で 0→120px、2.9〜4.3秒で 120→0（easeInOut 3乗）",
     "各層の移動量 = スクロール量 × 係数。空と太陽 0.15、遠い山 0.4、近い山 0.7",
     "見出し（28px）・ボタン・次のセクションは 1.0（ふつうのスクロール）",
     "次のセクション（白地）はファーストビューの下端（168px）から始まり、遅れて動く背景の上にかぶさる",
     "右端のスクロールバーのつまみもスクロール量に合わせて動く"
    ],
    "en": [
     "A browser window with a 511 × 168 viewport. Scroll: 0→120 px at 0.3–1.9 s, 120→0 at 2.9–4.3 s (cubic ease-in-out).",
     "Each layer moves by scroll × factor: sky and sun 0.15, far hills 0.4, near hills 0.7.",
     "Headline (28 px), button and the next section move at 1.0 (normal scrolling).",
     "The next section (white) starts at the bottom of the hero (168 px) and slides over the slower background.",
     "The scrollbar thumb on the right moves with the scroll."
    ]
   },
   "use": {
    "ja": "ファーストビューや区切りの写真に奥行きを出したいとき。",
    "en": "Use it to give the hero or a section photo a sense of depth."
   },
   "tags": [
    "parallax",
    "parallax-scrolling",
    "scroll",
    "depth",
    "layers",
    "hero",
    "background"
   ]
  },
  {
   "id": "074",
   "pack": "lp",
   "no": "02",
   "slug": "fade-in-on-scroll",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "スクロールでフェードイン",
    "en": "Fade-in on scroll"
   },
   "meaning": {
    "ja": "画面に入った要素がふわっと現れる",
    "en": "Elements fade in as they scroll into view"
   },
   "ask": {
    "ja": "各セクションの見出しとカードを、スクロールでフェードインさせて。下から30px、0.6秒で。",
    "en": "Fade in each section's heading and cards on scroll: up from 30 px below, over 0.6 s."
   },
   "summary": {
    "ja": "スクロールで画面に入った見出し・カード・本文が、それぞれ下から浮かび上がりながら現れる。",
    "en": "As the page scrolls, the heading, the cards and the body text each rise into place and fade in when they enter the view."
   },
   "spec": {
    "ja": [
     "スクロール量: 0.35〜1.0秒で 0→95px、1.5〜2.1秒で 95→200px、3.2〜4.4秒で 200→0（いずれも easeInOut 3乗）",
     "判定線は表示域の高さの85%（上から143px）。要素の上端がこの線より上に来た時刻に発火（Intersection Observer の考え方）",
     "発火から0.7秒で 不透明度 0→1、下から28px → 0 へ（easeOut 3乗）",
     "要素は見出し（ページ上 172px）・カード3枚の列（206px）・本文（334px）の3つ。最初はどれも画面の下に隠れている。列のカードは同時に出る",
     "スクロールで戻って画面の下へ出た要素は、見えない所で元の状態に戻る（次に入るとまた出る）"
    ],
    "en": [
     "Scroll: 0→95 px at 0.35–1.0 s, 95→200 px at 1.5–2.1 s, 200→0 at 3.2–4.4 s (all cubic ease-in-out).",
     "Trigger line at 85% of the viewport height (143 px from the top). An element fires when its top edge passes above it (the Intersection Observer idea).",
     "After firing, over 0.7 s: opacity 0→1 and offset 28 px below → 0 (cubic ease-out).",
     "Three elements: the heading (172 px down the page), a row of three cards (206 px) and body text (334 px), all below the view at first. The cards in the row appear together.",
     "When an element leaves the bottom of the view on the way back up, it is reset out of sight and plays again next time."
    ]
   },
   "use": {
    "ja": "縦に長いLPで、読み進めるごとに内容を一つずつ見せたいとき。",
    "en": "Use it on a long landing page to bring content in piece by piece as the reader scrolls."
   },
   "tags": [
    "fade-in",
    "scroll-reveal",
    "reveal-on-scroll",
    "intersection-observer",
    "aos",
    "entrance",
    "scroll"
   ]
  },
  {
   "id": "075",
   "pack": "lp",
   "no": "03",
   "slug": "sticky-header",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "追従ヘッダー",
    "en": "Sticky header"
   },
   "meaning": {
    "ja": "スクロールしてもヘッダーが上に残る",
    "en": "The header stays at the top while the page scrolls"
   },
   "ask": {
    "ja": "ヘッダーを追従ヘッダーにして。上に張り付いたら下に薄い影を付けて。",
    "en": "Make the header a sticky header, with a soft shadow once it sticks to the top."
   },
   "summary": {
    "ja": "上のお知らせの帯はスクロールで消えるが、その下のヘッダーは画面の上端に来たところで止まり、本文がその下を通っていく。",
    "en": "The announcement strip scrolls away, but the header below it stops at the top edge and the content scrolls underneath."
   },
   "spec": {
    "ja": [
     "スクロール量: 0.4〜1.3秒で 0→110px、1.9〜2.8秒で 110→250px、3.4〜4.4秒で 250→0（easeInOut 3乗）",
     "ページの一番上に高さ22pxのお知らせの帯（濃紺）、その下に高さ34pxのヘッダー（ロゴ・メニュー3つ・ボタン）",
     "ヘッダーの位置 = max(22 − スクロール量, 0)。帯が見えなくなった所で上端に止まる（position: sticky; top: 0）",
     "止まってからの24pxのスクロールで、ヘッダーの下に高さ12pxの影を 不透明度 0→0.16 で付ける",
     "本文（写真・見出し・カード3枚）はヘッダーの下をふつうにスクロールする"
    ],
    "en": [
     "Scroll: 0→110 px at 0.4–1.3 s, 110→250 px at 1.9–2.8 s, 250→0 at 3.4–4.4 s (cubic ease-in-out).",
     "At the very top, a 22 px announcement strip (navy); below it a 34 px header (logo, three menu items, button).",
     "Header position = max(22 − scroll, 0): once the strip is gone, it stops at the top edge (position: sticky; top: 0).",
     "Over the next 24 px of scroll, a 12 px shadow under the header fades from 0 to 0.16 opacity.",
     "The content (photo, heading, three cards) scrolls normally under the header."
    ]
   },
   "use": {
    "ja": "長いページでも、メニューや申し込みボタンにいつでも手が届くようにしたいとき。",
    "en": "Use it to keep the menu and the call-to-action within reach on a long page."
   },
   "tags": [
    "sticky",
    "sticky-header",
    "fixed-header",
    "position-sticky",
    "navigation",
    "header",
    "scroll"
   ]
  },
  {
   "id": "076",
   "pack": "lp",
   "no": "04",
   "slug": "pinning",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ピン留め",
    "en": "Pinning"
   },
   "meaning": {
    "ja": "セクションを止めて中身だけ進める",
    "en": "A section stays fixed while scrolling advances its content"
   },
   "ask": {
    "ja": "「3ステップ」のセクションをピン留めして、スクロールで1ステップずつ写真と番号を切り替えて。",
    "en": "Pin the three-step section and switch the photo and number one step at a time as the user scrolls."
   },
   "summary": {
    "ja": "濃紺のセクションが画面いっぱいに来たところで止まり、スクロールし続けると番号と写真がステップ1→2→3と切り替わり、終わると再び流れていく。",
    "en": "A navy section stops when it fills the view; further scrolling steps the number and photo through 1→2→3, then the section scrolls on."
   },
   "spec": {
    "ja": [
     "スクロール量: 0.3〜3.0秒で 0→500px、3.5〜4.5秒で 500→0（easeInOut 3乗）",
     "セクション（高さ168・濃紺）はスクロール量110pxで上端に着き、そこから300pxのあいだ止まる（GSAP ScrollTrigger の pin）",
     "止まっている間の進み具合 p = (スクロール量 − 110) / 300。左の縦線（長さ124）が p に合わせて朱色で伸びる",
     "p が 1/3 と 2/3 の所（前後 ±0.07、easeInOut 3乗）で次のステップへ: 番号（46px）が52px、写真（226×124）が124px 上へ送られる",
     "300px 進むと止めを外し、セクションは次の白いセクションと一緒に上へ流れる"
    ],
    "en": [
     "Scroll: 0→500 px at 0.3–3.0 s, 500→0 at 3.5–4.5 s (cubic ease-in-out).",
     "The section (168 tall, navy) reaches the top at 110 px of scroll and stays there for the next 300 px (a GSAP ScrollTrigger pin).",
     "Progress while pinned: p = (scroll − 110) / 300. A vertical line (124 long) on the left fills in orange with p.",
     "At p = 1/3 and 2/3 (±0.07, cubic ease-in-out) it moves to the next step: the number (46 px) rolls up 52 px and the photo (226 × 124) slides up 124 px.",
     "After 300 px the pin is released and the section scrolls up with the white section below it."
    ]
   },
   "use": {
    "ja": "手順・特長・ビフォーアフターを、1画面で順番に見せたいとき。",
    "en": "Use it to walk through steps, features or a before/after in one screen."
   },
   "tags": [
    "pin",
    "pinning",
    "scrolltrigger",
    "gsap",
    "scroll-driven",
    "steps",
    "storytelling"
   ]
  },
  {
   "id": "077",
   "pack": "lp",
   "no": "05",
   "slug": "horizontal-scroll",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "横スクロール",
    "en": "Horizontal scroll"
   },
   "meaning": {
    "ja": "縦のスクロールで中身が横に流れる",
    "en": "Scrolling down moves the content sideways"
   },
   "ask": {
    "ja": "実績のセクションを横スクロールにして。縦にスクロールした分だけ、カードを左へ流して。",
    "en": "Turn the work section into a horizontal scroll: move the cards left as far as the user scrolls down."
   },
   "summary": {
    "ja": "縦にスクロールすると、セクションが止まったまま、番号付きの作品カード4枚が左へ流れていく。",
    "en": "As the page scrolls down, the section holds still and four numbered work cards travel to the left."
   },
   "spec": {
    "ja": [
     "スクロール量: 0.3〜3.0秒で 0→420px、3.5〜4.5秒で 420→0（easeInOut 3乗）",
     "見出し「WORKS」は上へ流れ、セクションはスクロール量40pxで上端に着いて止まる",
     "カード: 200×112 を4枚、間隔20、左右の余白34。横に動く量 = 34×2 + 200×4 + 20×3 − 511 = 417px",
     "カードの横位置 = 元の位置 − p × 417。p = (スクロール量 − 40) / 380（スクロールに比例・イージングなし）",
     "スクロールバーのつまみは縦に動き、カードは横に動く"
    ],
    "en": [
     "Scroll: 0→420 px at 0.3–3.0 s, 420→0 at 3.5–4.5 s (cubic ease-in-out).",
     "The heading \"WORKS\" scrolls away; the section reaches the top at 40 px of scroll and stays there.",
     "Cards: four at 200 × 112, gap 20, side padding 34. Horizontal travel = 34·2 + 200·4 + 20·3 − 511 = 417 px.",
     "Card x = start x − p × 417, with p = (scroll − 40) / 380: linear in scroll, no easing.",
     "The scrollbar thumb moves down while the cards move sideways."
    ]
   },
   "use": {
    "ja": "作品・事例・商品を、縦長のページの中で横一列に見せたいとき。",
    "en": "Use it to show work, case studies or products in a row inside a long vertical page."
   },
   "tags": [
    "horizontal-scroll",
    "sideways",
    "scrolltrigger",
    "pin",
    "gallery",
    "portfolio",
    "scroll"
   ]
  },
  {
   "id": "078",
   "pack": "lp",
   "no": "06",
   "slug": "scroll-snap",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "スクロールスナップ",
    "en": "Scroll snap"
   },
   "meaning": {
    "ja": "スクロールが区切りの位置にピタッと止まる",
    "en": "Scrolling settles exactly on the next section"
   },
   "ask": {
    "ja": "セクションごとにスクロールスナップさせて。少し回しただけで次のセクションの頭に合わせて。",
    "en": "Add scroll snap per section, so a small scroll lands on the top of the next section."
   },
   "summary": {
    "ja": "少しだけスクロールすると、残りは自動で送られて、次のセクションの頭がちょうど画面の上にそろう。",
    "en": "After a small scroll, the page carries itself the rest of the way until the next section's top lines up with the top of the view."
   },
   "spec": {
    "ja": [
     "セクションの高さ = 表示域の高さ（168px）。1つ目は薄い青地、2つ目は濃紺",
     "2.4秒で1回。0.45〜0.85秒に手で34pxだけスクロール（easeOut 3乗）",
     "0.9〜1.5秒に残りの134pxを自動で送り、次のセクションの頭に合わせる（easeOut 3乗）",
     "後半の2.4秒は同じ動きを上向きに行い、1つ目のセクションへ戻る（scroll-snap-type: y mandatory の動き）"
    ],
    "en": [
     "Each section is as tall as the viewport (168 px). The first is pale blue, the second navy.",
     "One snap per 2.4 s. At 0.45–0.85 s the user scrolls only 34 px (cubic ease-out).",
     "At 0.9–1.5 s the page moves the remaining 134 px by itself and lines up the next section's top (cubic ease-out).",
     "The second 2.4 s does the same upward, back to the first section (the behaviour of scroll-snap-type: y mandatory)."
    ]
   },
   "use": {
    "ja": "1画面ずつ区切って見せるLPや、スライドのようなページにしたいとき。",
    "en": "Use it for a page that should read one full screen at a time, like slides."
   },
   "tags": [
    "scroll-snap",
    "snap",
    "full-page",
    "sections",
    "css",
    "mandatory",
    "scroll"
   ]
  },
  {
   "id": "079",
   "pack": "lp",
   "no": "07",
   "slug": "scroll-progress-bar",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "スクロールプログレスバー",
    "en": "Scroll progress bar"
   },
   "meaning": {
    "ja": "読み進めた割合を上の線で見せる",
    "en": "A bar at the top shows how far you have read"
   },
   "ask": {
    "ja": "記事ページの上にスクロールプログレスバーを付けて。太さ4px、色はブランドの朱色で。",
    "en": "Add a scroll progress bar at the top of the article page, 4 px thick, in the brand orange."
   },
   "summary": {
    "ja": "記事を少しずつ読み進めるごとに、画面の上端の線が左から伸び、最後まで来ると端まで届く。",
    "en": "As the article is read a bit at a time, the line along the top grows from the left and reaches the far end at the bottom of the page."
   },
   "spec": {
    "ja": [
     "記事のページを 0→430px までスクロール。110pxずつ4回、それぞれ0.45秒で動いて0.4秒止まる（easeInOut 3乗）",
     "3.75〜4.55秒で 430→0 に戻る",
     "表示域の上端に高さ6pxの線。地は薄いグレー、伸びる部分は朱色",
     "伸びる幅 = 511px × スクロール量 / 430（スクロールの割合そのまま。CSS の animation-timeline: scroll() と同じ）"
    ],
    "en": [
     "The article scrolls 0→430 px in four 110 px steps, each moving for 0.45 s then pausing 0.4 s (cubic ease-in-out).",
     "It returns 430→0 at 3.75–4.55 s.",
     "A 6 px bar along the top of the viewport: light grey track, orange fill.",
     "Fill width = 511 px × scroll / 430, the scroll fraction itself (the same as CSS animation-timeline: scroll())."
    ]
   },
   "use": {
    "ja": "長い記事やコラムで、あとどれくらいで読み終わるかを伝えたいとき。",
    "en": "Use it on long articles to show how much is left to read."
   },
   "tags": [
    "progress-bar",
    "reading-progress",
    "scroll-progress",
    "indicator",
    "scroll-driven",
    "article"
   ]
  },
  {
   "id": "080",
   "pack": "lp",
   "no": "08",
   "slug": "highlighter-animation",
   "category": "scroll",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "マーカーアニメーション",
    "en": "Highlighter animation"
   },
   "meaning": {
    "ja": "大事な言葉に蛍光ペンの線が引かれる",
    "en": "A highlighter stroke is drawn under key words"
   },
   "ask": {
    "ja": "強調したい言葉に、スクロールで画面に入ったらマーカーアニメーションで黄色の線を引いて。0.8秒で左から。",
    "en": "When the key phrase scrolls into view, draw a yellow highlighter animation under it, left to right in 0.8 s."
   },
   "summary": {
    "ja": "スクロールで文章が画面に入ると、大事な言葉の下半分に黄色い蛍光ペンの線が左から引かれる。",
    "en": "As the copy scrolls into view, a yellow highlighter stroke is drawn left to right across the lower half of the key words."
   },
   "spec": {
    "ja": [
     "スクロール量: 0.35〜1.0秒で 0→90px、1.6〜2.2秒で 90→180px、3.3〜4.4秒で 180→0（easeInOut 3乗）",
     "文章は2行（20px・太字）。ページ上の 190px と 290px にあり、最初は画面の下に隠れている",
     "行の上端が判定線（表示域の高さの80%＝134px）より上に来た時刻に、強調する言葉の下に線を引き始める",
     "線: 黄色 #FFE36B、高さ11（文字の下寄り。ベースラインの8px上〜3px下）。幅 0→言葉の幅 を0.8秒で左から（easeOut 3乗）。文字の後ろに描く",
     "画面の下へ出た行は、見えない所で線を消して元に戻す"
    ],
    "en": [
     "Scroll: 0→90 px at 0.35–1.0 s, 90→180 px at 1.6–2.2 s, 180→0 at 3.3–4.4 s (cubic ease-in-out).",
     "Two lines of copy (20 px, bold) at 190 px and 290 px down the page, hidden below the view at first.",
     "When a line's top passes the trigger line (80% of the viewport height, 134 px), the stroke under its key words starts.",
     "Stroke: yellow #FFE36B, 11 tall, in the lower part of the text (8 px above to 3 px below the baseline). Width 0 → word width from the left over 0.8 s (cubic ease-out), drawn behind the text.",
     "Lines that leave the bottom of the view are reset out of sight."
    ]
   },
   "use": {
    "ja": "LPの本文で、いちばん伝えたい一言を読んでいる瞬間に目立たせたいとき。",
    "en": "Use it in landing-page copy to make the one phrase that matters stand out as it is read."
   },
   "tags": [
    "highlighter",
    "marker",
    "text-highlight",
    "emphasis",
    "scroll-reveal",
    "copy",
    "underline"
   ]
  },
  {
   "id": "081",
   "pack": "lp",
   "no": "09",
   "slug": "hover-lift",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ホバーで浮き上がる",
    "en": "Hover lift"
   },
   "meaning": {
    "ja": "カーソルを乗せると影を付けて浮く",
    "en": "On hover, the element rises with a deeper shadow"
   },
   "ask": {
    "ja": "カードにカーソルを乗せたら、ホバーで浮き上がるようにして。上に8px、影を濃く、0.3秒で。",
    "en": "Give the cards a hover lift: up 8 px with a deeper shadow, over 0.3 s."
   },
   "summary": {
    "ja": "カーソルが乗ったカードだけが少し上に持ち上がり、下の影が広がる。カーソルが離れると元に戻る。",
    "en": "Only the card under the cursor lifts slightly and its shadow spreads; it settles back when the cursor leaves."
   },
   "spec": {
    "ja": [
     "カード3枚（146×128・角丸10）。カーソルが左から順に約1秒ずつ乗る",
     "乗ったら0.3秒で上へ10px（easeOut 3乗）。離れたら同じ0.3秒で戻る（CSS の transition と同じ）",
     "影: ぼかし 6→22px、下へのずれ 2→12px、濃さ 0.08→0.22 を移動と一緒に変える",
     "地は薄いグレー、カードは白（影が見えるように）"
    ],
    "en": [
     "Three cards (146 × 128, radius 10). The cursor rests on each, left to right, for about 1 s.",
     "On hover the card rises 10 px over 0.3 s (cubic ease-out); on leave it returns over the same 0.3 s (like a CSS transition).",
     "Shadow, changed together with the lift: blur 6→22 px, y offset 2→12 px, opacity 0.08→0.22.",
     "Light grey page, white cards, so the shadow reads."
    ]
   },
   "use": {
    "ja": "カード・ボタンなど、押せる物を押せそうに見せたいとき。",
    "en": "Use it to make cards and buttons look clickable."
   },
   "tags": [
    "hover",
    "lift",
    "float",
    "card",
    "shadow",
    "translatey",
    "interaction"
   ]
  },
  {
   "id": "082",
   "pack": "lp",
   "no": "10",
   "slug": "image-zoom-on-hover",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ホバーで画像ズーム",
    "en": "Image zoom on hover"
   },
   "meaning": {
    "ja": "枠はそのままで写真だけ拡大する",
    "en": "The photo enlarges inside a fixed frame"
   },
   "ask": {
    "ja": "実績の写真にホバーで画像ズームを付けて。枠は固定で、中身を1.1倍まで0.5秒で。",
    "en": "Add an image zoom on hover to the work photos: fixed frame, content to 1.1× over 0.5 s."
   },
   "summary": {
    "ja": "カーソルが乗った写真だけが、枠の大きさは変えずに中身がゆっくり拡大し、離れると戻る。",
    "en": "The photo under the cursor slowly enlarges while its frame stays the same size, and shrinks back when the cursor leaves."
   },
   "spec": {
    "ja": [
     "写真の枠 222×118（角丸8）を2つ並べる。カーソルが左、右の順に約1.5秒ずつ乗る",
     "乗ったら0.5秒で中身の拡大率 1→1.15（中心から・easeOut 3乗）。離れたら同じ0.5秒で戻る",
     "枠の外にはみ出した部分は切る（overflow: hidden）。枠と下の文字は動かない"
    ],
    "en": [
     "Two photo frames, 222 × 118 (radius 8). The cursor rests on the left one, then the right one, for about 1.5 s each.",
     "On hover the content scales 1→1.15 from the centre over 0.5 s (cubic ease-out); on leave it returns over 0.5 s.",
     "Anything outside the frame is clipped (overflow: hidden). The frame and the caption do not move."
    ]
   },
   "use": {
    "ja": "写真の一覧（実績・商品・記事）で、どれを選ぼうとしているかを伝えたいとき。",
    "en": "Use it on photo grids (work, products, articles) to show which item is about to be chosen."
   },
   "tags": [
    "hover",
    "zoom",
    "image",
    "scale",
    "overflow-hidden",
    "thumbnail",
    "gallery"
   ]
  },
  {
   "id": "083",
   "pack": "lp",
   "no": "11",
   "slug": "cursor-follower",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "マウスストーカー",
    "en": "Cursor follower"
   },
   "meaning": {
    "ja": "カーソルを丸が遅れて追いかける",
    "en": "A shape trails the mouse pointer with a delay"
   },
   "ask": {
    "ja": "サイト全体にマウスストーカーを付けて。直径30pxの朱色の丸が、少し遅れてカーソルを追うように。",
    "en": "Add a cursor follower across the site: a 30 px orange circle that trails the pointer slightly."
   },
   "summary": {
    "ja": "カーソルがページの上を動き回ると、朱色の丸が少し遅れてそのあとを追いかける。",
    "en": "As the cursor moves around the page, an orange circle follows it a little behind."
   },
   "spec": {
    "ja": [
     "カーソルの道筋: x = 255 + 175·sin(2πt/4.8)、y = 86 + 46·sin(4πt/4.8)（8の字を横に寝かせた形・4.8秒で1周）",
     "丸: 半径17・朱色・不透明度0.88。カーソルの下に描く",
     "追いかけ方: 毎フレーム（60fps）残りの距離の12%ずつ近づく（x += (カーソルのx − x) × 0.12）",
     "カーソル（矢印）はそのまま見せる"
    ],
    "en": [
     "Cursor path: x = 255 + 175·sin(2πt/4.8), y = 86 + 46·sin(4πt/4.8) (a figure eight lying on its side, one lap per 4.8 s).",
     "Circle: radius 17, orange, opacity 0.88, drawn under the cursor.",
     "Follow rule: every frame (60 fps) it covers 12% of the remaining distance (x += (cursor x − x) × 0.12).",
     "The arrow cursor stays visible."
    ]
   },
   "use": {
    "ja": "ブランドサイトやポートフォリオで、触っている感じや遊び心を足したいとき。",
    "en": "Use it on brand sites and portfolios to add a playful, hands-on feel."
   },
   "tags": [
    "cursor",
    "custom-cursor",
    "cursor-follower",
    "mouse-follow",
    "lerp",
    "trail",
    "interaction"
   ]
  },
  {
   "id": "084",
   "pack": "lp",
   "no": "12",
   "slug": "magnetic-button",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "マグネティックボタン",
    "en": "Magnetic button"
   },
   "meaning": {
    "ja": "近づいたカーソルにボタンが吸い寄せられる",
    "en": "The button is pulled toward a nearby cursor"
   },
   "ask": {
    "ja": "問い合わせボタンをマグネティックボタンにして。カーソルとの差の0.3倍だけ寄って、離れたらぷるんと戻して。",
    "en": "Make the contact button a magnetic button: move 0.3× toward the cursor, and spring back when it leaves."
   },
   "summary": {
    "ja": "カーソルが近づくとボタンがカーソルの方へ引き寄せられてついていき、離れるとぷるんと揺れて元の位置に戻る。",
    "en": "As the cursor comes near, the button is drawn toward it and follows; when the cursor leaves, the button wobbles back to its place."
   },
   "spec": {
    "ja": [
     "ボタン 168×52（朱色・角丸26）を中央に置く。引き寄せる範囲はボタンの中心から半径110px",
     "範囲内: 目標のずれ = (カーソル − ボタンの中心) × 0.35。毎フレーム（60fps）残りの18%ずつ目標へ近づく",
     "範囲外へ出たら、その時のずれから 0 へ1.1秒で戻す。イージングは elastic.out(1, 0.3)（2^(−10x)·sin((x − 0.075)·2π/0.3) + 1）",
     "カーソルは左の外から入り、ボタンのまわりを回ってから右の外へ出る"
    ],
    "en": [
     "A 168 × 52 button (orange, radius 26) in the centre. The pull range is a 110 px radius from the button's centre.",
     "Inside the range: target offset = (cursor − button centre) × 0.35; every frame (60 fps) the button covers 18% of the way to the target.",
     "On leaving the range it returns from its current offset to 0 over 1.1 s with elastic.out(1, 0.3): 2^(−10x)·sin((x − 0.075)·2π/0.3) + 1.",
     "The cursor enters from the left, circles the button and leaves to the right."
    ]
   },
   "use": {
    "ja": "申し込み・問い合わせなど、いちばん押してほしいボタンを目立たせたいとき。",
    "en": "Use it on the one button you most want clicked, such as sign-up or contact."
   },
   "tags": [
    "magnetic",
    "magnetic-button",
    "hover",
    "cursor",
    "elastic",
    "cta",
    "interaction"
   ]
  },
  {
   "id": "085",
   "pack": "lp",
   "no": "13",
   "slug": "ripple-effect",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "リップルエフェクト",
    "en": "Ripple effect"
   },
   "meaning": {
    "ja": "押した場所から波紋が広がる",
    "en": "A ripple spreads from the point that was pressed"
   },
   "ask": {
    "ja": "送信ボタンにリップルエフェクトを付けて。押した位置から白い円が0.6秒で広がって消えるように。",
    "en": "Add a ripple effect to the submit button: a white circle spreads from the click point and fades in 0.6 s."
   },
   "summary": {
    "ja": "ボタンを押すたびに、押した場所を中心に白い円が広がってボタンの中を満たし、薄れて消える。",
    "en": "Each click sends a white circle out from the click point to fill the button, then it fades away."
   },
   "spec": {
    "ja": [
     "ボタン 280×56（朱色・角丸10）。0.7秒に左寄り、2.9秒に右寄りの場所をクリック",
     "円の中心 = クリックした点。半径 0 → クリック点から一番遠いボタンの角までの距離、0.6秒で（easeOut 3乗）",
     "色は白・不透明度0.4。クリックから0.3〜0.8秒で 0 まで薄くする",
     "円はボタンの形で切り取る（overflow: hidden）。文字は円の上に描く"
    ],
    "en": [
     "Button 280 × 56 (orange, radius 10). Clicks at 0.7 s (left of centre) and 2.9 s (right of centre).",
     "The circle is centred on the click point; its radius grows from 0 to the distance to the button's farthest corner over 0.6 s (cubic ease-out).",
     "White at 0.4 opacity, fading to 0 between 0.3 and 0.8 s after the click.",
     "The circle is clipped to the button (overflow: hidden); the label sits above it."
    ]
   },
   "use": {
    "ja": "ボタンやリストを押したことを、その場ですぐ返したいとき。",
    "en": "Use it to confirm a press on a button or list item right where it happened."
   },
   "tags": [
    "ripple",
    "ink-ripple",
    "material",
    "click",
    "tap",
    "feedback",
    "button"
   ]
  },
  {
   "id": "086",
   "pack": "lp",
   "no": "14",
   "slug": "underline-animation",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "下線アニメーション",
    "en": "Underline animation"
   },
   "meaning": {
    "ja": "乗せたリンクの下線が左から伸びる",
    "en": "A link's underline grows from the left on hover"
   },
   "ask": {
    "ja": "メニューのリンクに下線アニメーションを付けて。乗せたら左から0.3秒で伸び、離れたら右へ抜けるように。",
    "en": "Add an underline animation to the menu links: grow from the left in 0.3 s on hover, and exit to the right on leave."
   },
   "summary": {
    "ja": "カーソルが乗ったリンクの下に、朱色の線が左から伸び、離れると線は右へ縮んで抜けていく。",
    "en": "Under the link the cursor is on, an orange line grows from the left; when the cursor leaves, the line shrinks away to the right."
   },
   "spec": {
    "ja": [
     "リンク3つ（20px・太字・間隔56）。カーソルが左から順に約1秒ずつ乗る（当たり判定は文字の左右6px広め）",
     "下線: 朱色・太さ3・ベースラインの8px下",
     "乗ったら 幅 0→100% を0.3秒で左端から伸ばす（easeOut 3乗）",
     "離れたら 左端を右へ0.3秒で動かし、右へ抜けるように消す（transform-origin を右にした scaleX と同じ）"
    ],
    "en": [
     "Three links (20 px, bold, 56 apart). The cursor rests on each, left to right, for about 1 s (hit area 6 px wider than the text on each side).",
     "Underline: orange, 3 thick, 8 px below the baseline.",
     "On hover, width 0→100% from the left end over 0.3 s (cubic ease-out).",
     "On leave, the left end moves right over 0.3 s, so the line exits to the right (like scaleX with transform-origin on the right)."
    ]
   },
   "use": {
    "ja": "ヘッダーのメニューや本文のリンクで、どこを指しているかを上品に伝えたいとき。",
    "en": "Use it on menu and text links to show where the pointer is, quietly."
   },
   "tags": [
    "underline",
    "hover",
    "link",
    "navigation",
    "menu",
    "text-link",
    "scalex"
   ]
  },
  {
   "id": "087",
   "pack": "lp",
   "no": "15",
   "slug": "before-after-slider",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ビフォーアフタースライダー",
    "en": "Before/after slider"
   },
   "meaning": {
    "ja": "境目をドラッグして前と後を見比べる",
    "en": "Drag a divider to compare before and after"
   },
   "ask": {
    "ja": "施工例の写真をビフォーアフタースライダーにして。真ん中の線をドラッグすると、左が施工前、右が施工後で見比べられるように。",
    "en": "Show the project photos as a before/after slider: drag the middle line to compare before on the left and after on the right."
   },
   "summary": {
    "ja": "写真の真ん中の線をドラッグして左右に動かすと、左側は色のない「前」、右側は色のある「後」の範囲が入れ替わる。",
    "en": "Dragging the line in the middle of the photo left and right changes how much of the grey \"before\" (left) and the coloured \"after\" (right) is shown."
   },
   "spec": {
    "ja": [
     "写真の枠 359×140（角丸10）。右は加工後（色あり）、左は同じ写真を加工前に（彩度を抜き、濃紺 不透明度0.18 を重ねる）",
     "境目より左だけ加工前を見せる（clip）。境目に白い線（幅3）と、左右の矢印の付いた白い丸（半径17）",
     "0.7秒に丸をつかみ、境目の位置を 50%→20%（0.75〜1.55秒）→82%（1.55〜2.65秒）→50%（2.65〜3.55秒）。いずれも easeInOut 3乗",
     "3.62秒に離す。左上に BEFORE、右上に AFTER の札"
    ],
    "en": [
     "Photo frame 359 × 140 (radius 10). Right: the edited photo in colour. Left: the same photo as the \"before\" (saturation removed, navy at 0.18 opacity on top).",
     "The before image is clipped to the left of the divider. On the divider: a white line (3 wide) and a white circle (radius 17) with left/right arrows.",
     "At 0.7 s the circle is grabbed; the divider goes 50%→20% (0.75–1.55 s) →82% (1.55–2.65 s) →50% (2.65–3.55 s), all cubic ease-in-out.",
     "Released at 3.62 s. Labels BEFORE (top left) and AFTER (top right)."
    ]
   },
   "use": {
    "ja": "施工・美容・写真の補正など、変化そのものを売りにするLPで。",
    "en": "Use it on pages that sell a change: renovation, beauty, photo retouching."
   },
   "tags": [
    "before-after",
    "image-comparison",
    "slider",
    "drag",
    "compare",
    "clip",
    "photo"
   ]
  },
  {
   "id": "088",
   "pack": "lp",
   "no": "16",
   "slug": "exit-intent-popup",
   "category": "hover-click",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "離脱防止ポップアップ",
    "en": "Exit-intent popup"
   },
   "meaning": {
    "ja": "ページを離れそうな時に出す引き止めの小窓",
    "en": "A popup shown when the visitor is about to leave"
   },
   "ask": {
    "ja": "LPに離脱防止ポップアップを付けて。カーソルが画面の上へ出たら、クーポンの小窓を1回だけ出して。",
    "en": "Add an exit-intent popup to the landing page: when the cursor leaves through the top, show a coupon popup once."
   },
   "summary": {
    "ja": "カーソルがページの上の方（タブや閉じるボタンのある所）へ出ていくと、背景が暗くなって「ちょっと待って！」の小窓が開く。×で閉じる。",
    "en": "When the cursor heads out through the top of the page (toward the tabs and close button), the page dims and a \"Wait!\" popup opens. The × closes it."
   },
   "spec": {
    "ja": [
     "カーソルは 0.7〜1.25秒にページの中からブラウザのアドレスバーの方へ上がる（easeInOut 3乗）",
     "表示域の上端（y = 0）を越えた時刻（約1.07秒）に発火（document の mouseleave で clientY ≤ 0 と同じ判定）",
     "発火の0.05〜0.45秒後に開く（easeOut 3乗）: 背景 濃紺 不透明度 0→0.5、小窓（260×132・角丸12）不透明度 0→1、拡大率 0.9→1",
     "小窓の中は見出し・割引の一言（朱色）・クーポンのボタン・右上の×",
     "2.9秒に×をクリック。0.03〜0.25秒後に消える（等速）"
    ],
    "en": [
     "The cursor rises from the page toward the browser's address bar at 0.7–1.25 s (cubic ease-in-out).",
     "It fires when the cursor crosses the top edge of the viewport (y = 0, at about 1.07 s), the same test as mouseleave on document with clientY ≤ 0.",
     "Opens 0.05–0.45 s after firing (cubic ease-out): backdrop navy 0→0.5 opacity; popup (260 × 132, radius 12) opacity 0→1 and scale 0.9→1.",
     "Inside: a heading, a discount line (orange), a coupon button and an × at the top right.",
     "Click on the × at 2.9 s; it disappears 0.03–0.25 s later (linear)."
    ]
   },
   "use": {
    "ja": "申し込みや購入の直前で帰ってしまう人に、最後の一押しをしたいとき。",
    "en": "Use it to make one last offer to visitors who are about to leave without converting."
   },
   "tags": [
    "exit-intent",
    "popup",
    "mouseleave",
    "coupon",
    "conversion",
    "retention",
    "lp"
   ]
  },
  {
   "id": "089",
   "pack": "lp",
   "no": "17",
   "slug": "preloader",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ローディング画面",
    "en": "Preloader"
   },
   "meaning": {
    "ja": "読み込み中に出す画面",
    "en": "A screen shown while the page loads"
   },
   "ask": {
    "ja": "サイトを開いたときのローディング画面を作って。ロゴと％の数字を出して、100%になったら幕が上がるように。",
    "en": "Make a preloader for the site: logo and a percentage, and the screen lifts away at 100%."
   },
   "summary": {
    "ja": "濃紺の画面でロゴの下の数字が0%から100%まで進み、終わると画面が上へ抜けて、下のページがふわっと現れる。",
    "en": "On a navy screen the number under the logo counts from 0% to 100%; then the screen lifts away and the page underneath fades in."
   },
   "spec": {
    "ja": [
     "表示域いっぱいの濃紺の画面に、ロゴ・数字（28px）・線（180×4）",
     "0.25〜2.1秒で 0→100%（easeOut 3乗・整数に丸める）。線も同じ割合で朱色に伸びる",
     "2.3〜2.85秒に画面ごと上へ168px抜ける（easeInOut 3乗）",
     "ページの見出し・写真は 2.35〜2.95秒に 不透明度 0→1、14px下から上がる（easeOut 3乗）",
     "4.25〜4.75秒に画面が上から下りてきて、0%の状態に戻る（次の読み込み）"
    ],
    "en": [
     "A navy screen fills the viewport with a logo, a number (28 px) and a bar (180 × 4).",
     "0→100% at 0.25–2.1 s (cubic ease-out, rounded to whole numbers); the bar fills in orange at the same rate.",
     "At 2.3–2.85 s the whole screen moves up 168 px and out (cubic ease-in-out).",
     "The page heading and photo fade in 0→1 and rise from 14 px below at 2.35–2.95 s (cubic ease-out).",
     "At 4.25–4.75 s the screen comes back down from the top, at 0% (the next load)."
    ]
   },
   "use": {
    "ja": "写真や動画の多いサイトで、読み込みの待ち時間をブランドの見せ場にしたいとき。",
    "en": "Use it on image- or video-heavy sites to turn the loading wait into a brand moment."
   },
   "tags": [
    "preloader",
    "loading-screen",
    "loader",
    "percentage",
    "intro",
    "splash",
    "curtain"
   ]
  },
  {
   "id": "090",
   "pack": "lp",
   "no": "18",
   "slug": "lazy-loading",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "遅延読み込み",
    "en": "Lazy loading"
   },
   "meaning": {
    "ja": "画面に入った画像だけを読み込む",
    "en": "Images load only when they come into view"
   },
   "ask": {
    "ja": "ギャラリーの画像を遅延読み込みにして。読み込むまでは灰色の枠、届いたら0.3秒でフェードインして。",
    "en": "Lazy load the gallery images: grey placeholders until loaded, then fade in over 0.3 s."
   },
   "summary": {
    "ja": "スクロールで画面に入った灰色の枠に読み込み中の印が回り、画像が届くと順にフェードインする。上の段は最初から読み込み済み。",
    "en": "As grey placeholders scroll into view, a spinner turns in each, and the images fade in as they arrive. The top row is loaded from the start."
   },
   "spec": {
    "ja": [
     "画像の枠 151×92 を3列×3段。1段目は最初から表示。スクロール量: 0.35〜1.1秒で 0→110px、1.7〜2.5秒で 110→225px、3.5〜4.5秒で 225→0（easeInOut 3乗）",
     "枠の上端が表示域の下端（168px）より上に入った時刻に読み込み開始。列ごとに0.12秒ずつずらす",
     "読み込み中の0.45秒は、枠の中央で回る印（半径11・0.8秒で1回転）",
     "そのあと0.35秒で画像の不透明度 0→1（easeOut 3乗）。読み込み前の枠には画像の印を描く",
     "画面の下へ出た枠は、見えない所で読み込み前に戻る"
    ],
    "en": [
     "A 3 × 3 grid of 151 × 92 placeholders; the first row is shown from the start. Scroll: 0→110 px at 0.35–1.1 s, 110→225 px at 1.7–2.5 s, 225→0 at 3.5–4.5 s (cubic ease-in-out).",
     "Loading starts when a placeholder's top edge passes above the bottom of the viewport (168 px), with each column 0.12 s later than the one to its left.",
     "For 0.45 s a spinner (radius 11, one turn per 0.8 s) turns in the placeholder's centre.",
     "Then the image fades in 0→1 over 0.35 s (cubic ease-out). Unloaded placeholders show an image icon.",
     "Placeholders that leave the bottom of the view are reset out of sight."
    ]
   },
   "use": {
    "ja": "画像の多いページで、最初の表示を速くしたいとき。",
    "en": "Use it on image-heavy pages to make the first view load faster."
   },
   "tags": [
    "lazy-loading",
    "lazy-load",
    "images",
    "placeholder",
    "performance",
    "spinner",
    "gallery"
   ]
  },
  {
   "id": "091",
   "pack": "lp",
   "no": "19",
   "slug": "infinite-scroll",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "無限スクロール",
    "en": "Infinite scroll"
   },
   "meaning": {
    "ja": "下まで来ると続きが自動で足される",
    "en": "More items load automatically at the bottom"
   },
   "ask": {
    "ja": "お知らせの一覧を無限スクロールにして。下まで来たら読み込み表示を出して、10件ずつ足して。",
    "en": "Make the news list an infinite scroll: show a spinner at the bottom and add ten items at a time."
   },
   "summary": {
    "ja": "一覧を下へスクロールして最後まで来ると、読み込み中の印が回り、新しい項目が3件足されて続きが読めるようになる。",
    "en": "Scrolling down to the end of the list brings up a spinner, then three new items are added so reading can go on."
   },
   "spec": {
    "ja": [
     "項目（331×44・角丸8・間隔52）の一覧。最後の項目の下に読み込み中の印（半径10・0.8秒で1回転）",
     "スクロール量: 0.25〜0.85秒で 38→116px、1.15〜1.75秒で 116→194px（easeInOut 3乗）。一覧の終わりが見えて止まる",
     "2.6秒に3件を足す: 各項目 0.35秒で 不透明度 0→1、10px下から上がる（easeOut 3乗）。印は新しい終わりへ移る",
     "1周期で3件（156px）ぶん進む。中身は3件ごとにくり返すので、周期の終わりと始まりは同じ見た目"
    ],
    "en": [
     "A list of items (331 × 44, radius 8, 52 apart) with a spinner (radius 10, one turn per 0.8 s) under the last item.",
     "Scroll: 38→116 px at 0.25–0.85 s, 116→194 px at 1.15–1.75 s (cubic ease-in-out); it stops with the end of the list in view.",
     "At 2.6 s three items are added: each fades 0→1 and rises from 10 px below over 0.35 s (cubic ease-out). The spinner moves to the new end.",
     "Each cycle advances by three items (156 px). The content repeats every three items, so the end of the cycle looks the same as the start."
    ]
   },
   "use": {
    "ja": "SNSのタイムラインやお知らせ一覧のように、終わりを気にせず読み続けてほしいとき。",
    "en": "Use it for feeds and news lists that people should keep reading without paging."
   },
   "tags": [
    "infinite-scroll",
    "endless-scroll",
    "load-more",
    "feed",
    "pagination",
    "spinner",
    "list"
   ]
  },
  {
   "id": "092",
   "pack": "lp",
   "no": "20",
   "slug": "page-transition",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ページ遷移アニメーション",
    "en": "Page transition"
   },
   "meaning": {
    "ja": "ページを移るときの切り替えの演出",
    "en": "An animation that bridges two pages"
   },
   "ask": {
    "ja": "ページ遷移アニメーションを付けて。リンクを押したら朱色の幕が左から右へ横切って次のページに切り替わるように。",
    "en": "Add a page transition: on link click, an orange panel sweeps across left to right and the next page appears."
   },
   "summary": {
    "ja": "作品の一覧でカードを押すと朱色の幕が左から画面を覆い、URLが変わって幕が右へ抜けると詳しいページになっている。「一覧へ」で同じように戻る。",
    "en": "Clicking a card in the work list sweeps an orange panel across from the left; the URL changes and the panel exits to the right on the detail page. \"Back to list\" returns the same way."
   },
   "spec": {
    "ja": [
     "0.8秒にカードをクリック。0.9〜1.3秒に幕（朱色・表示域いっぱい・中央にロゴ）が左から入って全体を覆う（easeInOut 3乗）",
     "1.3秒、覆われている間にページとアドレスバーのURL（/works → /works/02）を切り替える",
     "1.4〜1.85秒に幕が右へ抜ける（easeInOut 3乗）",
     "3.0秒に「← 一覧へ」をクリック。3.1〜3.5秒に入り、3.5秒に切り替え、3.6〜4.05秒に抜ける",
     "ヘッダーも含めて表示域全体を覆う"
    ],
    "en": [
     "Click on a card at 0.8 s. At 0.9–1.3 s a panel (orange, full viewport, logo in the centre) enters from the left and covers everything (cubic ease-in-out).",
     "At 1.3 s, while covered, the page and the URL in the address bar (/works → /works/02) switch.",
     "At 1.4–1.85 s the panel exits to the right (cubic ease-in-out).",
     "Click on \"← Back to list\" at 3.0 s: the panel enters at 3.1–3.5 s, the page switches at 3.5 s and the panel exits at 3.6–4.05 s.",
     "The panel covers the whole viewport, header included."
    ]
   },
   "use": {
    "ja": "ブランドサイトやポートフォリオで、ページを移るときの間をつなぎたいとき。",
    "en": "Use it on brand sites and portfolios to link one page to the next."
   },
   "tags": [
    "page-transition",
    "transition",
    "view-transitions",
    "navigation",
    "wipe",
    "barba",
    "spa"
   ]
  },
  {
   "id": "093",
   "pack": "lp",
   "no": "21",
   "slug": "smooth-scroll",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "スムーススクロール",
    "en": "Smooth scroll"
   },
   "meaning": {
    "ja": "ページ内リンクでなめらかに移動する",
    "en": "In-page links glide to their target instead of jumping"
   },
   "ask": {
    "ja": "メニューのページ内リンクをスムーススクロールにして。固定ヘッダーの高さ分ずらして止めて。",
    "en": "Make the menu's in-page links smooth scroll, stopping below the fixed header."
   },
   "summary": {
    "ja": "メニューの「料金」を押すとページがなめらかに料金の欄まで動き、右下の上向きボタンを押すと同じように一番上へ戻る。",
    "en": "Clicking \"Pricing\" in the menu glides the page down to the pricing section; the up arrow at the bottom right glides it back to the top."
   },
   "spec": {
    "ja": [
     "0.9秒にメニューの「料金」をクリック。0.95〜2.0秒（1.05秒）でスクロール量 0→296px（easeInOut 3乗）",
     "止まる位置 = 料金の欄の上端（330px）− 固定ヘッダーの高さ（34px）",
     "スクロール量が60pxを超えると、右下に「ページの先頭へ」の丸ボタン（半径15）が40pxかけて現れる",
     "3.1秒にそのボタンをクリック。3.15〜4.2秒で 296→0（easeInOut 3乗）",
     "料金の欄に入っている間、メニューの「料金」を朱色にする"
    ],
    "en": [
     "At 0.9 s the \"Pricing\" menu item is clicked; scroll goes 0→296 px over 0.95–2.0 s (1.05 s, cubic ease-in-out).",
     "Stop position = top of the pricing section (330 px) − fixed header height (34 px).",
     "Once scroll passes 60 px, a round back-to-top button (radius 15) fades in over the next 40 px at the bottom right.",
     "At 3.1 s that button is clicked; scroll goes 296→0 over 3.15–4.2 s (cubic ease-in-out).",
     "While the pricing section is in view, \"Pricing\" in the menu turns orange."
    ]
   },
   "use": {
    "ja": "目次やメニューから同じページの中の欄へ移るとき、今どこへ動いたかを分かりやすくしたいとき。",
    "en": "Use it when a menu or table of contents jumps within the same page, so the reader sees where they went."
   },
   "tags": [
    "smooth-scroll",
    "scroll-behavior",
    "anchor-link",
    "in-page-link",
    "back-to-top",
    "navigation"
   ]
  },
  {
   "id": "094",
   "pack": "lp",
   "no": "22",
   "slug": "marquee",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "マーキー",
    "en": "Marquee"
   },
   "meaning": {
    "ja": "文字や画像が帯で流れ続ける",
    "en": "Text or logos scroll across in an endless band"
   },
   "ask": {
    "ja": "サービス名をマーキーで右から左へ流して。途切れずにループさせて、速さは1秒に80pxくらい。",
    "en": "Run the service names in a marquee from right to left, looping without a gap, at about 80 px per second."
   },
   "summary": {
    "ja": "濃紺の帯の中で、大きな英字のサービス名と朱色の点が、途切れずに左へ流れ続ける。",
    "en": "Inside a navy band, large service names separated by orange dots keep moving to the left without a gap."
   },
   "spec": {
    "ja": [
     "帯: 高さ58・濃紺・表示域の幅いっぱい。文字: 30px・太字・字間1px・白",
     "4語（WEB DESIGN / BRANDING / MOTION / UI/UX）を1組とし、語の間は64px、その真ん中に朱色の点（半径6）",
     "1周期（4.8秒）で1組の幅（この環境で約881px）だけ等速で左へ動かす。1組の幅を測って位置を 周期で折り返すので、つなぎ目が出ない",
     "表示域の幅が埋まるまで同じ組をくり返して並べる"
    ],
    "en": [
     "Band: 58 tall, navy, full viewport width. Text: 30 px, heavy weight, 1 px letter spacing, white.",
     "One set is four words (WEB DESIGN / BRANDING / MOTION / UI/UX), 64 px apart, with an orange dot (radius 6) in each gap.",
     "Each cycle (4.8 s) moves left by the width of one set (about 881 px here) at constant speed. The set is measured and the offset wraps by that width, so there is no visible seam.",
     "The set is repeated until the viewport width is filled."
    ]
   },
   "use": {
    "ja": "サービス名・取引先のロゴ・キャッチコピーを、にぎやかに見せたいとき。",
    "en": "Use it to show service names, client logos or a tagline with energy."
   },
   "tags": [
    "marquee",
    "ticker",
    "infinite-loop",
    "scrolling-text",
    "logo-strip",
    "band",
    "loop"
   ]
  },
  {
   "id": "095",
   "pack": "lp",
   "no": "23",
   "slug": "animated-gradient",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "グラデーションアニメーション",
    "en": "Animated gradient"
   },
   "meaning": {
    "ja": "背景の色の混ざり方が動き続ける",
    "en": "Background colours keep drifting and blending"
   },
   "ask": {
    "ja": "ファーストビューの背景をグラデーションアニメーションにして。朱色と青がゆっくり混ざり合うように、10秒で1周。",
    "en": "Give the hero an animated gradient background: orange and blue slowly blending, one loop every 10 s."
   },
   "summary": {
    "ja": "見出しの後ろで、朱色・薄い朱色・青・薄い青のぼんやりした色の塊がゆっくり回り、混ざり方が変わり続ける。",
    "en": "Behind the headline, soft patches of orange, light orange, blue and light blue drift in circles and keep blending differently."
   },
   "spec": {
    "ja": [
     "地は #FFF1EB。その上に円形のグラデーション4つ（中心の色→外側で透明・各不透明度0.85）",
     "朱色（半径230）・薄い朱色 #FFB08F（210）・青（240）・薄い青 #9DB6FB（200）",
     "各中心は楕円の上を4.8秒で1周する（横の半径 70・60・80・50、縦の半径 30・40・30・35、出だしの角度 0・2.1・4.2・1.0rad）",
     "上に白の見出し（34px）とボタン。グラデーションだけが動く"
    ],
    "en": [
     "Base colour #FFF1EB, with four radial gradients on top (centre colour → transparent at the edge, each at 0.85 opacity).",
     "Orange (radius 230), light orange #FFB08F (210), blue (240), light blue #9DB6FB (200).",
     "Each centre travels an ellipse once per 4.8 s (x radii 70, 60, 80, 50; y radii 30, 40, 30, 35; start angles 0, 2.1, 4.2, 1.0 rad).",
     "A white headline (34 px) and a button sit on top; only the gradient moves."
    ]
   },
   "use": {
    "ja": "写真を使わずに、ファーストビューや見出しの背景に動きと華やかさを出したいとき。",
    "en": "Use it to add movement and colour behind a hero or heading without using a photo."
   },
   "tags": [
    "gradient",
    "animated-gradient",
    "mesh-gradient",
    "background",
    "hero",
    "ambient",
    "loop"
   ]
  },
  {
   "id": "096",
   "pack": "lp",
   "no": "24",
   "slug": "floating-animation",
   "category": "loading-loops",
   "width": 539,
   "height": 208,
   "cycle": 4.8,
   "name": {
    "ja": "ふわふわアニメーション",
    "en": "Floating animation"
   },
   "meaning": {
    "ja": "飾りがゆっくり上下に浮き沈みする",
    "en": "Elements bob gently up and down"
   },
   "ask": {
    "ja": "ファーストビューのスマホの画像に、ふわふわアニメーションを付けて。上下8px、2.4秒で1往復。",
    "en": "Give the phone image in the hero a floating animation: 8 px up and down, one bob every 2.4 s."
   },
   "summary": {
    "ja": "見出しの横で、スマホの画像とハートの丸・評価の札が、それぞれ少しずつずれてゆっくり上下し、スマホの下の影も伸び縮みする。",
    "en": "Next to the headline, a phone, a heart badge and a rating chip each bob gently out of step, and the shadow under the phone grows and shrinks."
   },
   "spec": {
    "ja": [
     "スマホ（92×132）: y = −8·sin(2πt/2.4)（2.4秒で1往復・サイン波なので両端でゆっくり）",
     "ハートの丸（半径20）: y = −6·sin(2πt/1.6 + 1.2)。評価の札（76×30）: y = −6·sin(2πt/2.4 + 2.4)",
     "スマホの下の影（横54×縦6の楕円）: 大きさ・濃さを (1 + y/40) 倍にする。上がると小さく薄くなる",
     "周期 2.4秒と1.6秒はどちらも4.8秒を割り切るので、つなぎ目が出ない"
    ],
    "en": [
     "Phone (92 × 132): y = −8·sin(2πt/2.4), one bob per 2.4 s; a sine slows at both ends.",
     "Heart badge (radius 20): y = −6·sin(2πt/1.6 + 1.2). Rating chip (76 × 30): y = −6·sin(2πt/2.4 + 2.4).",
     "Shadow under the phone (54 × 6 ellipse): size and opacity scale by (1 + y/40), so it shrinks and fades as the phone rises.",
     "Both periods (2.4 s and 1.6 s) divide 4.8 s, so the loop has no seam."
    ]
   },
   "use": {
    "ja": "アプリやサービスの画像、アイコンなどの飾りに、静かな動きを足したいとき。",
    "en": "Use it to add quiet motion to product images, app mockups or decorative icons."
   },
   "tags": [
    "floating",
    "float",
    "bob",
    "hover-animation",
    "keyframes",
    "translatey",
    "decoration",
    "loop"
   ]
  },
  {
   "id": "097",
   "pack": "photo",
   "no": "01",
   "slug": "backlighting",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "逆光",
    "en": "Backlighting"
   },
   "meaning": {
    "ja": "被写体の真後ろから光を当てる",
    "en": "The light source sits behind the subject"
   },
   "ask": {
    "ja": "草原に立つ人物を逆光で。夕日を頭の真後ろに置き、髪の輪郭が光ってふんわりとかすむように。",
    "en": "Backlit portrait of a person in a meadow, the low sun right behind their head, glowing hair outline and soft haze."
   },
   "summary": {
    "ja": "画面の外にあった太陽が人物の頭の真後ろへ回り込む。胸像の縁が細く光り、全体に淡い光の色がかかり、カメラ側の体は暗く沈む。",
    "en": "The sun moves from outside the frame to directly behind the person's head; a thin bright edge appears around the figure, a pale warm haze covers the frame and the side facing the camera darkens."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。光はアンバー #FFC75A の平らな面、影は一段濃い #33405A",
     "太陽: 半径20px。左上の画面外（x40, y−40）から頭の真後ろ（x270, y56）へ。周りに半径2.6倍・1.7倍の平らな光の輪（#FFE3A3、35%・60%）",
     "輪郭: 胸像の形を幅7pxの線でなぞってから中を塗り、外側3.5pxの光の縁だけを残す",
     "人物 #4D5A75 → #33405A。空 #FAF9F7 → #FFF4DC、全体に #FFE3A3 を22%重ねる",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). light is a flat amber #FFC75A shape, shadow a flat #33405A one",
     "Sun: radius 20 px, from outside the frame (top left, x 40, y −40) to directly behind the head (x 270, y 56), with flat rings of 2.6× and 1.7× the radius (#FFE3A3 at 35% and 60%)",
     "Outline: the figure is stroked with a 7 px line and then filled, leaving a 3.5 px bright edge outside it",
     "Figure #4D5A75 → #33405A; sky #FAF9F7 → #FFF4DC; #FFE3A3 laid over the whole frame at 22%",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "やわらかく明るい人物写真や、光に包まれた雰囲気を出したいとき。",
    "en": "For airy, glowing portraits or any image that should feel bathed in light."
   },
   "tags": [
    "backlighting",
    "backlit",
    "contre-jour",
    "sun behind",
    "haze",
    "glow",
    "halo"
   ]
  },
  {
   "id": "098",
   "pack": "photo",
   "no": "02",
   "slug": "rim-light",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "リムライト",
    "en": "Rim light"
   },
   "meaning": {
    "ja": "後ろからの光で輪郭だけを光らせる",
    "en": "A light from behind that outlines the subject's edge"
   },
   "ask": {
    "ja": "黒背景の人物に、斜め後ろ左右からリムライト。顔は暗いままで、頭と肩の輪郭だけ細く光らせて。",
    "en": "Portrait on a black background with rim lights from both rear sides; the face stays dark and only the outline of the head and shoulders glows."
   },
   "summary": {
    "ja": "周りが暗く落ち、斜め後ろ左右の2灯で、暗い人物の頭と肩の両側にだけ細い光の縁が出る。右下の図で2灯の位置を示す。",
    "en": "The surroundings go dark and two lights behind the person, left and right, draw thin bright edges only along both sides of the head and shoulders; the plan at the bottom right shows where the two lights are."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。",
     "背景: 明るい場面 → 暗い場面（空 #2B2D33、地面 #24252A）。人物 #4D5A75 → #1F2128",
     "光の縁: 胸像と同じ形をアンバー #FFC75A で左右に3.5px・上に2.5pxずらして2枚、暗い胸像の後ろに置く（縁の幅3.5px）",
     "右下の配置図（66×66px）: 光は真上から見て ±135°（斜め後ろ左右）。右上の表示「±135°」",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). ",
     "Background: light scene → dark scene (sky #2B2D33, ground #24252A); figure #4D5A75 → #1F2128",
     "Bright edges: two copies of the figure in amber #FFC75A, shifted 3.5 px left and right and 2.5 px up, placed behind the dark figure (3.5 px wide edges)",
     "Plan at the bottom right (66×66 px): lights at ±135° seen from above (behind, left and right); top-right readout \"±135°\"",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "暗い背景から人物や商品を切り離して、形をくっきり見せたいとき。",
    "en": "To separate a person or product from a dark background and show its shape."
   },
   "tags": [
    "rim light",
    "rim lighting",
    "edge light",
    "backlight",
    "kicker",
    "outline",
    "studio"
   ]
  },
  {
   "id": "099",
   "pack": "photo",
   "no": "03",
   "slug": "silhouette",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "シルエット",
    "en": "Silhouette"
   },
   "meaning": {
    "ja": "明るい空を背に、被写体を黒い形だけで見せる",
    "en": "The subject shows as a black shape against a bright sky"
   },
   "ask": {
    "ja": "夕焼けの浜辺でジャンプする人物をシルエットで。露出は空に合わせて、人物とヤシの木は真っ黒に。",
    "en": "Silhouette of a person jumping on a beach at sunset; expose for the sky so the person and the palm tree turn pure black."
   },
   "summary": {
    "ja": "露出を明るい夕空に合わせていくと、人物・建物・街灯・木が細部のない黒い形になり、空だけが明るく残る。",
    "en": "As the exposure is set for the bright evening sky, the person, buildings, lamp and tree turn into flat black shapes with no detail and only the sky stays bright."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。",
     "空: #FAF9F7 → 上 #FFEDC4・地平線近くの帯（y92〜150）#FFCF73",
     "空以外の形はすべて #2A2D36、遠くの丘は #4A4546。人物は #22252D",
     "太陽: 半径20px、x404 で y60 → y128 へ沈み、丘に半分隠れる",
     "右上の表示: ±0.0 EV → −2.0 EV",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). ",
     "Sky: #FAF9F7 → #FFEDC4 at the top and a #FFCF73 band near the horizon (y 92–150)",
     "Everything but the sky becomes #2A2D36, the far hills #4A4546; the figure #22252D",
     "Sun: radius 20 px at x 404, sinking from y 60 to y 128, half hidden by the hills",
     "Top-right readout: ±0.0 EV → −2.0 EV",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "夕日や窓の光を背景に、形とポーズだけで印象を残したいとき。",
    "en": "When the shape and pose should carry the picture, against a sunset or a bright window."
   },
   "tags": [
    "silhouette",
    "backlit",
    "sunset",
    "contre-jour",
    "black shape",
    "underexposed"
   ]
  },
  {
   "id": "100",
   "pack": "photo",
   "no": "04",
   "slug": "split-lighting",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "スプリットライティング",
    "en": "Split lighting"
   },
   "meaning": {
    "ja": "真横からの光で顔を半分ずつ明暗に分ける",
    "en": "Light from the side splits the face into lit and dark halves"
   },
   "ask": {
    "ja": "男性の横からスプリットライティングで。光は真横90°、鼻筋を境に顔の左半分は影に沈めて。",
    "en": "Portrait with split lighting: the light at 90° to the side, the face divided down the nose, the far half in shadow."
   },
   "summary": {
    "ja": "光が正面寄り（20°）から真横（90°）へ回り、頭の影が三日月から半分へ広がって、顔が鼻筋の位置で縦に明暗2つに分かれる。",
    "en": "The light swings from near the front (20°) to directly at the side (90°); the shadow on the head grows from a crescent to exactly half, splitting the face down the middle."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。背景は一段暗い場面（空 #E7E5E1）へ",
     "光: 画面の左から。角度 20° → 90°（右下の配置図と右上の表示「90° · ↑0°」）",
     "頭: 明暗の境 x = 270 + cos(角度)·√(29² − dy²) より右が影 #33405A、左が光 #FFC75A。90°で中心線の真っすぐな境",
     "胴（半幅56px）: 境 x = 270 + cos(角度)·56 より右が影、左端の帯が光",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). the background drops to a darker scene (sky #E7E5E1)",
     "Light: from the left of the frame, angle 20° → 90° (plan at the bottom right, top-right readout \"90° · ↑0°\")",
     "Head: right of x = 270 + cos(angle)·√(29² − dy²) is shadow #33405A, left is light #FFC75A; at 90° the edge is the straight centre line",
     "Body (half-width 56 px): right of x = 270 + cos(angle)·56 is shadow, a strip on the left edge is lit",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "強さや緊張感のある人物写真にしたいとき。",
    "en": "For dramatic, tense or moody portraits."
   },
   "tags": [
    "split lighting",
    "side light",
    "portrait lighting",
    "half face",
    "dramatic",
    "chiaroscuro"
   ]
  },
  {
   "id": "101",
   "pack": "photo",
   "no": "05",
   "slug": "rembrandt-lighting",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "レンブラントライティング",
    "en": "Rembrandt lighting"
   },
   "meaning": {
    "ja": "影側の頬に三角形の光が残る斜め上からの光",
    "en": "High side light that leaves a lit triangle on the shadow cheek"
   },
   "ask": {
    "ja": "老人の肖像をレンブラントライティングで。光は斜め45°・上から、影側の頬に小さな三角形の光を残して。",
    "en": "Portrait of an old man in Rembrandt lighting: light from 45° to the side and above, leaving a small triangle of light on the shadow-side cheek."
   },
   "summary": {
    "ja": "斜め45°・上45°の光が入り、顔の右側が影に沈む中で、影側の頬にだけ小さな逆三角形の光が残る。",
    "en": "A light 45° to the side and 45° up comes on; the right side of the face falls into shadow except for a small inverted triangle of light on the shadow-side cheek."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。背景は一段暗い場面（空 #E7E5E1）へ",
     "頭: x = 270 + 0.04·29 より右が影 #33405A、左が光 #FFC75A",
     "光の三角形: (x270+0.24R, y78−0.12R)・(x270+0.7R, y78−0.12R)・(x270+0.24R, y78+0.5R)、R=29（幅約13px・高さ約18px）。光の面との間に約6pxの影の帯",
     "胴: 左端（中心から−0.45×56px より左）が光、右（+0.3×56px より右）が影。右下の配置図で光は45°、右上の表示「45° · ↑45°」",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). the background drops to a darker scene (sky #E7E5E1)",
     "Head: right of x = 270 + 0.04·29 is shadow #33405A, left is light #FFC75A",
     "Light triangle: (x 270+0.24R, y 78−0.12R), (x 270+0.7R, y 78−0.12R), (x 270+0.24R, y 78+0.5R) with R = 29 (about 13 px wide, 18 px tall), separated from the lit side by a shadow strip about 6 px wide",
     "Body: lit left of centre −0.45×56 px, shadow right of +0.3×56 px; plan shows the light at 45°, top-right readout \"45° · ↑45°\"",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "絵画のような重みと立体感のある人物写真にしたいとき。",
    "en": "For portraits with a painterly, sculpted, classic look."
   },
   "tags": [
    "rembrandt lighting",
    "portrait lighting",
    "triangle",
    "45 degree light",
    "chiaroscuro",
    "painterly"
   ]
  },
  {
   "id": "102",
   "pack": "photo",
   "no": "06",
   "slug": "butterfly-lighting",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "バタフライライティング",
    "en": "Butterfly lighting"
   },
   "meaning": {
    "ja": "正面の高い位置から当て、鼻の下に蝶形の影",
    "en": "High frontal light that casts a butterfly shadow under the nose"
   },
   "ask": {
    "ja": "女性のビューティーポートレートをバタフライライティングで。光は顔の正面・真上寄り45°、鼻の下に小さな蝶の形の影を。",
    "en": "Beauty portrait with butterfly lighting: light straight in front and 45° above, a small butterfly-shaped shadow under the nose."
   },
   "summary": {
    "ja": "顔の正面・高い位置からの光が入り、顔は左右対称に明るくなり、あごの下にだけ左右対称の小さな影が落ちる。",
    "en": "A light in front of the face and high above comes on; the face lights evenly on both sides and only a small symmetrical shadow falls under the chin."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。背景は一段暗い場面（空 #E7E5E1）へ",
     "頭: 全体が光 #FFC75A（影なし）",
     "あごの下の影: 楕円（中心 y78+1.06R・横0.72R・縦0.38R、R=29 → 約21×11px）、色 #33405A",
     "胴: 中心から ±0.8×56px が光、外側の細い帯は元の色。右下の配置図で光はカメラ側（0°）、右上の表示「0° · ↑45°」",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). the background drops to a darker scene (sky #E7E5E1)",
     "Head: entirely lit #FFC75A (no shadow side)",
     "Shadow under the chin: an ellipse centred at y 78+1.06R, 0.72R wide and 0.38R tall (R = 29, about 21×11 px), colour #33405A",
     "Body: lit within ±0.8×56 px of the centre, thin outer strips keep the base colour; plan shows the light on the camera side (0°), top-right readout \"0° · ↑45°\"",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "顔立ちをきれいに見せたい美容・ファッションの人物写真で。",
    "en": "For beauty and fashion portraits that flatter the face."
   },
   "tags": [
    "butterfly lighting",
    "paramount lighting",
    "beauty lighting",
    "portrait lighting",
    "overhead light",
    "glamour"
   ]
  },
  {
   "id": "103",
   "pack": "photo",
   "no": "07",
   "slug": "golden-hour",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ゴールデンアワー",
    "en": "Golden hour"
   },
   "meaning": {
    "ja": "日没前・日の出後の低く赤みのある光",
    "en": "The low, warm light just after sunrise or before sunset"
   },
   "ask": {
    "ja": "草原の人物をゴールデンアワーの光で。太陽は地平線近く、影が長く伸びて全体が橙色に。",
    "en": "A person in a field at golden hour: the sun near the horizon, long shadows, everything warm orange."
   },
   "summary": {
    "ja": "太陽が地平線近くまで下り、空と地面が橙に染まり、人物の左側が光り、街灯と木の影が右へ長く伸びる。",
    "en": "The sun drops to just above the horizon; sky and ground turn orange, the left side of the person lights up and the shadows of the lamp and tree stretch far to the right."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。",
     "太陽: 半径18px、(x110, y−30) → (x96, y136)。丘に半分隠れる",
     "色: 空 #FAF9F7 → 上 #FFE8BC・地平線近く #FFCF80、地面 #F1F0EE → #F6DDB0。人物の光 #FFB547・影 #3E3650",
     "頭: 光は左から約66°、境より右が影。胴は左側が光・右側が影",
     "影: 街灯と木の根元から右へ、長さ 0 → 150px（色 #DDAA6E）。右上の時刻 12:00 → 17:40",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). ",
     "Sun: radius 18 px, from (x 110, y −30) to (x 96, y 136), half hidden by the hills",
     "Colour: sky #FAF9F7 → #FFE8BC at the top and #FFCF80 near the horizon, ground #F1F0EE → #F6DDB0; light on the figure #FFB547, shadow #3E3650",
     "Head: light from the left at about 66°, shadow right of the edge; body lit on the left, shadow on the right",
     "Shadows: from the foot of the lamp and tree to the right, length 0 → 150 px (#DDAA6E); top-right time 12:00 → 17:40",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "あたたかく、なつかしく、やさしい雰囲気の写真にしたいとき。",
    "en": "For warm, nostalgic, gentle-feeling images."
   },
   "tags": [
    "golden hour",
    "magic hour",
    "sunset light",
    "warm light",
    "long shadows",
    "low sun"
   ]
  },
  {
   "id": "104",
   "pack": "photo",
   "no": "08",
   "slug": "blue-hour",
   "category": "lighting",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ブルーアワー",
    "en": "Blue hour"
   },
   "meaning": {
    "ja": "日没後・日の出前の、空が深い青になる時間",
    "en": "The time after sunset or before sunrise when the sky turns deep blue"
   },
   "ask": {
    "ja": "港町の夜景をブルーアワーで。空は深い青、ビルの窓と街灯の暖かい光が水面に映るように。",
    "en": "Harbour city at blue hour: deep blue sky, warm windows and streetlights reflected in the water."
   },
   "summary": {
    "ja": "太陽が沈みきると、空が深い青の2段になり、建物の窓と街灯がアンバーに灯り、人物は青い影の形になる。",
    "en": "Once the sun has set, the sky turns two bands of deep blue, the windows and street lamp come on in amber and the person becomes a dark blue shape."
   },
   "spec": {
    "ja": [
     "場面①: 地平線（y150）の前に胸から上の人物（頭の中心 x270, y78・半径29px、顔・髪なし）。",
     "太陽: 半径18px、x120 で y40 → y190 へ沈む（効果の量が70%に達するまで）。40〜80%で消える",
     "色: 空 上 #2C3B5E・地平線近く #4A6191、地面 #283452、建物 #34446B、人物 #1C2439",
     "灯り: 窓の3つに1つと街灯の電球が #FFC75A。電球の周りに半径13px・8pxの平らな光の輪（#FFE3A3、35%・60%）",
     "右上の時刻 12:00 → 18:35",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 1: a head-and-shoulders figure in front of a horizon at y 150 (head centre x 270, y 78, radius 29 px, no face or hair). ",
     "Sun: radius 18 px at x 120, sinking from y 40 to y 190 while the effect reaches 70%, fading out between 40% and 80%",
     "Colour: sky #2C3B5E at the top and #4A6191 near the horizon, ground #283452, buildings #34446B, figure #1C2439",
     "Lights: one window in three and the lamp bulb turn #FFC75A; flat rings of 13 px and 8 px (#FFE3A3 at 35% and 60%) around the bulb",
     "Top-right time 12:00 → 18:35",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "夜景を、真っ暗になる前の青い空と街の灯りの両方で見せたいとき。",
    "en": "For city and night scenes that need both a blue sky and glowing lights."
   },
   "tags": [
    "blue hour",
    "twilight",
    "dusk",
    "night city",
    "cityscape",
    "deep blue sky"
   ]
  },
  {
   "id": "105",
   "pack": "photo",
   "no": "09",
   "slug": "bokeh",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ボケ",
    "en": "Bokeh"
   },
   "meaning": {
    "ja": "ピントの外の点光源が丸くやわらかくぼける",
    "en": "Out-of-focus points of light melt into soft discs"
   },
   "ask": {
    "ja": "夜の街に立つ人物を、背景の街の灯りが大きな丸いボケになるように。f/1.4で、人物にはピントを合わせて。",
    "en": "Person in a city at night with big round bokeh from the street lights behind; f/1.4, focus on the person."
   },
   "summary": {
    "ja": "絞りを開けていくと、ピントの合った人物はそのまま、背景の建物はぼけ、街灯と遠くの灯りが大きく薄い光の丸に広がる。",
    "en": "As the aperture opens, the in-focus person stays sharp, the buildings behind soften and the street lamps and distant lights spread into large, pale discs."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。背景は一段暗い場面（空 #E7E5E1）へ",
     "背景（人物以外）のぼけ: 0 → 6px",
     "灯り: 街灯3つ（大きさ1.25）と、横45pxおきの12個（高さ y44〜114・大きさ0.6〜1.2、固定シード）。丸の半径 = (2.4 + 15 × 効果の量) × 大きさ",
     "丸: 不透明度 100% → 55%、街灯はアンバー #FFC75A・遠くの灯りは #FFE3A3、縁にアンバーの1.2pxの線",
     "人物はくっきりのまま。右上の絞り f/16 → f/1.4（8段）",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). the background drops to a darker scene (sky #E7E5E1)",
     "Background blur (everything but the person): 0 → 6 px",
     "Lights: the three lamps (size 1.25) and 12 more spaced 45 px apart (y 44–114, size 0.6–1.2, fixed seed); disc radius = (2.4 + 15 × effect) × size",
     "Discs: opacity 100% → 55%, lamps amber #FFC75A, distant lights #FFE3A3, with a 1.2 px amber rim",
     "The person stays sharp; top-right aperture f/16 → f/1.4 (8 stops)",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "人物や商品を背景から浮かせ、夜や祝祭のやわらかな雰囲気を出したいとき。",
    "en": "To lift a person or product off the background and add a soft, festive night mood."
   },
   "tags": [
    "bokeh",
    "shallow depth of field",
    "background blur",
    "wide aperture",
    "f/1.4",
    "out of focus",
    "lights"
   ]
  },
  {
   "id": "106",
   "pack": "photo",
   "no": "10",
   "slug": "tilt-shift",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ティルトシフト",
    "en": "Tilt-shift"
   },
   "meaning": {
    "ja": "上下をぼかして本物の町を模型のように見せる",
    "en": "Blur top and bottom so a real scene looks like a miniature"
   },
   "ask": {
    "ja": "高い所から見下ろした町をティルトシフトで。中央の帯だけピントを合わせて上下を強くぼかし、色を濃くしてミニチュア風に。",
    "en": "High-angle view of a town with a tilt-shift look: a narrow sharp band across the middle, strong blur above and below, boosted colour, like a miniature model."
   },
   "summary": {
    "ja": "街の上下の帯がぼけていき、道と車と小さな人たちの並ぶ中央の帯だけにピントが残って、模型の街のように見える。",
    "en": "The top and bottom bands of the street blur while only the middle band with the road, the car and the small people stays in focus, so the street looks like a model."
   },
   "spec": {
    "ja": [
     "街角（奥に建物の列・木・街灯、道は y132〜162）から手前の人物を外し、歩道に身長23〜26pxの小さな人4人（足元 y172）を置く。車は5秒で x−60 → 600 を走る",
     "ピントの帯: y66〜176 はくっきり",
     "ぼけ: y0〜42 と y190〜208 は 0 → 7px、y42〜66 と y176〜190 は 0 → 3px",
     "帯の境に破線（6px線・5px間・#8E8E93・75%）",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "The street corner (buildings, trees and lamps behind a road at y 132–162) without the large person; four small people 23–26 px tall stand on the pavement (feet at y 172); the car drives from x −60 to 600 every 5 s",
     "Focus band: y 66–176 stays sharp",
     "Blur: y 0–42 and y 190–208 go 0 → 7 px; y 42–66 and y 176–190 go 0 → 3 px",
     "Dashed lines on the band edges (6 px dash, 5 px gap, #8E8E93 at 75%)",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "街や行事を、かわいらしい模型の世界のように見せたいとき。",
    "en": "To make a city or event look like a toy model world."
   },
   "tags": [
    "tilt-shift",
    "miniature",
    "miniature effect",
    "fake miniature",
    "selective focus",
    "toy town",
    "focus band"
   ]
  },
  {
   "id": "107",
   "pack": "photo",
   "no": "11",
   "slug": "long-exposure",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "長時間露光",
    "en": "Long exposure"
   },
   "meaning": {
    "ja": "シャッターを長く開け、動く光を線にする",
    "en": "Keep the shutter open long so moving lights become lines"
   },
   "ask": {
    "ja": "夜の道路を長時間露光で。シャッター8秒で、車の形は消えて、ヘッドライトとテールランプだけが白と赤の光の線になるように。",
    "en": "Night road as a long exposure, 8-second shutter: the cars disappear and only their headlights and tail lights remain as white and red trails."
   },
   "summary": {
    "ja": "街が夜になり、走る車の本体は薄く消えていき、後ろに赤い尾灯の線が伸び、反対車線には白とアンバーの光の線が通る。",
    "en": "The street turns to night; the moving car fades to almost nothing, a red tail-light line stretches out behind it and white and amber lines run along the opposite lane."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。色は夜（空 #2C3B5E、窓の3つに1つが #FFC75A）へ",
     "車: 5秒で x−60 → 600。本体の不透明度 100% → 10%",
     "尾灯の線: x−60 から車の位置まで。y145 に #FF5B4D 2.6px、y149 に #FF8A6E 1.4px",
     "反対車線の線: 画面幅いっぱい。y135 #FFE9B8 2.6px、y138.5 #FFC75A 1.6px、y141.5 #FFE9B8 1.2px（効果の量で濃くなる）",
     "右上のシャッター速度 1/250 → 8″",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). colours go to night (sky #2C3B5E, one window in three #FFC75A)",
     "Car: x −60 → 600 every 5 s; body opacity 100% → 10%",
     "Tail-light line: from x −60 to the car: #FF5B4D 2.6 px at y 145 and #FF8A6E 1.4 px at y 149",
     "Opposite lane: full-width lines #FFE9B8 2.6 px at y 135, #FFC75A 1.6 px at y 138.5 and #FFE9B8 1.2 px at y 141.5 (they fade in with the effect)",
     "Top-right shutter speed 1/250 → 8″",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "夜の街の流れや、水・雲のなめらかな動きを1枚で見せたいとき。",
    "en": "To show traffic flow, or silky water and clouds, in a single still."
   },
   "tags": [
    "long exposure",
    "light trails",
    "slow shutter",
    "night photography",
    "car trails",
    "motion"
   ]
  },
  {
   "id": "108",
   "pack": "photo",
   "no": "12",
   "slug": "panning-shot",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "流し撮り",
    "en": "Panning shot"
   },
   "meaning": {
    "ja": "動く被写体を追って撮り、背景だけ流す",
    "en": "Follow a moving subject so only the background streaks"
   },
   "ask": {
    "ja": "走る赤い車を流し撮りで。シャッター1/15秒、車はくっきり、背景の木や建物は横に流れるように。",
    "en": "Panning shot of a red car driving past, 1/15 s shutter: the car sharp, the trees and buildings behind streaked sideways."
   },
   "summary": {
    "ja": "走る車をカメラが追い、車は画面の中央でくっきりしたまま、背景の建物や木や街灯だけが横に流れる。",
    "en": "The camera follows the moving car: the car stays sharp in the middle of the frame while only the buildings, trees and lamps behind it streak sideways."
   },
   "spec": {
    "ja": [
     "街角: 奥に建物の列・木・街灯、道は y132〜162（手前の人物なし）",
     "車: 効果なしでは5秒で x−80 → 620 を走る。効果ありでは x270 ±10px にとどまる",
     "流れ: 背景を横に46pxの幅へ12枚ずらして重ね、平均をとる（幅 0 → 46px）",
     "車輪: 線が5秒で12回転",
     "右上のシャッター速度 1/1000 → 1/15",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Street corner: buildings, trees and lamps behind a road at y 132–162 (no large person in front)",
     "Car: without the effect it drives from x −80 to 620 in 5 s; with it, it stays at x 270 ±10 px",
     "Streak: the background is drawn 12 times spread over 46 px sideways and averaged (spread 0 → 46 px)",
     "Wheels: a spoke line turns 12 times per 5 s",
     "Top-right shutter speed 1/1000 → 1/15",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "車・自転車・ランナーなどのスピード感を、1枚の写真で見せたいとき。",
    "en": "To show the speed of a car, bike or runner in a still photo."
   },
   "tags": [
    "panning",
    "panning shot",
    "motion blur",
    "speed",
    "sports photography",
    "slow shutter"
   ]
  },
  {
   "id": "109",
   "pack": "photo",
   "no": "13",
   "slug": "lens-flare",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "レンズフレア",
    "en": "Lens flare"
   },
   "meaning": {
    "ja": "強い光でレンズの中に光の輪や玉が出る",
    "en": "Rings and spots of light from a bright source in the lens"
   },
   "ask": {
    "ja": "山の上の太陽を入れて、レンズフレアを。太陽から画面の中心をはさんで反対側へ、色のついた光の玉が並ぶように。",
    "en": "Mountain landscape with the sun in frame and lens flare: coloured ghosts lined up from the sun through the centre to the opposite side."
   },
   "summary": {
    "ja": "太陽が建物の陰から空へ出ると、太陽に光の筋が出て、太陽から画面の中心をはさんだ反対側まで、光の玉と六角形と輪が一列に並ぶ。",
    "en": "As the sun comes out from behind a building, rays appear around it and a line of light dots, hexagons and a ring runs from the sun through the centre of the frame to the opposite side."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。",
     "太陽: 半径13px、建物の陰（x428, y74）→ 空（x474, y30）",
     "光の筋: 8本、太陽の中心から17pxの所から26px・44pxの所まで交互（長さ9px・27px、アンバー 1.6px・75%）",
     "光の玉: 太陽から中心を通る線の上、t = 0.45・0.8・1.15・1.45・1.75・2.0（t=1 が画面の中心）に、円 半径7px・六角形13px・円5px・六角形22px・円9px・輪30px（幅3px）",
     "色はアンバー #FFC75A と #FFE3A3、不透明度 40〜70% × 効果の量",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). ",
     "Sun: radius 13 px, from behind a building (x 428, y 74) to open sky (x 474, y 30)",
     "Rays: 8, from 17 px out from the centre of the sun to 26 px or 44 px, alternating (9 px and 27 px long; amber, 1.6 px, 75%)",
     "Flare: on the line from the sun through the centre at t = 0.45, 0.8, 1.15, 1.45, 1.75 and 2.0 (t = 1 is the centre): a 7 px circle, a 13 px hexagon, a 5 px circle, a 22 px hexagon, a 9 px circle and a 30 px ring (3 px line)",
     "Colours amber #FFC75A and #FFE3A3 at 40–70% × the effect",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "太陽や照明のまぶしさ、夏の日差し、映画のような光を足したいとき。",
    "en": "To add glare, summer sunshine or a cinematic light feel."
   },
   "tags": [
    "lens flare",
    "flare",
    "ghosting",
    "sun flare",
    "starburst",
    "cinematic"
   ]
  },
  {
   "id": "110",
   "pack": "photo",
   "no": "14",
   "slug": "fisheye-lens",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "魚眼レンズ",
    "en": "Fisheye lens"
   },
   "meaning": {
    "ja": "中心がふくらみ、直線が丸く曲がる超広角",
    "en": "Ultra-wide lens that bulges the centre and bends straight lines"
   },
   "ask": {
    "ja": "街の通りを魚眼レンズで。画角180°で、ビルの縦の線が外側へ丸く曲がるように。",
    "en": "City street through a fisheye lens, 180° view, the building edges bowing outward."
   },
   "summary": {
    "ja": "街角の中心がふくらみ、建物の縦の線と道の横の線が外側へ丸く曲がり、四隅はそのまま残る。",
    "en": "The middle of the street scene bulges out; the vertical lines of the buildings and the lines of the road bow outward while the corners stay where they are."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。",
     "変形: 中心からの距離 d の点を g = (1 + k) / (1 + k·d²/R²) 倍に動かす。R = 中心から角までの距離（289px）",
     "k: 0 → 1.25。中心は2.25倍に拡大、四隅は動かない",
     "形の輪郭は6pxおきに刻んでから変形するので、直線が曲線になる",
     "右上の焦点距離 24mm → 8mm",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). ",
     "Warp: a point at distance d from the centre moves to g = (1 + k) / (1 + k·d²/R²) times that distance, R = distance from the centre to a corner (289 px)",
     "k: 0 → 1.25; the centre is magnified 2.25×, the corners do not move",
     "Every outline is cut every 6 px before warping, so straight lines become curves",
     "Top-right focal length 24mm → 8mm",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "迫力・遊び心・のぞき穴のような視点を出したいとき（スケボー、ミュージックビデオなど）。",
    "en": "For bold, playful or peephole-like views (skateboarding, music videos)."
   },
   "tags": [
    "fisheye",
    "fisheye lens",
    "barrel distortion",
    "ultra wide",
    "8mm",
    "distortion"
   ]
  },
  {
   "id": "111",
   "pack": "photo",
   "no": "15",
   "slug": "chromatic-aberration",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "色収差",
    "en": "Chromatic aberration"
   },
   "meaning": {
    "ja": "明暗の境に赤や青紫の色ずれが出る",
    "en": "Red and blue-violet colour fringes along high-contrast edges"
   },
   "ask": {
    "ja": "白い空と黒い枝の写真に、色収差を少し。画面の端に向かって、枝の縁に赤と青紫の色ずれが出るように。",
    "en": "Black branches against a white sky with slight chromatic aberration: red and blue-violet fringes on the edges, stronger toward the corners."
   },
   "summary": {
    "ja": "街角の絵を赤・緑・青に分け、少しずつ違う大きさで重ねると、人物や建物や街灯の縁に赤と青緑のずれが出て、画面の端ほど大きくなる。",
    "en": "The street scene is split into red, green and blue and the three are laid back together at slightly different sizes, so red and cyan fringes appear on the edges of the person, buildings and lamps, larger towards the sides."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。",
     "分け方: 絵に赤 #FF0000・緑 #00FF00・青 #0000FF を乗算して3枚にし、黒の上に加算で重ねる",
     "大きさ（画面の中心から）: 赤 1 + 2s、緑 1 + s、青 1。s = 0 → 0.02",
     "ずれ: 画面の左右の端で赤と青が約11px離れる、中心では0",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). ",
     "Split: the image is multiplied by red #FF0000, green #00FF00 and blue #0000FF into three copies and added back together over black",
     "Scale about the centre: red 1 + 2s, green 1 + s, blue 1, with s = 0 → 0.02",
     "Offset: red and blue end up about 11 px apart at the left and right edges, 0 at the centre",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "古いレンズやVHS、グリッチのような、少し崩れた質感を足したいとき。",
    "en": "To add an imperfect old-lens, VHS or glitch feel."
   },
   "tags": [
    "chromatic aberration",
    "color fringing",
    "rgb split",
    "lens aberration",
    "fringe",
    "glitch"
   ]
  },
  {
   "id": "112",
   "pack": "photo",
   "no": "16",
   "slug": "vignette",
   "category": "lens-camera",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "周辺減光（ビネット）",
    "en": "Vignette"
   },
   "meaning": {
    "ja": "画面の四隅が暗くなり、中央に目が集まる",
    "en": "The corners darken and draw the eye to the centre"
   },
   "ask": {
    "ja": "海辺の写真に、ビネットを強めに。四隅だけなだらかに暗くして、中央の人物に目が行くように。",
    "en": "Beach photo with a strong vignette: the corners darken gradually so the eye goes to the person in the middle."
   },
   "summary": {
    "ja": "画面の四隅からなだらかに暗くなり、中央の人物と道のあたりだけが明るく残る。",
    "en": "The frame darkens smoothly from the corners while the person and the road in the middle stay bright."
   },
   "spec": {
    "ja": [
     "場面②: 街角。奥に建物の列・木・街灯（x114, 292, 494）、道は y132〜162、人物は左手前（足元 x176, y200・身長124px）。",
     "暗くする形: 画面の中心を中心にした楕円（縦は横の 208/539 × 1.35 倍）",
     "楕円の半径（横）334px の45%までは素通し、そこから外へ向かって 0 → 70% の濃さで rgb(32,35,43) を重ねる",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 2: a street corner; buildings, trees and street lamps (x 114, 292, 494) behind a road at y 132–162; the person stands front left (feet at x 176, y 200, 124 px tall). ",
     "Shape: an ellipse centred on the frame (vertical radius = horizontal × 208/539 × 1.35)",
     "Clear out to 45% of the 334 px horizontal radius, then rgb(32,35,43) rising from 0% to 70% towards the edge",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "主役に視線を集めたいとき、古いレンズの雰囲気を出したいとき。",
    "en": "To focus attention on the subject, or to suggest an old lens."
   },
   "tags": [
    "vignette",
    "vignetting",
    "dark corners",
    "edge darkening",
    "lens falloff",
    "focus"
   ]
  },
  {
   "id": "113",
   "pack": "photo",
   "no": "17",
   "slug": "high-key",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ハイキー",
    "en": "High-key"
   },
   "meaning": {
    "ja": "明るい色だけで作る、白っぽく影の薄い写真",
    "en": "A bright, white-toned image with very light shadows"
   },
   "ask": {
    "ja": "白い机の上のカップと瓶を、ハイキーで。背景は真っ白、影はごく薄く、全体を明るい色だけでまとめて。",
    "en": "High-key still life of a cup and a bottle on a white table: pure white background, very faint shadows, only light tones."
   },
   "summary": {
    "ja": "風景と人物が白に近い明るい色だけになり、影はごく薄くなって、右下のヒストグラムの山が右端へ寄る。",
    "en": "The landscape and the person turn to light, near-white colours with very faint shadows, and the hump of the histogram at the bottom right moves to the right end."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "色: 空 #FAF9F7 → #FFFFFF、丘 #EAEDF1 → #F5F6F8、人物 #4D5A75 → #B9C0CE、影 #33405A → #A6AEBF、太陽 #F5A524 → #FFD889",
     "ヒストグラム（96×46px・20本）: 山の中心 0.56 → 0.85、幅 0.2 → 0.09",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Colour: sky #FAF9F7 → #FFFFFF, hills #EAEDF1 → #F5F6F8, figure #4D5A75 → #B9C0CE, shadow #33405A → #A6AEBF, sun #F5A524 → #FFD889",
     "Histogram (96×46 px, 20 bars): peak centre 0.56 → 0.85, width 0.2 → 0.09",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "清潔感・軽やかさ・やさしさを出したい商品や人物の写真で。",
    "en": "For clean, light, gentle product shots and portraits."
   },
   "tags": [
    "high-key",
    "high key",
    "bright",
    "white background",
    "airy",
    "low contrast"
   ]
  },
  {
   "id": "114",
   "pack": "photo",
   "no": "18",
   "slug": "low-key",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ローキー",
    "en": "Low-key"
   },
   "meaning": {
    "ja": "暗い色が中心の、光の当たる所だけが浮かぶ写真",
    "en": "A dark image where only the lit parts stand out"
   },
   "ask": {
    "ja": "黒背景のウイスキーの瓶をローキーで。横からの1灯だけで、光の当たる縁だけ浮かび、画面の大半は黒に沈めて。",
    "en": "Low-key shot of a whisky bottle on black, a single side light, only the lit edges showing and most of the frame in deep black."
   },
   "summary": {
    "ja": "画面の大半が暗く沈み、太陽も消えて、横から日の当たる胸像の右の縁だけが光って浮かぶ。ヒストグラムの山は左端へ寄る。",
    "en": "Most of the frame sinks into darkness and the sun goes out; only the right edge of the bust, lit from the side, stays bright. The histogram hump moves to the left end."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "色: 空 #FAF9F7 → #2B2D33、丘 → #313339・#36383E、地面 → #24252A、人物 → #25272E。太陽と光の輪は空と同じ色になって消える",
     "胸像の右の縁（光の面）は残り、#FFC75A → #FFB547",
     "ヒストグラム: 山の中心 0.56 → 0.14、幅 0.2 → 0.08",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Colour: sky #FAF9F7 → #2B2D33, hills → #313339 and #36383E, ground → #24252A, figure → #25272E; the sun and its rings take the sky colour and disappear",
     "The lit right edge of the bust stays, #FFC75A → #FFB547",
     "Histogram: peak centre 0.56 → 0.14, width 0.2 → 0.08",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "高級感・緊張感・ミステリアスな雰囲気を出したいとき。",
    "en": "For luxurious, tense or mysterious images."
   },
   "tags": [
    "low-key",
    "low key",
    "dark",
    "black background",
    "moody",
    "dramatic",
    "chiaroscuro"
   ]
  },
  {
   "id": "115",
   "pack": "photo",
   "no": "19",
   "slug": "black-and-white",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "モノクロ",
    "en": "Black and white"
   },
   "meaning": {
    "ja": "色を抜いて明るさだけで見せる",
    "en": "Remove colour and show brightness only"
   },
   "ask": {
    "ja": "海辺のスナップをモノクロで。コントラストは少し強めに、空と砂の明るさの差を残して。",
    "en": "Beach snapshot in black and white, contrast slightly raised, keeping the difference in brightness between sky and sand."
   },
   "summary": {
    "ja": "同じ風景から色が抜け、太陽も人物の縁の光も灰色になり、明るさの差だけで形が見える。",
    "en": "The colour drains from the same landscape; the sun and the light on the figure turn grey and the shapes read only by their brightness."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "変換: 各色を明るさ（0.2126R + 0.7152G + 0.0722B）の灰色に置き換え、140を中心にコントラスト1.25倍",
     "例: 人物 #4D5A75 → 約 #4D4D4D、太陽 #F5A524 → 約 #B5B5B5",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Conversion: each colour becomes the grey of its luminance (0.2126R + 0.7152G + 0.0722B), contrast ×1.25 around 140",
     "For example the figure #4D5A75 → about #4D4D4D, the sun #F5A524 → about #B5B5B5",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "時代を感じさせたいとき、色より形・光・表情を見せたいとき。",
    "en": "For a timeless feel, or when shape, light and expression matter more than colour."
   },
   "tags": [
    "black and white",
    "monochrome",
    "b&w",
    "grayscale",
    "desaturated",
    "classic"
   ]
  },
  {
   "id": "116",
   "pack": "photo",
   "no": "20",
   "slug": "duotone",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "デュオトーン",
    "en": "Duotone"
   },
   "meaning": {
    "ja": "暗部と明部を2色だけで表す",
    "en": "Show the image in two colours, one for darks and one for lights"
   },
   "ask": {
    "ja": "人物写真を濃い藍とピンクのデュオトーンに。暗い所は藍、明るい所はピンクの2色だけで。",
    "en": "Portrait photo as a navy-and-pink duotone: darks in navy, lights in pink, nothing else."
   },
   "summary": {
    "ja": "同じ風景の色が、暗い所は藍、明るい所はピンクの2色の間だけに置き換わる。",
    "en": "The colours of the same landscape are replaced by a range between just two colours: indigo in the darks and pink in the lights."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "2色: 暗い側 #1F2A5C、明るい側 #FF9FB2",
     "変換: 各色の明るさ L から t = ((L − 70) / 180)^2.4 を求め、2色を t で混ぜる（明るい色どうしの差を広げる）",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Two colours: #1F2A5C for the dark end, #FF9FB2 for the light end",
     "Conversion: from each colour’s luminance L, t = ((L − 70) / 180)^2.4, and the two colours are mixed by t (this spreads the light tones apart)",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "ポスター・音楽・SNSの画像を、ブランドの色で統一したいとき。",
    "en": "To unify posters, music artwork or social images in brand colours."
   },
   "tags": [
    "duotone",
    "two-tone",
    "gradient map",
    "color overlay",
    "poster",
    "graphic"
   ]
  },
  {
   "id": "117",
   "pack": "photo",
   "no": "21",
   "slug": "teal-and-orange",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ティール＆オレンジ",
    "en": "Teal and orange"
   },
   "meaning": {
    "ja": "影を青緑、肌や明部を橙に寄せる色調",
    "en": "Pushes shadows to teal and skin and highlights to orange"
   },
   "ask": {
    "ja": "街を歩く人物を映画のようなティール＆オレンジで。影と空は青緑、肌と夕日は橙に寄せて。",
    "en": "Person walking in the city with a cinematic teal and orange grade: shadows and sky toward teal, skin and sunlight toward orange."
   },
   "summary": {
    "ja": "同じ風景の空・丘・地面・人物の影が青緑へ、日の当たる人物の縁と太陽が橙へ寄り、補色の対比になる。",
    "en": "In the same landscape the sky, hills, ground and the shadowed figure shift to teal while the sunlit edge of the figure and the sun shift to orange, a complementary contrast."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "青緑: 空 #CFE6E3、丘 #8CC1BE・#62A2A1、地面 #3F8083、木 #2F6A6E、人物 #1D4E53",
     "橙: 人物の縁の光 #FF9248、太陽 #FF8236、光の輪 #FFC48C",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Teal: sky #CFE6E3, hills #8CC1BE and #62A2A1, ground #3F8083, trees #2F6A6E, figure #1D4E53",
     "Orange: the light on the figure #FF9248, sun #FF8236, sun rings #FFC48C",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "映画のポスターや予告編のような、色の対比が強い画にしたいとき。",
    "en": "For a blockbuster, trailer-like look with strong colour contrast."
   },
   "tags": [
    "teal and orange",
    "orange and teal",
    "cinematic",
    "color grading",
    "blockbuster",
    "film look"
   ]
  },
  {
   "id": "118",
   "pack": "photo",
   "no": "22",
   "slug": "film-grain",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "フィルムグレイン",
    "en": "Film grain"
   },
   "meaning": {
    "ja": "フィルム写真のような細かい粒子を乗せる",
    "en": "Fine, film-like grain over the image"
   },
   "ask": {
    "ja": "海辺の写真にフィルムグレインを。細かい粒子を全体に、黒は少し浮かせて暖かい色に。",
    "en": "Add film grain to the beach photo: fine grain all over, blacks slightly lifted and warm."
   },
   "summary": {
    "ja": "同じ風景の全体に細かい粒が乗り、色が少し暖かいクリーム色に寄る。",
    "en": "Fine grain appears over the whole of the same landscape and the colours lean slightly towards a warm cream."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "粒: 2600個（固定シード）、大きさ 0.8〜1.7px の四角。55%が暗い #3A3530、45%が白",
     "粒の濃さ: 16〜38% × 効果の量。粒の位置は動かさない（ちらつかせない）",
     "色: すべての色を #F2DDBE へ16%寄せる",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Grain: 2,600 squares (fixed seed), 0.8–1.7 px; 55% dark #3A3530, 45% white",
     "Grain opacity: 16–38% × the effect; the grain does not move (no flicker)",
     "Colour: every colour moves 16% towards #F2DDBE",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "デジタルのつるっとした感じを消して、フィルムの手触りを出したいとき。",
    "en": "To remove the clean digital look and add an analogue film texture."
   },
   "tags": [
    "film grain",
    "grain",
    "noise",
    "analog",
    "35mm film",
    "texture",
    "warm tone"
   ]
  },
  {
   "id": "119",
   "pack": "photo",
   "no": "23",
   "slug": "light-leak",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "ライトリーク",
    "en": "Light leak"
   },
   "meaning": {
    "ja": "フィルムに光がもれたような赤橙のにじみ",
    "en": "Red-orange glow as if light leaked onto the film"
   },
   "ask": {
    "ja": "夏の思い出の写真に、ライトリークを右端から。赤と橙の光がにじみ込むように。",
    "en": "Summer memory photo with a light leak coming in from the right edge, red and orange light bleeding in."
   },
   "summary": {
    "ja": "同じ風景の右端から、外側ほど淡い黄、端ほど赤い光のにじみが帯になって入り、ゆっくり揺れる。",
    "en": "From the right edge of the same landscape a band of leaked light comes in, pale yellow on the inside and red at the edge, swaying slowly."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "形: 縦長の楕円4枚。中心は右端の外30px（1周で左右に ±6px 揺れる）、縦の半径は画面の高さの1.1倍",
     "横の半径と色: 250px #FFD089 35%、170px #FF9A3D 40%、95px #FF5A3A 45%、45px #FF3B30 50%（横の半径は 0 → この値に広がる）",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Shape: four tall ellipses centred 30 px outside the right edge (swaying ±6 px over the loop), vertical radius 1.1× the frame height",
     "Horizontal radius and colour: 250 px #FFD089 at 35%, 170 px #FF9A3D at 40%, 95 px #FF5A3A at 45%, 45 px #FF3B30 at 50% (each grows from 0 to this radius)",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "思い出・夏・青春のような、なつかしく偶然っぽい雰囲気を出したいとき。",
    "en": "For nostalgic, summery, accidental-looking memories."
   },
   "tags": [
    "light leak",
    "film leak",
    "vintage",
    "analog",
    "lomo",
    "warm glow"
   ]
  },
  {
   "id": "120",
   "pack": "photo",
   "no": "24",
   "slug": "double-exposure",
   "category": "tone-finish",
   "width": 539,
   "height": 208,
   "cycle": 5,
   "name": {
    "ja": "二重露光（多重露光）",
    "en": "Double exposure"
   },
   "meaning": {
    "ja": "2枚の写真を1枚に重ねて写し込む",
    "en": "Two photos layered into one frame"
   },
   "ask": {
    "ja": "横顔のシルエットに森と山の風景を二重露光で重ねて。背景は白、顔の中にだけ風景が見えるように。",
    "en": "Double exposure of a profile silhouette and a forest-and-mountain landscape on a white background, the landscape visible only inside the head."
   },
   "summary": {
    "ja": "背景が白く飛び、胸像の形の中にだけ、縮めた丘・家・木・太陽の風景が写り込む。",
    "en": "The background turns white and the landscape of hills, house, trees and sun appears, scaled down, only inside the shape of the bust."
   },
   "spec": {
    "ja": [
     "場面③: 左に胸像（頭の中心 x140, y82・半径28px）、右に丘・家・木・太陽（x432, y54・半径15px）。",
     "背景: 胸像の外は白 #FFFFFF",
     "胸像の中: 同じ風景を0.7倍にして、太陽が頭の右上、丘の稜線が首のあたりに来るように置く",
     "中の色: 空 #D3DBE6、丘 #9AA8BD・#76869F、地面 #55647E、木 #3F4C66",
     "切り替え: 元の写真の上に、二重露光の絵を効果の量で重ねる",
     "時間: 0.4〜1.4秒で効果が入り、4.0秒まで保ち、4.8秒までに元へ戻る（1周5秒、3次のイーズインアウト（cubic-bezier(0.65,0,0.35,1) 相当））"
    ],
    "en": [
     "Scene 3: a bust on the left (head centre x 140, y 82, radius 28 px) and hills, a house, trees and the sun (x 432, y 54, radius 15 px) on the right. ",
     "Background: white #FFFFFF outside the bust",
     "Inside the bust: the same landscape at 0.7×, placed so the sun sits at the top right of the head and the ridge of the hills runs across the neck",
     "Inside colours: sky #D3DBE6, hills #9AA8BD and #76869F, ground #55647E, trees #3F4C66",
     "Transition: the double exposure is laid over the original picture at the effect amount",
     "Timing: the effect comes in from 0.4 s to 1.4 s, holds until 4.0 s and is gone again by 4.8 s (one pass = 5 s, cubic ease-in-out (about cubic-bezier(0.65,0,0.35,1)))"
    ]
   },
   "use": {
    "ja": "人物と場所・記憶・内面を1枚で結びつけたい、ポスターやジャケットで。",
    "en": "For posters and covers that tie a person to a place, a memory or an inner world."
   },
   "tags": [
    "double exposure",
    "multiple exposure",
    "blend",
    "silhouette",
    "surreal",
    "composite"
   ]
  }
 ]
}