CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.17
CRAZY度 ★★★★ ─ 時間ハ戻セマセン

時間で変わるUI

放っておくとカビが生え、紙は日に焼け、つるが伸びてきます。本当の時刻や、ページを開いてから・最後に押してからの経過で姿を変えるUIを6本集めました。見本には早送りのつまみを付けてあるので、待たずに変化を確かめられます。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001カビが生えるボタンCRAZY度 ★★★★★
押さずに放っておくと、縁から青カビや黒カビのコロニーが広がり、菌糸がボタンの外へ這い出し、最後はハエがたかります。押すと胞子ごと払い落とせます。こすると、こすった所だけ拭き取れます。
Canvas 2D成長シミュレーションPointer EventsWeb Audio

これは何？

最後に押してからの経過時間で腐っていくボタンです。カビはキャンバスの上で本当に育てています。コロニーは縁から生えやすく、外側に白い菌糸、内側に色の付いた胞子をためながら広がります。育ったコロニーからは菌糸が枝分かれしながらボタンの外へ伸びます。腐りきるとにおいが立ち、ハエが飛び回ります（ハエはカーソルを近づけると逃げます）。

使い方

  1. 「全部コピー」して貼り付けます。.ug-mildew はいくつ置いても動きます。
  2. 押すと全部払い落とし、経過が0に戻ります。ボタンの上を横にこすると、こすった所だけ拭き取れます。
  3. 実際に組み込むときは、早送りのつまみ（.ug-mildew-ff のラベルごと）を消してください。消すと実時間（×1）で進みます。
  4. 外側の .ug-mildew に data-key="好きな名前" を付けると、最後に押した時刻をブラウザに保存し、次に来たときは続きから腐ります。何日も来なかった人には、開いた瞬間にカビが一気に広がります。

カスタマイズ

  • 腐りきるまでの時間は ROT_SEC（300秒＝5分）です。1日にするなら 86400 にします。
  • 段階ごとの文言は STAGES、ボタンの色の移り変わりは TOP・BOT・EDGE、カビの色は KINDS です。
  • 早送りの倍率は SPEEDS です。

注意

カビはボタンの周りのキャンバスに描いているので、ボタン自体の押しやすさは変わりません。払ったときの胞子は画面全体を覆う透明なキャンバスに舞います（クリックは下へ素通りします）。保存はブラウザの localStorage を使い、保存できない環境ではページを開いた時点から数えます。

S-002古びていく紙のカードCRAZY度 ★★★★
時間がたつほど紙が日に焼けて黄ばみ、茶色い斑点と折り目が増え、角が折れ、インクと写真が色あせます。クリックした所にはカップの跡が付きます。
Canvas 2Dmix-blend-modeclip-pathlocalStorage

これは何？

1年かけて古びていくカードです。光の当たる左上から日に焼け、付箋が貼ってあった所だけ白く焼け残ります。縁の焼け、紙の繊維、茶色い斑点（フォクシング）、二つの折り目と擦れて剥げたインク、自然にできるカップの跡、折れた角が、決まった順番で現れます。文字と写真も少しずつ色あせ、紙が反っていきます。

使い方

  1. 「全部コピー」して貼り付け、写真（.ug-foxed-photo）と文章を差し替えます。
  2. カードをクリックすると、その場所にカップの跡が付きます（Enterキーでも置けます）。跡は置いた直後は濡れて光り、そのあと時間とともに濃くなります。
  3. 「新品に戻す」を押すと、経過が早回しで巻き戻ります。戻した時刻より後に置いたカップの跡は消えます。
  4. 実際に組み込むときは早送りのつまみを消し、カードの外側（.ug-foxed）に data-key="好きな名前" を付けます。初めて見た日時を保存し、来るたびに少しずつ古びたカードになります。

カスタマイズ

  • 古びきるまでの時間は AGE_SEC（1年）です。
  • 斑点の数は 46、折り目は folds、自然にできるカップの跡は natural（AGE_SEC * .6 で現れる）で決めています。

注意

汚れはカードに重ねたキャンバス（乗算）に描いているので、中の文字は選択も検索もできるままです。角を折るために clip-path を使うので、影は外側の .ug-foxed-wrap の drop-shadow で付けています。

S-003時限爆弾フォームCRAZY度 ★★★★★
入力を始めた瞬間に20秒のカウントダウンが始まります。残りが減るほど揺れ、赤く脈打ち、刻む音が速くなり、時間切れでは入力がすすだらけになって吹き飛びます。
requestAnimationFrameCanvas 2DWeb Audioフォーム

これは何？

爆弾の付いた問い合わせフォームです。入力欄に触れた時点で赤いLEDのカウントダウンが始まり、残り45％で揺れ始め、残り20％で枠が心拍のように赤く脈打ち、ラベルの文字が震えます。最後の3秒は送信ボタンが「今です！」と脈打ちます。時間内に送信できれば緑に変わって止まり、間に合わなければ煙とすすが上がって入力が消えます。

使い方

  1. 「全部コピー」して貼り付けます。制限時間は data-limit（秒）で決めます。見本は20秒です。
  2. お名前とメールを入れて送信すると解除できます。空のまま送ると、その欄が揺れて教えます。
  3. 本当に送信するときは、defuse() の中で fetch などを呼びます。
  4. 時計は実時間で減ります。別のタブを見ていても止まりません。

カスタマイズ

  • 焦らせる文言は loop() の show(...)、揺れの強さは hot * hot * 5 です。
  • 刻む間隔は nextTick（1秒→0.5秒→0.25秒）です。
  • 時間切れのあと元に戻るまでの時間は 2900 ミリ秒です。

注意

本物の申し込みフォームで時間制限をかけて焦らせると、利用者を急がせて判断を誤らせる「ダークパターン」になります。ゲームやジョーク、イベントの演出など、焦ること自体が楽しい場面で使ってください。音は入力を始めてから時間切れか解除までの間だけ鳴ります。

S-004空の移ろうヘッダーCRAZY度 ★★★★
本当の時刻と日付から太陽の高さと月齢を計算し、空の色・朝焼けと夕焼け・星・月の満ち欠け・窓あかりを描きます。文字の影は太陽と反対側へ伸びます。空を横になぞると時間が動きます。
Canvas 2D太陽高度の計算月齢backdrop-filter

これは何？

見ている人の時計どおりに空が移ろうヘッダーです。日付と緯度から太陽の高さを計算するので、夏は日が長く、冬は早く暮れます。太陽が低いほど空の下側が赤く染まり、雲の下側も色づきます。夜は星がまたたき、ときどき流れ星が走り、月は実際の月齢どおりに欠けています。街の窓は夕方に一つずつ灯り、夜中に一つずつ消えます。昼は太陽と反対側へ影が伸び（朝夕は長く、昼は短く）、夜は文字がネオンのように灯ります。

使い方

  1. 「全部コピー」して貼り付け、ロゴとメニューを差し替えます。
  2. 空を横になぞると、画面の幅で12時間ぶん時間が動きます。下の帯の時刻のつまみと早送りでも動かせます。「今」で現在の時刻に戻ります。
  3. 実際に組み込むときは、下の帯（.ug-daysky-ctl）を消します。消すと常に現在の時刻で表示します。

カスタマイズ

  • 場所は data-lat（緯度）と data-lng（経度）です。東京は 35.68・139.69、札幌なら 43.06・141.35 です。
  • 空の色は SKY（太陽の高さごとに、てっぺんの色と地平線の色）です。
  • あいさつの切り替わりは ui() の時刻の条件です。

注意

太陽の位置は、経度と均時差で南中の時刻を補正したおおまかな計算です（大気の屈折などを省いているので、日の出と日の入りは実際と数分ずれます）。月の高さは簡易計算です。位置情報は使わず、時刻は端末の時計とタイムゾーンから取ります。

S-005巻き戻せるメモ帳CRAZY度 ★★★★
描いた線も打った文字も、こぼしたペンキも、長押しで時間ごと巻き戻せます。押し続けるほど速く戻り、離したところからまた時間が進みます。
Canvas 2Dタイムライン記録Pointer EventsWeb Audio

これは何？

線の1点1点、文字の1文字ごと、ペンキのしぶきまで、起きたことをすべて時刻付きで記録し、その時刻の状態を組み立て直して描くメモ帳です。巻き戻すと、線は描いた順の逆に消え、ペンキのしぶきは缶へ飛んで戻り、文字は打った逆順に消えます。押し続けるほど速くなり（最大16倍）、時計の針が逆回りし、画面にテープの巻き戻しのような筋と残像が出ます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 枠の中に指やマウスで描き、下の欄に文字を打ち、「ペンキをこぼす」で台なしにしてから、「巻き戻す」を長押しします。
  3. キーボードでは、巻き戻すボタンでスペースかEnterを長押しします。
  4. 離したところから先の「未来」は消え、そこから記録をやり直します。

カスタマイズ

  • 巻き戻しの最高速は Math.min(16, ...)、加速のしかたは held * held * 5 です。
  • 線の色は INKS、ペンキの色は PAINTS、缶の位置は CAN です。

注意

描く枠の上では、指で描けるようにスクロールを止めています。記録はページを閉じると消えます。長く描き続けると記録が増えるので、作品として残すメモ帳よりも、操作を見せる演出に向いています。

S-006絡みつくつるCRAZY度 ★★★★★
ページを開いたまま放っておくと、下の縁からつるが伸び、メニューやカードの縁に沿って這い上がり、葉を広げて花を咲かせます。重みでカードが傾き、絡まりすぎたボタンは押せなくなります。
L-systemCanvas 2DResizeObserverWeb Audio

これは何？

ページを開いていた時間だけ伸びるつるです。枝分かれのしかたは L-system（文字の書き換え規則で植物の形を作る方法）で決め、伸びる向きは「上へ向かう」「近くのUIの縁に沿う」の2つの力で曲げています。茎は枝が多い根元ほど太く、葉は茎が伸びたあとから開き、半分を過ぎると芽の先に花が咲きます。右上からは1本垂れてきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-ivy-page の中身を自分のページに差し替えます。
  2. つるに絡まれる部品は、walls の選択子で決めています。重みで傾けたい部品には ug-ivy-hang を付けます。
  3. つるをなぞると切れて落ち、切り口から同じ形でまた伸びてきます（スマホは横になぞります）。
  4. 「最初から」を押すと、つる・葉・花が消え、傾いたカードも戻って、芽から育ち直します（早送りの倍率はそのままです）。
  5. 実際に組み込むときは、右下の帯（.ug-ivy-bar。早送りのつまみと「最初から」）を消します。消すと実時間で伸びます。

カスタマイズ

  • 伸びきるまでの時間は GROW_SEC（600秒＝10分）です。
  • 枝分かれの規則は lsys()、繰り返しの回数は lsys(rand, 9) の 9、根元の位置は build() の配列です。
  • 形は種（seed）で決まるので、同じ種なら毎回同じ形に育ちます。
  • 育ち直しの処理は restart() です。ボタンは .ug-ivy-reset で探しているので、帯を消すときも「最初から」だけ好きな場所に残せます。

注意

つるは部品の上に重ねたキャンバスに描いているので、下のリンクやボタンはそのまま押せます（絡まりすぎた見本のボタンだけは、わざと押せなくしています）。茎は数千本になるため、伸びている間は描き直しが続きます。画面の大きさが変わると、同じ種で育ち直します。