explainroo
explainroo is a free, open source tool that lets your AI agent make explainer videos with a voice. It runs on your own computer and needs no API key.
seed の文字列から GLSL シェーダを合成し、音に合わせて描く。ブラウザだけで動く VJ ツール。
Translation pending
MediaTypeScript · JavaScriptGitHub @tainakanchuOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
ブラウザだけで動く音反応 VJ ビジュアルツール。seed から GLSL を合成する Semantic Synth、WebGL2 GPU シーン、OBS 向け透過オーバーレイ、別窓 Scene Deck
Translation pending
Loading the full README.
Read the full README ↗ブラウザだけで動く、音に反応するフルスクリーン・ビジュアルツールです。マイク / ライン入力 / ループバック(デスクトップ音声)を解析し、なめらかで音楽に反応するビジュアルを描画します。OBS のブラウザソースや、プロジェクター用のフルスクリーンブラウザに常駐させて使う前提で設計しています。
pnpm install
pnpm dev
ブラウザで表示された URL(通常 http://localhost:5173)を開きます。初回はマイク(音声入力)の許可を求められます。許可するとビジュアルが音に反応し始めます。
入力欄にフォーカスがあるときは無効になります。
| キー | 動作 |
|---|---|
H | コントロールパネルの表示 / 非表示 |
F | フルスクリーン切り替え |
B | 背景(黒 / 透過)の切り替え |
R | シード(look gacha)を引き直す(ガチャ) |
D | Semantic Synth の Generator 構成はそのまま、細部だけ引き直す(reroll details) |
S | Scene Deck 窓を開く(?deck=1。BroadcastChannel、bridge 不要) |
T | タップテンポ(手動 BPM 入力) |
パネルはマウスを止めると約 3 秒で自動的にフェードアウトし、カーソルも隠れます。マウスを動かすと再表示されます。
パネル上部の Look にシード文字列を入力すると、その文字列から決定論的にビジュアル全体の「個性」が生成されます。色だけでなく、配色モード・要素数・サイズ・モーション速度・対称数・回転方向・ゆらぎ、そして Generator の組み合わせまで一括で変化するので、シードを引き直すたびにガチャを引くように見た目が大きく変わります。
R)を押すと、neon-tiger-042 のような読みやすいランダムシードが生成され、即座に反映されます。本ツールが描画するのは、seed から GLSL シェーダそのものを合成する「Semantic Synth」です。
R)と、ハード切替ではなくクロスフェードで新しい Look へ滑らかに遷移します。D)を使ってください。同じ Generator 構成のまま細部だけ新しいシードで引き直されます(vj-tweak.mjs --reroll でも同じことができます)。構成そのものは変わらないので、後述のオーディオ・リアクション(拍で起きるグリッチの種類)も変わりません。旧シーン(Bars / Radial / Waveform / Lissajous / Rings / Particles / Fluid / Smoke / Aurora)の見た目は、Semantic Synth の Generator としてガチャの候補に残っています: spectrumBars(スペクトラム・バー、ピークホールド付き)、spectrumRadial(円形スペクトラム)、oscilloscope(オシロスコープ)、lissajousScope(X-Y リサージュ)、beatRings(拍で広がる多角形リング)、particleField(上昇 / 軌道 / 雨 / 星空のパーティクル)、inkMarble(墨流しマーブル)、smokeFog(煙)、auroraCurtain(オーロラ)。Lava は既存の lavaBlobs がそのまま担当します。
スペクトラム系とオシロ系は新しい「オーディオ・テクスチャ」を読みます。Generator が audio: ['spectrum' | 'wave'] を宣言すると、その Patch にだけ uSpectrum(128 バンドの対数スペクトラム。アタック / リリースの平滑化とピークホールド付き)と uWave(256 サンプルの波形 + リサージュ用の X/Y ペア)が毎フレーム GPU に送られます。宣言しない Patch のシェーダは従来と 1 バイトも変わりません。無音時はスペクトラムが 0、波形はフラットになります。テストやカバレッジ計測、Deck のサムネイルでは、時間に依存しない固定の合成信号を使います。
vj:gen では「スペクトラム」「オシロ」「リサージュ」「オーロラ」「煙」「パーティクル」「リング」「マーブル」で呼び出せます。
Generator の大半は音の uniform を読まないので、画面全体に効く音の反応は Patch 共通の層が担っています。以前はここが「軽いズームイン+明るさの持ち上げ」の 1 種類しか無く、どのシードを引いても拍で起きることは同じでした。今はこの層がカタログになっていて、Patch ごとに座標系の反応 1〜2 種類+色の反応 1 種類が決定的に選ばれます。
| 座標に効く | 色に効く |
|---|---|
punchZoom 拍の頭で画面が寄る | rgbSplit 拍で R/B が横にずれる(色収差グリッチ) |
sliceShift 横帯ごとに水平にずれる(テープが飛ぶようなグリッチ) | echoGhost 拍で少し縮んだ残像が背後に重なる |
blockCrush 拍でマクロブロックに潰れる | hueSlam 拍で色相が飛ぶ |
jitter 拍で画が飛び、高域で細かく震える | posterCrush 拍で階調が段々に潰れる(ビットクラッシュ) |
spinKick 拍で回転が蹴られる | invertFlash 強い拍だけ一瞬ネガになる |
waveTear 走査線が横に裂けて流れる | scanGlow 走査バンドが流れ、拍で光る |
mirrorSnap 拍で鏡像に畳まれる | channelRoll 強い拍で RGB が入れ替わる |
rgbSplit / echoGhost は拍の瞬間だけシェーダを追加で評価します。重い Patch(heavy な Generator 入り、または厚いスタック)には載りません。Semantic Synth の時間は、音が無くても一定の速さで進み続けるのではなく、音の大きさで進む速さが変わります。
composition.speed)も効きます。上限は 1 倍なので、引きによって従来より速くなる Patch はありません。大音量が続く環境(クラブなど)で画面が真っ暗になり続ける、という事故を構造的に防いでいます。
threshold / gate / dropout のような、上げると絵が消えるパラメータは自動では選ばれません(手で組んだ Patch には制限はかかりません)。画面右側の Timeline パネルでは、数秒〜数小節先の演出イベント(シード変更やトランジションなど)をあらかじめ予約でき、演出の流れを JSON として記録・再生できます。詳細は Issue #3 の RFC を参照してください。
Resolume のシーン一覧のように、別窓で 8 スロットのバリエーションをポン出しできます。メイン窓(semantic-synth)のいまの Patch をベースに、同じ Generator 構成のままパラメータ違いを 8 面自動生成し、キーボードで即遷移させます。通信は同一オリジンの BroadcastChannel(seedshade-deck-v1)だけで、pnpm bridge も ?bridge=1 も不要です。
デッキ窓では AudioEngine / Renderer は起動しません(マイク許可プロンプトも、常時の GPU 負荷も無し)。メイン窓をプロジェクター出力、Deck を手元の操作卓にする運用を想定しています。
?ui=hide で開く(必要なら ?seed=…)F を押してフルスクリーンにする。Fullscreen はメイン窓側のユーザー操作が必要で、Deck からリモートでは入れないS を押して Deck を開くS(D は reroll details。Issue #51 では D と書いてあったが、PR #49 で D が細部ガチャに使われているため S)?deck=1(または ?deck=true)。窓名 vj-scene-deck なので連打しても窓は増えない1–8 でポン出し。Shift+数字 は選択中プリセットを無視して cut。X でトランジションを cut → default → slow と巡回(以前は T。T はタップテンポに変更)← → ↑ ↓ で 4×2 のカーソル、Enter / Space でそのスロットを出すR でライブ Patch を取り直して再生成、G で base を保ったまま bankSeed ガチャA で ON/OFF、M で秒 / 小節、- / = で間隔。順序はツールバーの seq / rnd(rnd はいまのスロット以外)Q seed ガチャ、W 細部 reroll、B 背景、H hue 固定トグル、[ / ] hue ∓15°、T タップテンポ、, / . テンポ ÷2 / ×2、/ テンポ AUTO、L Timeline lock 30s トグルA〜H はクリックで呼出、Shift+クリック で保存。Shift+S は次の空きスロットへ。JSON copy / paste で持ち運び(詳細は「手札の保存」)| キー | 動作 |
|---|---|
1–8 | スロットをポン出し |
Shift+数字 | cut でポン出し |
← → ↑ ↓ | 4×2 カーソル |
Enter / Space | カーソル位置を出す |
T | タップテンポ(変更。以前はトランジション巡回) |
X | トランジション巡回(T から移動) |
, / . | テンポ ÷2 / ×2 |
/ | テンポ AUTO |
Q | seed ガチャ(メイン窓 R 相当。Deck の R は bank 再生成) |
W | 細部 reroll(メイン窓 D 相当) |
B | 背景トグル |
H | hue 固定トグル(fixed に入るとき現在 hue を固定) |
[ / ] | hue 固定 ∓15° |
L | Timeline lock 30s ⇄ 解除 |
A | Deck 側 auto 送り ON/OFF |
M | auto の秒 / 小節 |
- / = | auto 間隔 |
R | ライブ Patch から bank 再生成 |
G | bank ガチャ |
Shift+S | いまの手札を次の空きスロット(無ければ A)へ保存 |
F | この窓のフルスクリーン(メイン窓の出力全画面にはならない) |
手動でポン出した位置から自動送りが続きます(秒タイマーはリセット)。バンクはトリガーのたびに作り直さないので、「さっきの 3 番」が消えません。Claude Code / vj-tweak / seed ガチャでメインの画がバンクの外に出たら BASE CHANGED が出るので、R で取り直してください。
Scene Deck 窓だけで Web MIDI を受けます(メイン窓には載せません)。Deck が背面・非フォーカスでも効きます(Web MIDI はフォーカス不要)。
使い方:
12 01)で確定し、Native KORG Mode に入る。native バッジが出る。入れなければ Current Scene Data Dump でパッドの Note# からマップを自動生成するEsc で learn 終了。learn 中もキーボードのパッドは使えるlocalStorage キー seedshade-deck-midi-v1({ activeMapping, nanopad: { preferNative, swapRows } })。JSON 書き出し / 読み込みで別 PC へ持てるNative mode の in / out: 接続時に Native In、Deck 窓を閉じる(またはリロードする)ときに Native Out を送る。送らないと nanoPAD2 が Native のまま残り、他アプリで普段のノートが出なくなる。戻らなければ USB を抜くか電源再投入。
Scene LED(Native mode のみ):
| LED | 意味 |
|---|---|
| Scene 1 | host 接続中(conn live) |
| Scene 2 | Deck auto ON |
| Scene 3 | tempo LOCK |
| Scene 4 | learn 中。エラー時は 500ms 点滅 |
既定マップ(Native。上下が逆ならパネルの「上下入替」): 下段 8 パッド(Note 72–79 / ch 2)で slot 1–8、上段(Note 64–71)で cut、Scene ボタン(CC 57 / ch 16)でタップテンポ、X-Y タッチ(CC 11)でカーソル発火。X/Y 軸は未割り当て(learn で hue / interval などに)。Touch Scale の 92/82/B2 は無視。
ベロシティ cut は MIDI パネルの cut ≥(1–127)。空欄でオフ。強く叩いたら cut、弱ければ選択中 preset。
バンク(BASE + V1…V7)は base Patch と bankSeed だけを保存します。8 面そのものは持たず、同じ入力なら buildSceneBank が同じ手札を再生成します。
localStorage キー seedshade-deck-banks-v1 の current を更新する(クラッシュ耐性)。Deck 起動時に current があれば メイン窓の currentPatch を待たずに 復元する。未保存なら従来どおり live から生成するShift+クリック で保存(上書き確認なし)。空は薄く表示。右クリック / 長押しで名前を編集。呼び出しはバンクを差し替えるだけで pad は自動では叩かないし seed:set も送らない(live の画は pad 1 などを押すまで変わらない)。menu の seed を採用 を押すと seed:set が送られ、Settings.seed とメインの画の両方が作り直されるJSON copy でいまのスナップショットをクリップボードへ。menu 内のテキストエリアに貼って JSON paste。別 PC・別ブラウザへ持てるseedshade-images にある。別マシンへ JSON だけ持っていくとサンプラーは透明ダミーになる(スロットはラベルと detail で判別できる)R で live から取り直すclear current → confirm clear current(2 段)。次回起動は live から生成する。A〜H は消さない入力音声からリアルタイムに BPM を推定し、ビートグリッドを生成してパルスや自動ガチャを音楽の拍に合わせます。パネルの Tempo セクションに現在の BPM とステータスチップ、拍位置を示す 4 つのドット(1 拍目=ダウンビートを強調)が表示されます。
LOCK、探索中は SEARCH… と表示されます。T)を曲に合わせて 2 回以上叩くと、その間隔から手動で BPM を設定します(TAP 表示)。音声が止まっていても手動テンポでグリッドが回ります。検出は低域のオンセットを手がかりにするため、キックのはっきりした 4 つ打ち系で最も安定します。ビートが取りづらいジャンルでは TAP で手動設定するのが確実です。
?key=value 形式で起動時の設定を上書きできます(localStorage より優先)。
| パラメータ | 例 | 説明 |
|---|---|---|
bg | bg=transparent | 背景(black / transparent) |
ui | ui=hide | コントロールパネルを最初から非表示にする(OBS 用) |
gain | gain=2 | 入力ゲイン(0.5 – 4) |
autogacha | autogacha=1 | N バーごとの自動ガチャを ON にする(1 / true) |
gachabars | gachabars=32 | 自動ガチャの間隔(1 – 512 小節) |
hue | hue=200 | 色相を固定(0 – 360、指定すると hue 固定モードになる) |
seed | seed=neon-tiger-042 | look gacha のシード(見た目の個性を決める文字列。最大 64 文字) |
device | device=<deviceId> | 入力デバイス id を指定 |
mirror | mirror=1 | 中継に表示専用(mirror)として接続する。room または bridge と併用。応答は返さず同じコマンドを映像に反映するだけ |
deck | deck=1 | Scene Deck 窓として開く(1 / true)。Audio / Renderer は起動しない |
例: 透過背景・パネル非表示・ゲイン 2 で起動
http://localhost:5173/?bg=transparent&ui=hide&gain=2
複数台の端末に同じ映像を出したいときは、1 台を通常の synth(room / bridge のみ)として接続し、残りを mirror=1 付きで開きます。mirror は表示専用で何台でも接続でき、中継からのコマンドを映像に反映するだけで応答は返しません。
OBS で ソース → 追加 → ブラウザ を選びます。
URL に上記の URL パラメータ付きアドレスを入力します。オーバーレイ用途では透過+パネル非表示が便利です:
http://localhost:5173/?bg=transparent&ui=hide
(pnpm build 後に pnpm preview やホスティング先の URL を使ってもかまいません。)
幅 / 高さ を出力解像度に合わせます(例: 1920 × 1080)。
bg=transparent を付けておけばキャンバスは透過のままなので、他のソースの上に重ねられます。
ブラウザの「マイク入力」はマイクの音しか拾いません。BGM や DAW の音に反応させるには、ループバック(仮想オーディオ)デバイスを入力に選びます。
Monitor of ...)を Input device に選ぶとデスクトップ音声を取り込めます。OBS のブラウザソース自体は、ページ内で
getUserMediaを使う本ツールでは「ページの音声を OBS で制御」設定とは無関係です。音声解析はあくまでページ側(ブラウザ)で行われます。OBS のブラウザソース内でgetUserMediaを使う場合、OBS / OS 側でマイク(仮想デバイス)アクセスが許可されている必要があります。
pnpm build # tsc -b && vite build(型チェック込み)
pnpm preview # ビルド成果物をローカルで確認
dist/ に静的ファイルが出力されるので、任意の静的ホスティングに配置できます。
Semantic Synth の VisualPatch(JSON)を送信前にローカルで検証する CLI を同梱しています。CLI から操縦・自動化する経路もあります: scripts/vj-ctl.mjs は 1 コマンドずつ叩く低レベル CLI、scripts/vj-set.mjs は本番用のセット(複数シーン)を Timeline に "cue" として仕込み、演奏中に手で進める高レベル CLI です。使い方の全体は .claude/skills/vj-director/SKILL.md を参照してください。
pnpm vj:validate patch.json
src/synth/validate.ts / src/synth/cost.ts を Vite の SSR モジュールローダーで直接実行するので、検証ルールの複製はありません。
vj:preview)LLM / 人間のディレクターが GLSL を読んで見た目を推測する代わりに、Patch をローカル GPU で描いて PNG にする CLI です。bridge や本番シーンには繋ぎません(measure:coverage と同じヘッドレス Chromium 経路)。
# カタログ全 Generator のコンタクトシート(いちばん使う)
pnpm vj:preview --contact-sheet artifacts/contact-sheet.png
# seed から derive した Patch のフィルムストリップ(複数時刻)
pnpm vj:preview --seed take-1 artifacts/seed.png
# 手書き / 生成した VisualPatch JSON
pnpm vj:preview path/to/patch.json artifacts/patch.png
# 1 パラメータを min..max で横並びスイープ
pnpm vj:preview --sweep gamma.curve artifacts/sweep.png
nix develop に入ると CHROMIUM_BIN が通ります(Playwright は単体では CHROMIUM_BIN を読まないので、ハーネス側が launch() に渡しています)。grid の上に載せます(mod_coord だけ source より前)。パラメータはカタログの default です。vj-recipe.mjs)— ムード + seed + tweaks を JSON で持ち回るsrc/synth/validate.ts は VisualOperator の generatorVersion が catalog の現行 version と厳密に一致することを要求し、catalog は各 generator の最新版しか保持しません。そのため生の Patch JSON をそのままリポジトリに置くと、generator の version が上がった瞬間に静かに壊れてしまいます。recipe(recipes/*.json)はこの問題を避けるため、Patch そのものではなく「ムード語 + seed(vj-gen.mjs へ渡す)+ 差分トークン列(vj-tweak.mjs 形式)」という作り直し可能な指示書だけを保存します。小さくて diff しやすく、catalog がどれだけ変わっても現行 catalog に対して作り直せます。
recipes/*.json … 個々の recipe({ name, mood, seed, tweaks, notes })recipes/setlists/*.json … 複数の recipe を時間軸に並べたセットリスト(データのみ。実行 CLI は別途)# 一覧表示(通信なし)
node scripts/vj-recipe.mjs list
# 中身を見る(通信なし)
node scripts/vj-recipe.mjs show humid-qilou-night
# mood+seed から作り直し、tweaks を重ねた draft を確認する(送信しない)
node scripts/vj-recipe.mjs apply humid-qilou-night --url wss://example.workers.dev/room/xxxx --dry-run
# 検証を通ったら送る
node scripts/vj-recipe.mjs apply humid-qilou-night --url wss://example.workers.dev/room/xxxx