Blur Clear Text

【対象要素】
- サイト内のテキスト1箇所（見出し・キャッチコピー・リード文等）に適用する

【演出内容】
- 非常に強くぼけた塊の状態から、少しずつ輪郭が定まって文字として読めるようになる
- 読めるようになる瞬間を作ることで、視線を引き止める

【品質要件】
- ぼかしは20px前後から0へ、時間は1秒
- 読めない時間が1秒を超えないようにする
- prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する
- 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない

[Target element]
- Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.)

[Motion]
- The text starts as an unreadable blurred mass and slowly resolves until it can be read
- Creating the moment it becomes legible is what holds attention

[Quality requirements]
- Blur from about 20px to 0 over 1s
- Do not let the unreadable period exceed one second
- When prefers-reduced-motion is set, disable the animation and show the finished state from the start
- Never let the text become unreadable during the animation, and never shift the surrounding layout