使用例

独立してデプロイできる六つの例が同じ公開 API を使います。レイアウト、ラベル、操作、既定値、純粋な CSS 表示を揃え、フレームワーク統合だけを変えています。

公開デモのドメインはデプロイ先です。DNS と本番配置はこの文書の雛形とは別に管理されます。

各サンドボックスの内容

• 五つの状態と固有のモーション
• サイズと速度の制御
• 一時停止、影、動きを減らす設定
• 六つの組み込みプリセット
• 厳密な五色の独自パレット
• プリセットと独自色モードの切り替え
• フレームワーク本来の状態管理による <orb-z> 制御
• 閉じた Shadow DOM の外にある意味のある状態テキスト

同じ UI 自体がデモの一部です。一方が Vue、他方が React という理由だけで Web コンポーネント導入後の製品が変わるべきではありません。

サンドボックスを実行する

リポジトリのルートで実行します。

pnpm install --frozen-lockfile
pnpm build

pnpm build は公開パッケージで六つのアプリを構築します。ルートのコマンドで全開発サーバーを同時に起動します。

pnpm showcase

各例は表に示したポートを使うため、六つを競合なく同時実行できます。

個別の Vercel プロジェクトとして配置

サンドボックスごとに Vercel プロジェクトを作り、該当フォルダーを Root Directory に指定します。

sandbox/vanilla
sandbox/react
sandbox/vue
sandbox/svelte
sandbox/angular
sandbox/next

各例は private 設定で、独自の依存・ビルド設定・vercel.json を持ちます。リポジトリのツールとデモであり、npm パッケージには含まれません。

各例は公開済みの正確なバージョンを通常の依存として使います。パッケージの src/ や別のサンドボックスをインポートしてはいけません。

デザインではなく統合を比べる

フレームワーク固有の疑問を例で確認します。

• ブラウザー登録はどこに置くか
• カスタム要素の真偽値属性をどうバインドするか
• orb-z を認識するコンパイラー設定は何か
• TypeScript で OrbzState と OrbzElement をどう取得するか
• React/Next のクライアント境界をどこから始めるか

短い例はフレームワーク別の手順、独立配置や混在構成はマイクロフロントエンドの Orbzを参照してください。