無料で始める

ライブプレビュー · 無料プロンプト / scroll

Ramotion / Framerパララックスストーリー

前景・中景・背景のレイヤー、固定チャプター、スケール表示、穏やかなモーション低減フォールバック。

レイヤー式パララックス固定チャプタースクロール連動スケールモーション低減
AIプロンプトを見る
FAR / NEARDiscover
AN ORIGINAL RUKTER SAMPLE 01

Layers of discovery

Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback.

RUKTER / PREVIEW01 — 03
操作できるサンプルスライダーで進行を変えられます

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

使いどころ

このパターンを使う場面

Rukterで編集可能な、現代的なパララックスページを作りたいときに。

サンプルの方向性

FAR / NEAR · Layers of discovery

ランタイム

DOM / CSS / 2D

導入方法

  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 "Ramotion / Framer parallax story" pattern as direction.

Visual example: FAR / NEAR — "Layers of discovery"; compose an editorial hero with strong type, one focal image, and a clear call to action. Replace the example content with my own brand copy and supplied media.

Behavior: Layered foreground, midground and background motion with sticky chapters, scale reveals and calm reduced-motion fallback. Best for: Every generated page should feel like a modern parallax landing page while staying editable in Rukter.

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, headline. Motion settings: textReveal: words; parallaxDepth: deep; hoverEffect: lift; entranceRhythm: slow; loopMotion: none.

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-ramotion-framer-parallax.

RukterプリセットID

scroll-ramotion-framer-parallax

編集可能な構成

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

セクション
cinematic · scrollStage · depth · headline
ヒーローレンダラー
DOM / CSS sample
シネマティック効果
depth-dolly-pin
動き
textReveal: words · parallaxDepth: deep · hoverEffect: lift · entranceRhythm: slow · loopMotion: none