声を出すと、光の布が流れる。言葉を落とすと、色が咲く。音楽を流すと、花火が上がる。
そういうページを作って、今日
に公開した。まだベータだけど、「今のところ、こんな使い方ができますよ」という話を書いておきたい。
きっかけは、単純な願いだった。花火が見たいのに、見に行けない人にもう一度花火を。 声や言葉って、口から出た瞬間に消えていく。それが、少しだけ色になって残る場所があってもいいな、と思った。
まず、これは何か
ブラウザだけで動く、光のアートです。インストールはいらない。ページを開いて、始めるボタンを押すだけ。
やっていることは、実はとてもシンプル。マイクやPCの音の「大きさ」だけを読んで、光にしている。 何をしゃべったか、を聞き取っているわけではない。
そして、ここは大事にした。
マイクやPCの音
│
▼ 「音の大きさ」だけをこの端末の中で読む
│
▼
光になる(録音しない・送信しない・保存しない)
音そのものは、あなたの端末のブラウザから一歩も外に出ない。どこにも送っていないし、残してもいない。
こんな使い方ができます(β・今のところ)
① 声で始める
歌ったり話したりすると、声が光の布になって流れる。強い音が来ると、花火が上がる。マイクに向かって「あー」と伸ばすだけでも、布がうねる。
② PCの音で始める
自分の曲をブラウザで流して、その音に花火を乗せられる。配信で、映像の背景にかぶせると映える。(この機能は Chrome / Edge のパソコン向け)
③ 言葉を落とす
文字を打ってEnter、または画面をクリックすると、その言葉の色がふわっと咲く。言葉ごとに色が決まる。
④ スマホ
スマホは、曲をスピーカーで流して「声で始める」で拾うのがおすすめ。マイクがその音を聞いて、花火になる。
声・音 → 光の布(流れる)
強い音 → 花火(七色に咲く)
言葉 → 色になって、少し残る
配信で使うなら、OBSのブラウザキャプチャやウィンドウキャプチャでそのまま背景にできる。戻るボタンを押せば、いつでもトップページに帰ってこられるようにした。
<参考>β時点のスマホからのcapture
※PC向けに作ったので、改修今後すると思います
※スマホのバーは2段にしていないので、左右に動かせます
※文字入力が出てくるのは仕様です。黒い個所押すとキーボードは消えて画面大きくなります。いつものスマホの使い方だと思います。
sample1 花火に寄せています

sample2 絹に寄せています。

画面の下のバーの見かた
始めると、画面の下に小さな操作バーが出ます。左から、こんな役割です。
言葉を落とす
文字を打ってEnter。その言葉の色が、ふわっと咲く。
絹 ⇔ 花火
光の質を変えるスライダー。左に寄せると、流れる布(絹)。右に寄せると、開いて散る花火。真ん中は、その混ざり具合。
感度
音への反応の強さ。上げるほど、小さな音でも布が動き、花火がたくさん上がる。曲によって、ちょうどいい所を探ってみてください。
透過
背景を透明にします。OBSや動画編集で、他の映像や画像の上にこの光を重ねたい人向け。 オンにすると光だけが残って、下の絵が透けます。
⛶(画面最大化)
全画面表示。配信や鑑賞のときはこれで。
ひとつだけ、透過について。この光を下絵に重ねるときの 「ブレンドモード」(スクリーン、加算、比較(明)など)は、下になる画像によって、いちばん馴染むものが変わります。 これはOBSや編集ソフト側で切り替える設定なので、あなたの下絵に合う最適なものを探してみてください。ここが決まると、ぐっと映えます。
まだベータです
正直に言うと、まだ実験中。うまく動かないことや、予告なく見た目が変わることがあると思う。
それでも今日出したのは、使ってもらえるのが、いちばん嬉しいから。 触ってみて「こう動いたらいいのに」があれば、それがそのまま次の改良になる。
花火の部分は、何度も作り直した。開いた光が中心に穴を作らないように芯の色を変えたり、柳が「回転する円柱」に見えてしまうのを、白い先端だけがすっと落ちる形に直したり。本物の花火の仕組みを写しながら、仕組みを解析しながら、どうコードに置き換えたらいいかの前準備をして手触りを一つずつ合わせていった。これも、AI(Claude Code)と対話しながらの共作です。
開いてみてください
パソコンなら Chrome か Edge で。スマホなら、好きな曲を流して「声で始める」を押してみてください。
あなたの声が、あなたの好きな曲が、色になって咲きます。



