/
React / Next.js 向けSVG リアルタイム物理キャラクター SDK
UIの状態を、キャラクターのふるまいに。
Reactの状態を渡すだけ。表情、視線、弾性、動きまで リアルタイムに応える。画像アセットはゼロ。
SVG0 assetsReact 19
import { JellyCharacter } from '@jellykit/react'
<JellyCharacter emotion="thinking" interactive draggable />AIアシスタント
注文のステータスを教えて
ご注文を確認中です… 少々お待ちください。10:24
本物の物理です。つかんで、投げてみてください
01 / クイックスタート
30秒で、画面にいのちを。
インストールして、1コンポーネントを置くだけ。SSR対応、dynamic import不要、依存はReactのみ。
import { JellyCharacter } from '@jellykit/react';
export default function Page() {
return <JellyCharacter emotion="happy" interactive />;
}02 / State Lab
状態を渡すと、全身が変わる。
色や口の形だけではありません。弾力・減衰・重力・呼吸・視線まで、感情ごとに物理特性が切り替わります。
<JellyCharacter emotion="idle" />03 / Physics Lab
物理は、ぜんぶ調整できる。
重力・弾力・減衰・反発・発話レベルはそのままpropsです。ここで触った値が右のコードになります。
<JellyCharacter
size={200}
palette={jellyThemes.ocean}
gravity={145}
stiffness={34}
damping={5.4}
restitution={0.24}
voiceLevel={0.2}
interactive
draggable
/>04 / アクション
アクションは、中断できるPromise。
jumpからwaddleまで、すべて物理インパルスです。連打しても安全な範囲に収まります。
05 / サイト内マスコット
ページの静かな場所を、自分で見つける。
data-jelly-zoneで案内するか、空き領域をグリッド+A*で探索。リンクや入力は障害物として避け、モーダルや入力中は静かに待ちます。
商品カード障害物として検出
安全エリア Adata-jelly-zone
安全エリア B到達できるセル
進入禁止パネル14px拡張
06 / API・導入例
そのままNext.jsへ。
App RouterのServer Componentに置けます。AIアシスタントの状態は、そのままemotionへマップできます。
// app/page.tsx — Server Component のままでOK
import { JellyCharacter } from '@jellykit/react';
export default function Page() {
return (
<main>
<JellyCharacter emotion="idle" interactive />
</main>
);
}07 / 品質
数字で語る。
このページの実測値です。ビルドごとにCIでサイズ予算・ベンチマーク・E2Eを検証しています。
bundle size(min+gzip実測)
| @jellykit/core | 5.0 KB | 12 KB budget |
|---|---|---|
| JellyCharacter | 12.1 KB | 25 KB budget |
| JellyMascot | 17.1 KB | 18 KB budget |
— FPSこのページの実測FPS
| SSR / hydration | renderToString一致・警告ゼロをテストで担保 |
|---|---|
| アクセシビリティ | role / aria-label / キーボード操作 / decorative |
| Reduced Motion | prefers-reduced-motionで低速化・移動は瞬時配置 |
| ブラウザ | Chrome / Edge / Firefox / Safari(SVG 2対応) |
| 依存 | ランタイム依存 0(React peerのみ) |