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

ページトランジションオーバーレイ

スクロールの継ぎ目、マスク、編集可能なセクション境界で表現するカーテン風トランジション。

Shape overlay feelContinuum seamマスク表示No arbitrary JS

AIプロンプトを見る

STUDIO / FRAMEDiscover

AN ORIGINAL RUKTER SAMPLE 01

A new scene awaits

Curtain-like transition language represented as scroll seams, masks and editable section boundaries.

RUKTER / PREVIEW01 — 03

操作できるサンプルホバー、フォーカス、再生で動きを確認できます

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

使いどころ

このパターンを使う場面

安全なセクションシステム内で、ドラマチックな到着・退出を作りたいときに。

サンプルの方向性

STUDIO / FRAME · A new scene awaits

ランタイム

DOM / CSS / 2D

導入方法

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

AIで使う

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

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

Rukterで使用

Build an original responsive website experience for [your brand or product], using the Rukter "Page transition overlay" pattern as direction.

Visual example: STUDIO / FRAME — "A new scene awaits"; 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: Curtain-like transition language represented as scroll seams, masks and editable section boundaries. Best for: The page needs dramatic arrival/exit moments but must stay inside the safe section system.

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, headline, magnetic. Motion settings: textReveal: words; parallaxDepth: medium; hoverEffect: glow; entranceRhythm: tight.

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: interaction-page-transition-overlay.

RukterプリセットID

interaction-page-transition-overlay

編集可能な構成

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

セクション: cinematic · headline · magnetic
ヒーローレンダラー: DOM / CSS sample
シネマティック効果: continuum-seam
動き: textReveal: words · parallaxDepth: medium · hoverEffect: glow · entranceRhythm: tight