無料で始める

ライブプレビュー · 無料プロンプト / 3d scene

アニメーションメッシュライン

コンステレーションの奥行き、ポインターの発光、抽象的な商品エネルギーを持つラインフィールド。

Mesh-line feelDepth constellationPointer parallaxAtmospheric bloom
AIプロンプトを見る
Rukterの実レンダラーポインターやスクロールで操作できます

これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。

使いどころ

このパターンを使う場面

音声、フィンテック、データ、クリエイティブツール、科学系ブランドに。

サンプルの方向性

NORTHSTAR / SIGNAL · Ideas in motion

ランタイム

実際のWebGL 3D

導入方法

  1. 1下のプロンプトをコピーしてCodexやClaudeに貼り付け、ブランドとメディアを指定します。
  2. 2Rukterで使う場合は「Rukterで使用」を開き、プリセットIDがジェネレーターに渡されたことを確認します。
  3. 3生成した下書きをテーマデザイナーで確認・編集し、準備ができたら公開します。

AIで使う

このプレビューをCodexやClaude用のプロンプトに

プロンプトにはレイアウト、動作、ランタイム、アクセシビリティ、編集可能な構成を含めています。ブランドとメディアはご自身のものに置き換えてください。

Rukterで使用 

Build an original responsive website experience for [your brand or product], using the Rukter "Animated mesh lines" pattern as direction.

Visual example: NORTHSTAR / SIGNAL — "Ideas in motion"; compose an immersive visual stage with legible copy layered above the atmosphere. Replace the example content with my own brand copy and supplied media.

Behavior: Line-field atmosphere with constellation depth, pointer glow and abstract product energy. Best for: Audio, fintech, data, creative tooling and science-led brands need a precise abstract world.

Implementation: Use a real WebGL renderer for the 3D layer (three-depth-constellation), 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, depth, headline, magnetic. Motion settings: parallaxDepth: deep; hoverEffect: glow; entranceRhythm: staggered; loopMotion: float.

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-animated-mesh-lines.

RukterプリセットID

three-scene-animated-mesh-lines

編集可能な構成

このプリセットが指定するもの

セクション
hero3d · depth · headline · magnetic
ヒーローレンダラー
three-depth-constellation
シネマティック効果
—
動き
parallaxDepth: deep · hoverEffect: glow · entranceRhythm: staggered · loopMotion: float