Mojave Studio Logo

¥2,365

¥2,365

ライセンスを購入

ライセンスを購入

Framerに追加

Framerに追加

リアルタイムのWebGLプレビュー、テーマ設定、コード生成を備えたMojave Globe Reactコンポーネントをデザインおよびデプロイするためのフル機能のFramerプラグイン。

ライブプレビュー

  • スティッキープレビューキャンバスは、Framer に挿入されるのと同じ設定で地球をレンダリングします。

  • テクスチャと大気の変化を即座にストリームし、現在の Framer テーマ(ライト/ダーク)を尊重します。

  • マウスホイールはスクロール/ルートモードのためのカメラ位置を調整し、ドラッグの相互作用は有効にしたプロップを反映します。

  • ルートモードは、開始/終了場所が両方とも解決されると、その間にアニメーションを実行します。


外観コントロール

  • テクスチャスタイル: ライト、ダーク、大理石、または地形マップ(CDN から提供される)。

  • エッジパディング (px)**: `fitPaddingPx` を調整して、Framer フレーム内に地球を安全にフィットさせます。

  • 大気**: オン/オフの切り替え、色の選択、地球周囲のハローを制御するための高度 (0–1) の設定。


移動コントロール

  • モード: なし、回転、スクロール、またはルート — `movement.mode` プロップと一致。

  • 反転方向: 回転、スクロール、またはルート方向を反転させます。

  • 開始タイミング: スクロールアニメーションのトリガーをトップ/ミドル/ボトム/即時/スティッキーから選択します。

  • 開始オフセット (px): スクロール/ルートアニメーションの開始時期を微調整します。

  • 回転速度: 回転モードで利用可能 (0–120°/s)。

  • 開始/終了位置: ジオコーディングサービスを使用して人が読める位置を緯度/経度に解決します。**設定**ボタンは値を確定し、プレビューピンを更新します。

  • ルート警告: 両端点がない場合に、ルートモードがアクティブになるとバナーが表示されます。

  • マウスの相互作用: ホバーツーセンターやドラッグの相互作用を切り替え、`mouseInteractions` にマップします。

マーカーエディタ

`+ New Marker` をクリックすると、デフォルトの値(`Lollipop` ピン、スケール 6.5、高度 -0.02、UI に一致する色)でドラフトマーカーが作成されます。

各マーカーロウには以下が含まれます:

  • 都市: (プレビューまたは挿入前にジオコーディングされる必要があります)

  • ラベル(オプション)

  • ピンタイプ: ( 'Lollipop', 'Teardrop', 'Line', 'Pyramid')

  • スケール

  • 高度オフセット: 必要に応じてヘッド/ステムのためのカラーピッカー。

  • 更新: 単一のマーカーを確定します。

  • すべて更新: リストを正規化し、すべてのマーカーを再ジオコーディングして、プレビューを更新し、ドラフト状態とプラグイン状態の同期を保ちます。

  • 削除: ドラフトとプレビューから直ちにマーカーを削除します。

マーカーデータは、保存または挿入前に(テキストをトリムして、範囲をクランプし、空のエントリを削除して)消毒されます。

ライブプレビュー

  • スティッキープレビューキャンバスは、Framer に挿入されるのと同じ設定で地球をレンダリングします。

  • テクスチャと大気の変化を即座にストリームし、現在の Framer テーマ(ライト/ダーク)を尊重します。

  • マウスホイールはスクロール/ルートモードのためのカメラ位置を調整し、ドラッグの相互作用は有効にしたプロップを反映します。

  • ルートモードは、開始/終了場所が両方とも解決されると、その間にアニメーションを実行します。


外観コントロール

  • テクスチャスタイル: ライト、ダーク、大理石、または地形マップ(CDN から提供される)。

  • エッジパディング (px)**: `fitPaddingPx` を調整して、Framer フレーム内に地球を安全にフィットさせます。

  • 大気**: オン/オフの切り替え、色の選択、地球周囲のハローを制御するための高度 (0–1) の設定。


移動コントロール

  • モード: なし、回転、スクロール、またはルート — `movement.mode` プロップと一致。

  • 反転方向: 回転、スクロール、またはルート方向を反転させます。

  • 開始タイミング: スクロールアニメーションのトリガーをトップ/ミドル/ボトム/即時/スティッキーから選択します。

  • 開始オフセット (px): スクロール/ルートアニメーションの開始時期を微調整します。

  • 回転速度: 回転モードで利用可能 (0–120°/s)。

  • 開始/終了位置: ジオコーディングサービスを使用して人が読める位置を緯度/経度に解決します。**設定**ボタンは値を確定し、プレビューピンを更新します。

  • ルート警告: 両端点がない場合に、ルートモードがアクティブになるとバナーが表示されます。

  • マウスの相互作用: ホバーツーセンターやドラッグの相互作用を切り替え、`mouseInteractions` にマップします。

マーカーエディタ

`+ New Marker` をクリックすると、デフォルトの値(`Lollipop` ピン、スケール 6.5、高度 -0.02、UI に一致する色)でドラフトマーカーが作成されます。

各マーカーロウには以下が含まれます:

  • 都市: (プレビューまたは挿入前にジオコーディングされる必要があります)

  • ラベル(オプション)

  • ピンタイプ: ( 'Lollipop', 'Teardrop', 'Line', 'Pyramid')

  • スケール

  • 高度オフセット: 必要に応じてヘッド/ステムのためのカラーピッカー。

  • 更新: 単一のマーカーを確定します。

  • すべて更新: リストを正規化し、すべてのマーカーを再ジオコーディングして、プレビューを更新し、ドラフト状態とプラグイン状態の同期を保ちます。

  • 削除: ドラフトとプレビューから直ちにマーカーを削除します。

マーカーデータは、保存または挿入前に(テキストをトリムして、範囲をクランプし、空のエントリを削除して)消毒されます。

著作権 Mojave Studio 2025 – mojavestud.io
Framer デザインコミュニティのために ❤️ で構築