本番品質の3Dキービジュアルを、5分で。
プロンプトを入力し、言葉で調整したら、コードを1行貼り付けるだけ。LPに、サイズと60fpsに最適化された動く3D背景を追加できます。
最適化されたサイズ · 60fps
仕組み使い方
プロンプトから公開まで、3ステップ
1
1. プロンプトを入力
"ダーク系 SaaS 向けのバイオレットパーティクル" — 必要な入力はこれだけです。
2
2. 言葉で調整
"もっとゆっくり、インディゴ寄りに" — 修正内容もプロンプトで伝えます。
3
3. コードを1行貼り付け
<script async src="…/hero3d.js"
data-scene="scn_XXXXXXXX"></script>導入前 / 導入後
同じLPが、5分後にはここまで変わる
導入前
導入後
主な機能
自力なら2週間かかる本番対応を、あらかじめ組み込みました
最適化されたバンドル
軽量に設計し、ビルドごとにサイズを計測します。
スマホでも60fps
デバイスに合わせて品質を自動調整します。
ダーク/ライト対応
ページのテーマに追従し、滑らかに切り替わります。
視差効果を減らす設定に対応
静止フレームで代替 — キービジュアルが空白になることはありません。
WebGL フォールバック
WebGLが使えない場合はCSSグラデーションに切り替わり、ページ表示を維持します。
所有できるコード
エディター不要、ロックインなし。
連携
一行。どのスタックでも。
コードを1行貼るだけで、ページ内に直接レンダリングされます。iframeもビルド工程も不要です。Reactでは、同じローダーをコンポーネントとして使えます。どちらの場合も、生成コードではなく、スキーマ検証済みの設定としてシーンを配信します。
<script async src="https://hero3d.app/embed/v1/hero3d.js" data-scene="scn_XXXXXXXX"></script>
テンプレート
10種類のテンプレート、共通のパフォーマンス基準
続々追加予定
テンプレートは継続的に追加されます — 新しいテンプレートも同じ予算・テーマ・フォールバックの関門を通ってからここに並びます。
10種類すべてが同じパフォーマンス基準とテーマ、フォールバックに対応しています。カードをクリックすると、そのプロンプトから始められます。
料金