ライブプレビュー · 無料プロンプト / 3d scene
WebGI商品ドリル
軌道照明、スペックチャプター、物理マテリアルを強調したツール風の商品ヒーロー。
3D商品オービット照明スペックスクロールMaterial focus
Rukterの実レンダラーポインターやスクロールで操作できます
これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。
使いどころ
このパターンを使う場面
工具、ハードウェア、楽器、家電、耐久商品の技術的なプレミアムストーリーに。
サンプルの方向性
OBJECT / LAB · Engineered to be seen
ランタイム
実際のWebGL 3D
導入方法
- 1下のプロンプトをコピーしてCodexやClaudeに貼り付け、ブランドとメディアを指定します。
- 2Rukterで使う場合は「Rukterで使用」を開き、プリセットIDがジェネレーターに渡されたことを確認します。
- 3生成した下書きをテーマデザイナーで確認・編集し、準備ができたら公開します。
AIで使う
このプレビューをCodexやClaude用のプロンプトに
プロンプトにはレイアウト、動作、ランタイム、アクセシビリティ、編集可能な構成を含めています。ブランドとメディアはご自身のものに置き換えてください。
Build an original responsive website experience for [your brand or product], using the Rukter "WebGI product drill" pattern as direction. Visual example: OBJECT / LAB — "Engineered to be seen"; compose a product-led hero with a strong object silhouette and a short feature story. Replace the example content with my own brand copy and supplied media. Behavior: A tool-like product hero with orbit lighting, spec chapters and physical material emphasis. Best for: Tools, hardware, instruments, appliances and durable goods need a technical premium story. Implementation: Use a real WebGL renderer for the 3D layer (three-product-showcase), with a useful static fallback when WebGL or motion is unavailable. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: hero3d, cinematic, tilt, depth, magnetic. Motion settings: textReveal: block; parallaxDepth: medium; hoverEffect: scale; entranceRhythm: slow; loopMotion: breathe. Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion. When using Rukter Generate my site, preserve this exact selection: Library item ids: three-scene-webgi-drill.
RukterプリセットID
three-scene-webgi-drill編集可能な構成
このプリセットが指定するもの
- セクション
- hero3d · cinematic · tilt · depth · magnetic
- ヒーローレンダラー
- three-product-showcase
- シネマティック効果
- mask-reveal
- 動き
- textReveal: block · parallaxDepth: medium · hoverEffect: scale · entranceRhythm: slow · loopMotion: breathe