見出しの文字がぼかしから順に現れる

デモ

仕様

用途: ヒーロー
動作: DOM
種類: レシピ
使うもの: SplitText
動作確認: three 0.186.0・gsap 3.15.0
公開日: 2026年9月13日

しくみと調整

見出しの文字を 1 字ずつ SplitText で分け、ぼかし（blur）と不透明度、右からの寄せを戻すと、ピントが合うように現れます。画面に入ったら 1 回だけ再生します。

ぼかしは 14px、右からの寄せは 12px で、0.035 秒ずつ隣の文字へずらします。power2.out でだんだん速さがゆるみ、読む速さに近い出方になります。

分割は書体が決まってから行います。仮の書体の幅で分けると、本物の書体に差し替わったところで字の位置がずれます。filter は要素ごとに描き直すため、長い文では 1 字ずつではなく語や行ごとに分けたほうが軽くなります。

ずらす間隔を広げるほど、文字が追いかけっこするように現れます。暗い地に明るい文字を合わせると、ピントが合っていく変化がよく見えます。ヒーローやセクションの見出しの登場に向いています。

コード

HTML

<section class="blur-reveal">
  <h2 class="blur-reveal__heading">見えなかったものが、<br>見えてくる。</h2>
</section>

CSS

.blur-reveal {
  --bg: #111111;
  --ink: #eeece6;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 96px 6vw;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
}

.blur-reveal__heading {
  margin: 0;
  font-size: clamp(26px, 7vw, 88px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

JavaScript

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(SplitText);

const BLUR = 14; // 出始めのぼかし（px）
const SHIFT = 12; // 出始めの横ずれ（px）
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// 字形が決まってから分ける。仮の書体の幅で分けると、書体が差し替わったところで字の位置がずれる
document.fonts.ready.then(() => {
  document.querySelectorAll(".blur-reveal__heading").forEach((heading) => {
    // 長い文は words 単位にすると要素数が抑えられる。ここでは 1 字ずつ現したいので chars も足す
    const split = SplitText.create(heading, { type: "words,chars" });

    const reveal = gsap.timeline({ paused: true }).from(split.chars, {
      opacity: 0,
      filter: `blur(${BLUR}px)`,
      x: SHIFT,
      duration: 1.1,
      ease: "power2.out",
      stagger: 0.035,
    });

    // 動きを減らす設定では、出きった状態のまま置く
    if (reduceMotion) {
      reveal.progress(1);
      return;
    }

    // 画面に入ったら 1 回だけ流す。見るたびに繰り返すと、読み返す人の邪魔になる
    const io = new IntersectionObserver(
      (entries, self) => {
        for (const entry of entries) {
          if (!entry.isIntersecting) continue;
          self.unobserve(entry.target);
          reveal.play();
        }
      },
      { rootMargin: "0px 0px -15%" }
    );
    io.observe(heading);
  });
});