ライブプレビュー · 無料プロンプト / scroll
デプスドリーピン
固定されたドリー移動、パララックス背景、ドラマチックなセクション到達。
固定スクロールパララックスデプスGSAP風タイムライン
AFTERLIGHT / 02Discover
AN ORIGINAL RUKTER SAMPLE 01
Go a little deeper
Pinned dolly movement, parallax background and dramatic section landing.
操作できるサンプルスライダーで進行を変えられます
これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。
使いどころ
このパターンを使う場面
Awwwards風のチャプター表示とプレミアムな商品体験に。
サンプルの方向性
AFTERLIGHT / 02 · Go a little deeper
ランタイム
DOM / CSS / 2D
導入方法
- 1下のプロンプトをコピーしてCodexやClaudeに貼り付け、ブランドとメディアを指定します。
- 2Rukterで使う場合は「Rukterで使用」を開き、プリセットIDがジェネレーターに渡されたことを確認します。
- 3生成した下書きをテーマデザイナーで確認・編集し、準備ができたら公開します。
AIで使う
このプレビューをCodexやClaude用のプロンプトに
プロンプトにはレイアウト、動作、ランタイム、アクセシビリティ、編集可能な構成を含めています。ブランドとメディアはご自身のものに置き換えてください。
Build an original responsive website experience for [your brand or product], using the Rukter "Depth dolly pin" pattern as direction. Visual example: AFTERLIGHT / 02 — "Go a little deeper"; 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: Pinned dolly movement, parallax background and dramatic section landing. Best for: Awwwards-style chapter reveals and premium product journeys. Implementation: Use lightweight CSS, DOM, or Canvas 2D for the visual behavior; do not add WebGL unless the design needs it. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: cinematic, scrollStage, depth. Motion settings: parallaxDepth: deep; entranceRhythm: slow. 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: scroll-depth-dolly-pin.
RukterプリセットID
scroll-depth-dolly-pin編集可能な構成
このプリセットが指定するもの
- セクション
- cinematic · scrollStage · depth
- ヒーローレンダラー
- DOM / CSS sample
- シネマティック効果
- depth-dolly-pin
- 動き
- parallaxDepth: deep · entranceRhythm: slow