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

単語ごとのスクロール表示

フェードアップ、単語・文字のスタッガー、編集的な読み順のタイミング。

単語スタッガーフェードアップスクロール表示編集可能なレイヤータイミング

AIプロンプトを見る

TYPE / STUDYDiscover

AN ORIGINAL RUKTER SAMPLE 01

Every word has weight

Fade-up text, word or character stagger, and editorial reading-order timing.

RUKTER / PREVIEW01 — 03

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

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

使いどころ

このパターンを使う場面

ストーリーテリング、ポートフォリオ導入、キャンペーン、商品ナラティブに。

サンプルの方向性

TYPE / STUDY · Every word has weight

ランタイム

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 "Word-by-word scroll reveal" pattern as direction.

Visual example: TYPE / STUDY — "Every word has weight"; 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: Fade-up text, word or character stagger, and editorial reading-order timing. Best for: Storytelling pages, portfolio intros, campaign copy and product narratives.

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: headline, cinematic. Motion settings: textReveal: words; entranceRhythm: staggered; parallaxDepth: medium.

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: motion-word-scroll-reveal.

RukterプリセットID

motion-word-scroll-reveal

編集可能な構成

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

セクション: headline · cinematic
ヒーローレンダラー: DOM / CSS sample
シネマティック効果: —
動き: textReveal: words · entranceRhythm: staggered · parallaxDepth: medium