SYNCH · conversational AI

Voice that listens.
Form that responds.

SVG path を時間ノイズで連続変形させ、カーソル近接で形が膨らむ有機的なヒーロー。架空会話 AI SYNCH の listening / thinking / speaking という 3 状態を blob の形・色・速さで表現する実用例。

idle

The shape of
the answer
before the words.

SYNCH は会話を「形」で返す。声が届くと blob が listening に。考え始めると thinking に乱れ、応答が紡がれる瞬間に speaking として外側へ広がる。インターフェースが「いまここで何が起きているか」を語り続ける。

47languages
0.31savg response
2.1Mconversations / day
99.98%uptime · 30d

CONVERSATION · LIVE PREVIEW 01 / 04

YOUWhat does inertia feel like?

SYNCHLike resisting your past self. A train that hasn’t decided to stop.

YOUTranslate “忍耐” into a metaphor.

SYNCHA river smoothing its own bed. Becoming what it carves.

YOUWhy do birds line up on wires?

SYNCHHeat. Predator angle. Sometimes — just opinion.

YOUCompose a one-line poem.

SYNCHThe kettle remembers being water.

SYNCH is thinking…

使い方

— USAGE

↑ 想定：AI / 音声 / 音楽プロダクトのヒーロー、ロード中ステータス、空白時間のフィラー。形が変わり続けることそのものが「ここはまだ生きている」というシグナルになる場面で。

2 ファイルをコピー

style.css の /* ─── COMPONENT ─── */ ブロックと、script.js の IIFE 全体を移植先へ。外部依存ゼロ。

data-blob で宣言

ルート要素に data-blob、内部の SVG <path> に data-blob-path を付ければ自動初期化。data-blob-points（制御点数）、data-blob-radius（基準半径）、data-blob-amp（揺らぎ振幅）、data-blob-cursor（カーソル影響半径）で調整。

setState / beat API

el._blob.setState('thinking') / ('speaking') / ('listening') で挙動を切替。el._blob.beat() で一発の脈動を加える（外側への膨張 → 減衰）。

CSS 変数 / データ属性

data-blob-points制御点の数（多いほど滑らか）12

data-blob-radiusblob の基準半径（viewBox 単位）120

data-blob-amp各点の最大変位（揺らぎ）22

data-blob-cursorカーソル近接で点が引き寄せられる強度38

Voice that listens.Form that responds.

The shape of the answer before the words.