# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スプリットテキスト」（Split Text）と呼ばれる動きです。

# 作ってほしい動き
Split Text（1文字ずつ順番に出る）。見出しが画面に入ったとき、1文字ずつ少し遅らせて、下から浮かび上がらせる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span（display: inline-block）に分け、何文字目かを CSS 変数 --i に入れる。英単語は1語ずつ、句読点は前の文字とまとめる（途中で折り返さない・行の頭に句読点を出さない）
- 始まり：opacity 0、translateY(16px)
- 終わり：opacity 1、translateY(0)
- 時間：1文字 0.5秒。1文字ずつ 0.04秒遅らせる（遅れ ＝ --i × 0.04秒）
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- ページの大きな見出し

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 全部の文字が出終わるまでを 2秒以内にする。1文字ずつの遅れは 0.1秒まで、見出しは 20字くらいまで
- 本文の段落には使わない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スプリットテキスト」（Split Text）と呼ばれる動きです。

# 作ってほしい動き
Split Text（1文字ずつ順番に出る）。見出しが画面に入ったとき、1文字ずつ少し遅らせて、下から浮かび上がらせる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span（display: inline-block）に分け、何文字目かを CSS 変数 --i に入れる。英単語は1語ずつ、句読点は前の文字とまとめる（途中で折り返さない・行の頭に句読点を出さない）
- 始まり：opacity 0、translateY(16px)
- 終わり：opacity 1、translateY(0)
- 時間：1文字 0.5秒。1文字ずつ 0.04秒遅らせる（遅れ ＝ --i × 0.04秒）
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- ページの大きな見出し（表示例：「毎日に、ちょうどいい道具を。」の見出しと、その下の説明文）

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 全部の文字が出終わるまでを 2秒以内にする。1文字ずつの遅れは 0.1秒まで、見出しは 20字くらいまで
- 本文の段落には使わない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「タイプライター」（Typewriter）と呼ばれる動きです。

# 作ってほしい動き
Typewriter（タイプライターで打たれる）。見出しが画面に入ったとき、左から1文字ずつ打たれていき、打っている位置にカーソルが付いてくる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span に分け、何文字目かを CSS 変数 --i に入れる。span は inline のまま（ふつうの文と同じ所で折り返す）
- 文字：はじめは visibility: hidden（場所は空けておくので、打っても行がずれない）。--i × 0.08秒たったら visibility: visible にする（CSS の animation、長さ 0秒・forwards）
- カーソル：いま打った文字の ::after に、幅 2px・文字の高さの縦線を出す。次の文字が出たら消す
- 打ち終わり：最後の文字のカーソルを 1秒に 1回の点滅で 3回だけ見せて、消す
- 1文字の間隔：0.08秒

# 付ける場所
- 案内や問いかけの見出し

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- カーソルの点滅は 1秒に 1回、4回までで止める（ずっと点滅させない）
- 文字は 30字くらいまで。1文字の間隔は 0.15秒までにして、打ち終わるまで待たせすぎない
- 動きを控える設定では、はじめから全文を見せ、カーソルも出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「タイプライター」（Typewriter）と呼ばれる動きです。

# 作ってほしい動き
Typewriter（タイプライターで打たれる）。見出しが画面に入ったとき、左から1文字ずつ打たれていき、打っている位置にカーソルが付いてくる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span に分け、何文字目かを CSS 変数 --i に入れる。span は inline のまま（ふつうの文と同じ所で折り返す）
- 文字：はじめは visibility: hidden（場所は空けておくので、打っても行がずれない）。--i × 0.08秒たったら visibility: visible にする（CSS の animation、長さ 0秒・forwards）
- カーソル：いま打った文字の ::after に、幅 2px・文字の高さの縦線を出す。次の文字が出たら消す
- 打ち終わり：最後の文字のカーソルを 1秒に 1回の点滅で 3回だけ見せて、消す
- 1文字の間隔：0.08秒

# 付ける場所
- 案内や問いかけの見出し（表示例：「はじめての方へ、3つの手順でご案内します。」の見出しと、その下の説明文）

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- カーソルの点滅は 1秒に 1回、4回までで止める（ずっと点滅させない）
- 文字は 30字くらいまで。1文字の間隔は 0.15秒までにして、打ち終わるまで待たせすぎない
- 動きを控える設定では、はじめから全文を見せ、カーソルも出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「テキストスクランブル」（Text Scramble）と呼ばれる動きです。

# 作ってほしい動き
Text Scramble（文字が入れ替わって決まる）。見出しが画面に入ったとき、でたらめな文字が入れ替わり続け、左から順に正しい文字で止まっていく。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span に分ける（空白はそのまま）
- 入れ替わる文字：「カタカナ」（アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン）から選ぶ。色は #2563eb
- 時間：element.animate() で作った、見た目を変えない動き（長さ 1.2秒）の currentTime で数え、requestAnimationFrame で描き直す（ページのほかの動きと同じ時計で進む）
- 入れ替え：でたらめな文字は 60ms ごとに替える（毎フレーム替えると、ちらつきが強い）
- 止まる順番：n 文字のうち i 文字目（0 から数える）は、始まってから 1.2秒 ×（i + 1）÷ n で正しい文字に止まる
- 文字の幅：でたらめな文字は span の ::after に重ねて出し、span の幅は正しい文字のまま変えない（文字の形が変わっても、行の長さが揺れない）

# 付ける場所
- データ・技術・ゲームなどのサイトの見出し

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 全部の文字が決まるまでを 2秒以内にする。見出しは 16字くらいまで
- 入れ替わる文字は、見出しと同じ幅の文字（日本語の見出しならカタカナ）にする
- 動きを控える設定では、分けずに正しい文字をはじめから見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「テキストスクランブル」（Text Scramble）と呼ばれる動きです。

# 作ってほしい動き
Text Scramble（文字が入れ替わって決まる）。見出しが画面に入ったとき、でたらめな文字が入れ替わり続け、左から順に正しい文字で止まっていく。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span に分ける（空白はそのまま）
- 入れ替わる文字：「カタカナ」（アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン）から選ぶ。色は #2563eb
- 時間：element.animate() で作った、見た目を変えない動き（長さ 1.2秒）の currentTime で数え、requestAnimationFrame で描き直す（ページのほかの動きと同じ時計で進む）
- 入れ替え：でたらめな文字は 60ms ごとに替える（毎フレーム替えると、ちらつきが強い）
- 止まる順番：n 文字のうち i 文字目（0 から数える）は、始まってから 1.2秒 ×（i + 1）÷ n で正しい文字に止まる
- 文字の幅：でたらめな文字は span の ::after に重ねて出し、span の幅は正しい文字のまま変えない（文字の形が変わっても、行の長さが揺れない）

# 付ける場所
- データ・技術・ゲームなどのサイトの見出し（表示例：「データで、次の一手を。」の見出しと、その下の説明文）

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 全部の文字が決まるまでを 2秒以内にする。見出しは 16字くらいまで
- 入れ替わる文字は、見出しと同じ幅の文字（日本語の見出しならカタカナ）にする
- 動きを控える設定では、分けずに正しい文字をはじめから見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「カウントアップ」（Count Up）と呼ばれる動きです。

# 作ってほしい動き
Count Up（数字が数え上がる）。実績の数字が画面に入ったとき、0 から目標の数まで数え上がる。

# 動き
- きっかけ：数字が画面に 30% 入ったとき。数字ごとに見張り、1回だけ動かす
- 数：HTML には最終の数を書いておき（data-to にも同じ数）、JavaScript で 0 にしてから数え上げる
- 時間：1.6秒。element.animate() で作った、見た目を変えない動き（長さ 1.6秒）の currentTime を経過した時間とし、requestAnimationFrame でその割合から数を決めて描き直す
- 速さの変わり方：だんだん遅く（だんだん遅くなら、割合 p を 1 −（1 − p）³ にしてから掛ける）
- 表示：毎回、整数に丸めて桁区切りを付ける（toLocaleString('ja-JP')）。単位（件・%・年）は数字の外の要素に置いて動かさない

# 付ける場所
- 実績を3つ並べたセクション

# 守ってほしいこと
- 数字は font-variant-numeric: tabular-nums にし、数え始める前に最終の数の幅を min-width で取っておく（桁が増えても、単位や隣の要素がずれない）
- 時間は 3秒まで。長いと、数え終わる前にスクロールして通り過ぎる
- 動きを控える設定と、JavaScript が動かない環境では、最終の数をはじめから見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「カウントアップ」（Count Up）と呼ばれる動きです。

# 作ってほしい動き
Count Up（数字が数え上がる）。実績の数字が画面に入ったとき、0 から目標の数まで数え上がる。

# 動き
- きっかけ：数字が画面に 30% 入ったとき。数字ごとに見張り、1回だけ動かす
- 数：HTML には最終の数を書いておき（data-to にも同じ数）、JavaScript で 0 にしてから数え上げる
- 時間：1.6秒。element.animate() で作った、見た目を変えない動き（長さ 1.6秒）の currentTime を経過した時間とし、requestAnimationFrame でその割合から数を決めて描き直す
- 速さの変わり方：だんだん遅く（だんだん遅くなら、割合 p を 1 −（1 − p）³ にしてから掛ける）
- 表示：毎回、整数に丸めて桁区切りを付ける（toLocaleString('ja-JP')）。単位（件・%・年）は数字の外の要素に置いて動かさない

# 付ける場所
- 実績を3つ並べたセクション（表示例：施工の実績 1280件、お客さまの満足度 98%、創業から 35年）

# 守ってほしいこと
- 数字は font-variant-numeric: tabular-nums にし、数え始める前に最終の数の幅を min-width で取っておく（桁が増えても、単位や隣の要素がずれない）
- 時間は 3秒まで。長いと、数え終わる前にスクロールして通り過ぎる
- 動きを控える設定と、JavaScript が動かない環境では、最終の数をはじめから見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ウェーブテキスト」（Text Wave）と呼ばれる動きです。

# 作ってほしい動き
Text Wave（文字が波打つ）。見出しが画面に入ったとき、1文字ずつ少し遅れて上下に揺れ、見出しに波が走る。2回で止まる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span（display: inline-block）に分け、何文字目かを CSS 変数 --i に入れる。英単語は1語ずつ、句読点は前の文字とまとめる
- 1文字の揺れ：@keyframes で 0% と 40% と 100% は translateY(0)、20% で translateY(-10px)
- 時間：1回 1秒。1文字ずつ 0.05秒遅らせる。2回くり返して止める
- 速さの変わり方：ease-in-out

# 付ける場所
- 子ども向け・イベント・お店の楽しい見出し

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 揺れはずっと続けず、全体で 5秒以内に止める（揺れる回数は 3回まで、1回の時間は 1.2秒まで、1文字ずつの遅れは 0.08秒まで。見出しは 16字くらいまで）
- 動かすのは transform だけ。行の高さは変えない
- 動きを控える設定では揺らさない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「ウェーブテキスト」（Text Wave）と呼ばれる動きです。

# 作ってほしい動き
Text Wave（文字が波打つ）。見出しが画面に入ったとき、1文字ずつ少し遅れて上下に揺れ、見出しに波が走る。2回で止まる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 文字の分け方：JavaScript で1文字ずつ span（display: inline-block）に分け、何文字目かを CSS 変数 --i に入れる。英単語は1語ずつ、句読点は前の文字とまとめる
- 1文字の揺れ：@keyframes で 0% と 40% と 100% は translateY(0)、20% で translateY(-10px)
- 時間：1回 1秒。1文字ずつ 0.05秒遅らせる。2回くり返して止める
- 速さの変わり方：ease-in-out

# 付ける場所
- 子ども向け・イベント・お店の楽しい見出し（表示例：「夏休みこども教室、受付中！」の見出しと、その下の説明文）

# 守ってほしいこと
- 読み上げで1文字ずつ区切られないよう、見出しに aria-label で全文を付け、分けた span には aria-hidden="true" を付ける
- 揺れはずっと続けず、全体で 5秒以内に止める（揺れる回数は 3回まで、1回の時間は 1.2秒まで、1文字ずつの遅れは 0.08秒まで。見出しは 16字くらいまで）
- 動かすのは transform だけ。行の高さは変えない
- 動きを控える設定では揺らさない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「グリッチ」（Glitch Text）と呼ばれる動きです。

# 作ってほしい動き
Glitch Text（ずれて揺れる）。見出しが画面に入ったとき、色の違う文字の影が左右にずれて重なり、一瞬だけ映像が乱れたように見せる。乱れは1回だけ。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 影：見出しの ::before と ::after に同じ文字（content: attr(data-text)。data-text は JavaScript で見出しの文字から入れる）を重ねる。色は #2563eb と #dc2626（赤）。ふだんは visibility: hidden
- 乱れ：0.4秒の間に、影の位置を3回だけ切り替える（steps(1, end)）。0%・34%・67% で、横のずれ（±4px）と、見せる帯（clip-path: inset() で上下を切る）を変える。2つの影は逆向きにずらす
- 本文の文字：34% の所で 4px の半分だけ横にずらし、67% で戻す
- 乱れが終わったら、影は隠れて元の見出しだけになる

# 付ける場所
- ゲーム・IT・音楽などの見出し

# 守ってほしいこと
- 光の点滅で体調をくずす人がいるので、乱れは短く 1回だけにする。長さは 0.6秒まで、1秒に 3回を超えて点滅させない（WCAG 2.3.1）。くり返さない
- 影は文字の大きさのまま重ね、ずれは 8px までにする
- 動きを控える設定では影を出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「グリッチ」（Glitch Text）と呼ばれる動きです。

# 作ってほしい動き
Glitch Text（ずれて揺れる）。見出しが画面に入ったとき、色の違う文字の影が左右にずれて重なり、一瞬だけ映像が乱れたように見せる。乱れは1回だけ。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 影：見出しの ::before と ::after に同じ文字（content: attr(data-text)。data-text は JavaScript で見出しの文字から入れる）を重ねる。色は #2563eb と #dc2626（赤）。ふだんは visibility: hidden
- 乱れ：0.4秒の間に、影の位置を3回だけ切り替える（steps(1, end)）。0%・34%・67% で、横のずれ（±4px）と、見せる帯（clip-path: inset() で上下を切る）を変える。2つの影は逆向きにずらす
- 本文の文字：34% の所で 4px の半分だけ横にずらし、67% で戻す
- 乱れが終わったら、影は隠れて元の見出しだけになる

# 付ける場所
- ゲーム・IT・音楽などの見出し（表示例：「ゲーム開発者を募集中」の見出しと、その下の説明文）

# 守ってほしいこと
- 光の点滅で体調をくずす人がいるので、乱れは短く 1回だけにする。長さは 0.6秒まで、1秒に 3回を超えて点滅させない（WCAG 2.3.1）。くり返さない
- 影は文字の大きさのまま重ね、ずれは 8px までにする
- 動きを控える設定では影を出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「マーカーアニメーション」（Marker Highlight）と呼ばれる動きです。

# 作ってほしい動き
Marker Highlight（マーカーが引かれる）。文章の中の大事な語が画面に入ったとき、蛍光ペンで引いたような線が左から伸びる。

# 動き
- きっかけ：語（mark 要素）が画面に入ったとき。語ごとに見張り、1回だけ動かす。同時に入った語は、前から順に 0.3秒ずつ遅らせる
- 線：background-image: linear-gradient(transparent calc(100% - 40%), #fde68a 0)（語の下から 40% の高さだけ黄色の線）、background-repeat: no-repeat
- 始まり：background-size: 0% 100%
- 終わり：background-size: 100% 100%（2行にまたがる語は、1行目の端まで引いてから2行目へ続く）
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 説明文の中の、特に読んでほしい語

# 守ってほしいこと
- 語は mark 要素で囲む（読み上げや検索エンジンにも「目立たせた語」と伝わる）。mark の黄色い背景は消してから線を敷く
- 動かすのは background-size（transform では2行にまたがる語に引けないため）。1ページで5か所までにする
- 線の色は、文字が読める薄い色にする（文字との明るさの差を 4.5:1 以上）
- 動きを控える設定と、JavaScript が動かない環境では、はじめから線を引いた状態で見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「マーカーアニメーション」（Marker Highlight）と呼ばれる動きです。

# 作ってほしい動き
Marker Highlight（マーカーが引かれる）。文章の中の大事な語が画面に入ったとき、蛍光ペンで引いたような線が左から伸びる。

# 動き
- きっかけ：語（mark 要素）が画面に入ったとき。語ごとに見張り、1回だけ動かす。同時に入った語は、前から順に 0.3秒ずつ遅らせる
- 線：background-image: linear-gradient(transparent calc(100% - 40%), #fde68a 0)（語の下から 40% の高さだけ黄色の線）、background-repeat: no-repeat
- 始まり：background-size: 0% 100%
- 終わり：background-size: 100% 100%（2行にまたがる語は、1行目の端まで引いてから2行目へ続く）
- 時間：0.8秒
- 速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）

# 付ける場所
- 説明文の中の、特に読んでほしい語（表示例：「住んでからの10年」「朝と夜の過ごし方」）

# 守ってほしいこと
- 語は mark 要素で囲む（読み上げや検索エンジンにも「目立たせた語」と伝わる）。mark の黄色い背景は消してから線を敷く
- 動かすのは background-size（transform では2行にまたがる語に引けないため）。1ページで5か所までにする
- 線の色は、文字が読める薄い色にする（文字との明るさの差を 4.5:1 以上）
- 動きを控える設定と、JavaScript が動かない環境では、はじめから線を引いた状態で見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ローリングテキスト」（Rolling Text）と呼ばれる動きです。

# 作ってほしい動き
Rolling Text（文字が回って入れ替わる）。見出しが画面に入ったとき、見出しの中の1語が上へ回転して消え、次の語が下から回って入ってくる。3つの語を順に見せ、最後の語で止まる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 語の置き場所：入れ替わる語を1つの箱（display: inline-grid、overflow: hidden）に入れ、3つの語を同じマス（grid-area: 1 / 1）に重ねる。箱の幅はいちばん長い語に合う
- 語の順番：「つくる」→「ととのえる」→「とどける」。1語を 1.4秒見せて次へ。何番目かを CSS 変数 --i に入れる
- 出ていく語：translateY(0) から translateY(-100%) rotateX(70deg)
- 入ってくる語：translateY(100%) rotateX(-70deg) から translateY(0)
- 入れ替わる時間：0.5秒。速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 箱に perspective: 400px を付け、回って見えるようにする

# 付ける場所
- トップページのキャッチコピー

# 守ってほしいこと
- 最後の語で止める。ずっと回し続けない（全体で 5秒以内。1語を見せる時間は 2秒まで、入れ替わる時間は 0.8秒まで）
- 読み上げで途中の語だけが読まれないよう、見出しに aria-label で全文（「暮らしを、つくる・ととのえる・とどける」）を付け、中の span には aria-hidden="true" を付ける
- 動かすのは transform だけ。語の長さが違っても、見出しの行の高さは変えない
- 動きを控える設定では、はじめから最後の語を見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「ローリングテキスト」（Rolling Text）と呼ばれる動きです。

# 作ってほしい動き
Rolling Text（文字が回って入れ替わる）。見出しが画面に入ったとき、見出しの中の1語が上へ回転して消え、次の語が下から回って入ってくる。3つの語を順に見せ、最後の語で止まる。

# 動き
- きっかけ：見出しが画面に 30% 入ったとき。見出しごとに見張り、1回だけ動かす
- 語の置き場所：入れ替わる語を1つの箱（display: inline-grid、overflow: hidden）に入れ、3つの語を同じマス（grid-area: 1 / 1）に重ねる。箱の幅はいちばん長い語に合う
- 語の順番：「つくる」→「ととのえる」→「とどける」。1語を 1.4秒見せて次へ。何番目かを CSS 変数 --i に入れる
- 出ていく語：translateY(0) から translateY(-100%) rotateX(70deg)
- 入ってくる語：translateY(100%) rotateX(-70deg) から translateY(0)
- 入れ替わる時間：0.5秒。速さの変わり方：すっと止まる（cubic-bezier(0.22, 1, 0.36, 1)）
- 箱に perspective: 400px を付け、回って見えるようにする

# 付ける場所
- トップページのキャッチコピー（表示例：「暮らしを、」に続けて「つくる」「ととのえる」「とどける」が入れ替わる見出し）

# 守ってほしいこと
- 最後の語で止める。ずっと回し続けない（全体で 5秒以内。1語を見せる時間は 2秒まで、入れ替わる時間は 0.8秒まで）
- 読み上げで途中の語だけが読まれないよう、見出しに aria-label で全文（「暮らしを、つくる・ととのえる・とどける」）を付け、中の span には aria-hidden="true" を付ける
- 動かすのは transform だけ。語の長さが違っても、見出しの行の高さは変えない
- 動きを控える設定では、はじめから最後の語を見せる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする