unicorn-studio

Unicorn Studio — ノーコード WebGL シーン（埋め込み／SDK）スキル

使用する場面

• デザイナーが、シェーダーや three.js を手作業でコーディングせずに、独自の WebGL ビジュアルを作成したい場合
• テキスト、画像、動画に重ねる「デザインされた」エフェクトが必要で、インタラクティブ機能も組み込みたい場合
• サイトビルダーを使用する場合：Framer、Webflow、Wix、Figma Sites など

概要

• レイヤー、エフェクト、イベントを備えたシーンエディターで、次の形式でエクスポートできます：
  • Unicorn Studio SDK（小型の JS ライブラリ）を使った埋め込み
  • または、より高速なセルフホスト可能な読み込みのための JSON／コードエクスポート（プランによって異なります）

主な埋め込みパターン

• SDK を読み込みます（ファーストビューに含まれるかどうかに応じて、<head> またはフッターに配置できます）：
  • jsDelivr から UMD を読み込みます（バージョン指定あり）
  • DOM の準備ができたら UnicornStudio.init() を一度呼び出します
• コンテナー要素に属性を追加します：
  • data-us-project="PROJECT_ID"
  • 任意のパフォーマンス／動作パラメーター：
    • data-us-scale（レンダリングスケール）
    • data-us-dpi（解像度の倍率）
    • data-us-fps（FPS の上限）
    • data-us-lazyload="true"
    • data-us-production="true"
  • 任意の JSON ソース：
    • data-us-project-src="https://.../scene.json.txt"

イベント（作成側）

• Appear（表示）、Scroll（進捗／速度）、Hover、Mousemove
• JavaScript を書かずに「インタラクティブな雰囲気」を出すには、イベントを使用します。

よくある問題

• コンテナーにサイズが定義されていない → シーンが表示されません
  • data-us-project を持つ要素に幅と高さが設定されていることを確認してください。
• 1 ページにシーンが多すぎる → WebGL コンテキストの上限とメモリの問題が発生します
  • 1 ページあたり 10 シーン未満を推奨します。WebGL コンテキストの最大数は約 16 です。
• ローエンドデバイスでのパフォーマンス
  • data-us-scale／data-us-dpi／data-us-fps を使用し、動的なレイヤーやエフェクトを減らしてください。
• サイトビルダーのプレビューの制限
  • 多くのビルダーでは編集モード中にレンダリングされません。表示するにはプレビューまたは公開が必要です。

簡単なレシピ

1) 基本的な埋め込みコンテナー

<div style="width: 100%; height: 420px" data-us-project="YOUR_PROJECT_ID"></div>

2) パフォーマンス優先の埋め込み

<div
  style="width: 100%; height: 420px"
  data-us-project="YOUR_PROJECT_ID"
  data-us-lazyload="true"
  data-us-production="true"
  data-us-scale="0.75"
  data-us-dpi="1.25"
  data-us-fps="45"
></div>

ユーザーに確認すること

• 対象プラットフォーム：Webflow／Framer／コーディングしたサイトのどれですか？
• シーンはファーストビューに含まれますか？（スクリプトの配置や遅延読み込みに影響します）
• モバイル対応の要件と、許容できる画質／FPS
• ページ上のシーン数と、JSON エクスポートを利用できるかどうか