Uncategorized 2026年1月16日

癒しの箱庭「Resonant Jelly Box」

# Resonant Jelly Box (チルクリック)

Vibe Codingに基づいた、生産性を目的としないデジタル箱庭です。

幾何学図形の「柔らかい」動きと音楽の共鳴をお楽しみください。

https://ground-field.net/aiapp/chill-click/index.html

概要

**物理演算**: Matter.jsを使用したボールプールのような挙動

**Vibe**: 音声ボリュームに反応してオブジェクトが呼吸します

**Jelly Effect**: 衝突時にゼリーのように弾みます

実行方法

このフォルダにある `index.html` をブラウザで開いてください。

※ `file://` プロトコルでも動作しますが、音声解析などのセキュリティポリシーにより、ローカルサーバー(VSCodeのLive Serverなど)経由での実行を推奨します。

操作

**Start Experience**: 画面中央のボタンをクリックして開始

**Mouse**: オブジェクトを掴んで投げる、かき回す

**UI Panel (右上)**:

  – **Mode**: カラーパレットの変更(雨、夕暮れ、など)

  – **Music box**: 生成された環境音を再生

  – **Mic**: マイク入力に反応させる

## 技術

– Vanilla JS

– HTML5 Canvas

– Matter.js

– Web Audio API