CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.03
CRAZY度 ★★★★ ─ 可読性崩壊の恐れ

崩壊テキスト

見出しや文章を、1文字ずつ物理で崩したり、画素の粒に分解して燃やしたりします。どれだけ崩れても、読み上げには元の文章がそのまま届くように作ってあります。壊したあとは、どれも自動で元に戻ります。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001崩落する見出しCRAZY度 ★★★★★
叩いた文字から左右へ順に崩れ落ち、床に積み重なります。落ちた文字は掴んで投げられ、まだ残っている文字に当てると叩き落とせます。
Pointer Events剛体物理Web AnimationsWeb Audio

これは何？

見出しを1文字ずつに分け、叩いたところから崩落させる見出しです。文字はそれぞれ回転する箱として計算していて、床やほかの文字とぶつかりながら積み重なります。

使い方

  1. 「全部コピー」して、ページのHTMLに貼り付けます。
  2. 崩す文字は、h2 の中身を書き換えるだけで差し替えられます。長い見出しは自動で折り返し、2行になっても動きます。
  3. キーボードでは、右上の「崩す／組み直す」ボタンで操作できます。

カスタマイズ

  • 落ちる強さは GRAVITY（2400）、放っておくと組み直すまでの時間は AUTO_MS（7000ミリ秒）です。
  • 崩れが隣へ伝わる間隔は collapse() の 55（1文字あたりのミリ秒）です。

注意

読み上げ用に元の文章を見えない形で残しているので、崩れていても見出しとして正しく読まれます。文字ごとに要素を作って毎フレーム計算するため、30文字程度までの短い見出しに使ってください。

S-002塵になる文字CRAZY度 ★★★★★
文字を数千の粒に分解します。押した点から崩れて風に流され、少し待つと集まって元の文字に戻ります。下の欄に入れた文字にも組み替わります。
Canvas 2DパーティクルPointer Events

これは何？

キャンバスに描いた文字のインクを細かい粒に置き換え、押した点から順に風で吹き飛ばす演出です。カーソルや指でなぞると、近くの粒が押しのけられてから戻ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 最初に表示する文字は data-text で決めます。入力欄（form）を消すと、文字を固定した見出しとして使えます。
  3. キーボードでは、キャンバスにフォーカスしてEnterで崩せます。

カスタマイズ

  • 粒の色は COLORS、粒の上限は MAX（7000）です。
  • 風の向きと強さは release() の 260（右へ）と -150（上へ）です。

注意

文字はキャンバスに描くので、読み上げにはキャンバスの aria-label を使います（文字を組み替えると自動で書き換わります）。粒の数は大きさに応じて自動で間引きます。

S-003燃え尽きる文字CRAZY度 ★★★★★
押した点に火が付き、縁を光らせながら燃え広がります。炭になった部分は火の粉と灰を散らして消え、燃え尽きると元に戻ります。
Canvas 2DImageDataWeb Audio

これは何？

文字の画素ひとつひとつに「燃えはじめる時刻」を持たせ、焦げ・炎・炭・灰の順に色を変えていく演出です。燃える縁がぎざぎざになるのは、時刻になめらかな乱数を足しているからです。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 燃やす文字は data-text で決めます。
  3. 何か所も押すと、それぞれの点から火が広がります。キーボードでは右上の「火をつける」を使います。

カスタマイズ

  • 火が進む速さは SPEED（95px/秒）です。
  • 火が通ってから灰になって消えるまでの時間は CHAR（1.1秒）、縁のぎざぎざは ignite() の N[idx] * .7 です。

注意

燃えている間は文字の画素を毎フレーム塗り直すので、文字が大きいほど重くなります。画面幅いっぱいの巨大な文字より、カードくらいの大きさに向いています。

S-004凍って砕ける文字CRAZY度 ★★★★
押した点から霜が広がって文字が凍ります。もう一度叩くとひびが走って砕け、床に落ちた破片はさらに割れてから溶けていきます。
Canvas 2Dボロノイ分割Web Audio

これは何？

文字を氷の見た目に塗り替え、叩いた点の近くほど細かくなるよう、ボロノイ分割（いちばん近い点ごとに領域を分ける方法）で破片に切り分けます。床に強く当たった破片は、さらに2つに割れます。

使い方

  1. 「全部コピー」して貼り付けます。凍らせる文字は data-text で決めます。
  2. 凍らせたまま2.6秒ほど放っておくと、自分の重さで崩れ落ちます。
  3. キーボードでは、右上のボタンで「凍らせる」「叩き割る」を順に操作できます。

カスタマイズ

  • 凍りきるまでの時間は FREEZE_S、自重で崩れるまでは AUTO_MS です。
  • 破片の数は shatter() の 40、氷の色は resize() のグラデーションです。

注意

叩いた瞬間に文字の画素を破片へ切り分けるので、一瞬だけ計算が入ります。床で割れて増える破片は170枚までに抑えています。

S-005地滑りする文章CRAZY度 ★★★★
なぞったところの文字が掘り出されて床に積もり、支えを失った上の文字も崩れ落ちます。「揺らす」で段落ごと崩れ、「戻す」で元の段落に戻ります。
Canvas 2DセルオートマトンPointer Events

これは何？

段落を1文字1マスの升目に並べ、砂が落ちるときのルール（下が空いていれば落ちる、ふさがっていれば斜め下へ）で文字を動かします。崖になった縁は少しずつ崩れ、すり鉢状の穴になります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 文章は .ug-slide-src の中身を書き換えます。この要素は画面には見えませんが、読み上げにはそのまま使われます。
  3. 文字の大きさは .ug-slide の font-size で決めます。入りきらないときは自動で小さくします。

カスタマイズ

  • 支えを失った文字が落ちる確率は FALL、崖の縁が崩れる確率は ERODE です。
  • 崩れた文字の色は HOT（冷めた色から熱い色の順）です。

注意

全角の文章向けです。英数字も1文字1マスで並ぶので、英文では字間が広く見えます。

S-006文章を呑むブラックホールCRAZY度 ★★★★★
押した場所に穴が開き、近い文字から引き伸ばされ、渦を巻いて呑み込まれます。押したまま動かすと文章を食べ進め、離すと全部吐き出して元に戻ります。
Pointer EventsCanvas 2DCSS transformWeb Audio

これは何？

段落の文字を1つずつ動かせる要素に分け、穴への引力で引き寄せます。穴に近づいた文字は、穴の方向へ伸びて横に細くなります（スパゲッティ化）。穴がしぼむと、呑み込んだ文字を一気に吐き出します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 文章は .ug-hole-p の中身を書き換えます。
  3. キーボードでは、右上の「穴をあける」で中央に穴が開きます。

カスタマイズ

  • 引く強さは PULL、指を離してから穴がしぼむまでは LINGER（1.3秒）です。
  • 穴の届く範囲が広がる速さは step() の 300（px/秒）です。

注意

ドラッグで穴を動かすため、この中の文字は選択できません。読み上げ用に元の文章を見えない形で残しています。文字ごとに要素を作るので、400文字程度までを目安にしてください。