Word Rotator
ワードロータリー
Generation Prompt
【対象要素】 - 見出しの中の入れ替わる1単語(「作る・磨く・試す」のような言い換え)に適用する 【演出内容】 - 単語が下から上へスライドして次の単語に入れ替わり続ける - 切り替えは素早く、表示中はしっかり止まる(静止2秒前後) 【品質要件】 - 表示領域を1行分の高さでマスクし、前後の単語が見えないようにする - 最後の単語の次は最初の単語へ、同じ動きで戻る - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - One interchangeable word inside a heading [Motion] - Words slide up to replace each other, then hold still (~2s) before the next swap [Quality] - Mask the line height so neighboring words never show - After the last word, return to the first with the same motion - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.