ライブプレビュー · 無料プロンプト / scroll
スクロール屈折デプス
画像中心の屈折ヒーローとデプススクロールを組み合わせ、メディアに立体感を付与。
リキッドレンズデプスドリーポインター屈折Image-first
Rukterの実レンダラーポインターやスクロールで操作できます
これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。
使いどころ
このパターンを使う場面
ファッション、美容、アイウェア、ガラス、ジュエリー、商品画像を触覚的に見せたいときに。
サンプルの方向性
GLASS / STUDY · Look closer
ランタイム
実際の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 "Scroll refraction depth" pattern as direction. Visual example: GLASS / STUDY — "Look closer"; 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: Image-forward refraction hero paired with depth scroll so media feels dimensional and inspectable. Best for: Fashion, beauty, eyewear, glass, jewelry and product imagery should feel tactile on hover and scroll. Implementation: Use a real WebGL renderer for the 3D layer (three-liquid-lens), 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, depth, tilt. Motion settings: parallaxDepth: deep; hoverEffect: tilt; 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-refraction-depth.
RukterプリセットID
scroll-refraction-depth編集可能な構成
このプリセットが指定するもの
- セクション
- hero3d · cinematic · depth · tilt
- ヒーローレンダラー
- three-liquid-lens
- シネマティック効果
- depth-dolly-pin
- 動き
- parallaxDepth: deep · hoverEffect: tilt · entranceRhythm: slow