スポットライトテキスト
真っ黒な背景の中をスポットライトがゆっくり動き回り、その光が当たった文字だけが浮かび上がる、ドラマチックなキービジュアル演出です。光の正体は ::before 疑似要素に置いた radial-gradient の円で、 @keyframes による translate で 6 秒かけて画面内を往復させています。
解説
真っ黒な背景の中をスポットライトがゆっくり動き回り、その光が当たった文字だけが浮かび上がる、ドラマチックなキービジュアル演出です。光の正体は ::before 疑似要素に置いた radial-gradient の円で、@keyframes による translate で 6 秒かけて画面内を往復させています。JavaScript は使わず CSS のみで動くため、軽量で導入も簡単です。
向いている場面
- 映画・ドラマ・音楽など、世界観を重視するサイトのファーストビュー
- 商品名やブランドロゴを印象的に登場させたいランディングページ
- 暗いトーンのイベント告知や予告ページ
光の大きさは円の width と height、動く範囲は @keyframes の translate 量で調整します。文字は text-shadow でほのかに発光させているので、ここを強めると幻想的に、弱めると上品になります。常時動き続ける演出のため、prefers-reduced-motion 指定でアニメーションを止め、文字は常に見える状態を確保しておくと安心です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
スポットライトが動く速さを変えたいです。
速さは .sp-bg::before のアニメーション時間（現在は 6s）で決まります。数値を大きくするとゆっくり、小さくすると速く動きます。動く範囲は spMove キーフレーム内の translate の値を調整してください。
文字を日本語に変えても崩れませんか？
h1 の中身を入れ替えるだけで使えます。日本語は字数が増えると横幅が広がるので、font-size の clamp 値や letter-spacing を見直すと収まりが良くなります。