シマー光沢テキスト

解説

シマー光沢テキストは、文字の上を一筋の光が左から右へ繰り返し流れる、待ち時間の演出に向いたアニメーションです。仕組みは横方向のグラデーションを文字の形に切り抜く background-clip:text と、その背景位置を @keyframes でずらし続けるアニメーションの組み合わせです。文字色を透明にしてグラデーションだけを見せることで、金属が光るような滑らかな反射を表現しています。JavaScript は不要で、CSS のみで動きます。

映える場面

• ページ読み込み中の「LOADING」などの待機表示
• 暗い背景のヒーローやキャッチコピーの強調
• 近日公開やプレミアム感を出したい見出し

光の色や明るさはグラデーションの色の指定で、流れる速さは animation の秒数で変えられます。背景が暗いほど光沢がはっきり映えるので、文字色と地の色のコントラストを意識すると効果的です。常に動き続ける演出なので、動きに敏感な利用者のために prefers-reduced-motion を見て、設定がオンのときはアニメーションを止める配慮を入れておくと安心です。長文ではなく短い見出しに使うと、上品で読みやすい仕上がりになります。

使用例・適したシーン

• ヒーローのキャッチコピー
• 見出しの強調
• コーポレートのキービジュアル