ライブプレビュー · 無料プロンプト / template preset
Obys / Cubertoタイポグラフィシステム
特大タイポグラフィ、ダークなエディトリアルリズム、固定トランジション、磁気的な締めのアクション。
キネティック文字固定スクロール磁気CTAPortfolio depth
Rukterの実レンダラーポインターやスクロールで操作できます
これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。
使いどころ
このパターンを使う場面
代理店、ポートフォリオ、スタジオ、カルチャーブランド、個性を見せたい創業者ページに。
サンプルの方向性
FORM / STUDIO · We make feeling visible
ランタイム
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 "Obys / Cuberto type system" pattern as direction. Visual example: FORM / STUDIO — "We make feeling visible"; 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: Oversized typography, dark editorial rhythm, pinned transitions and magnetic closing action. Best for: Agencies, portfolios, studios, culture brands and founder pages that should feel authored. 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: hero3d, headline, cinematic, velocity, depth, magnetic. Motion settings: textReveal: chars; parallaxDepth: medium; hoverEffect: lift; entranceRhythm: tight; 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: preset-obys-cuberto-type-system.
RukterプリセットID
preset-obys-cuberto-type-system編集可能な構成
このプリセットが指定するもの
- セクション
- hero3d · headline · cinematic · velocity · depth · magnetic
- ヒーローレンダラー
- volumetric-hero
- シネマティック効果
- text-split-reveal
- 動き
- textReveal: chars · parallaxDepth: medium · hoverEffect: lift · entranceRhythm: tight · loopMotion: none