プロシージャルシェーダーギャラリー

プロシージャルシェーダーのヒーローと、ホバーで表示される大きなインデックスから詳細ページを開けるシネマティックな製品ギャラリーです。プロンプトをコピーして、自分だけのサイトを構築しましょう。

Loading preview...
このプロンプトから始める

シェーダーが演出するシネマティックな製品ギャラリーを生成

コーヒーブランドへの変更

ギャラリーをスペシャルティコーヒーのラインをテーマに変更する。

Kimi Buildを試す
架空のEVブランド、Nexus Automotiveのシネマティックなショールームサイトを構築してください。ヒーローには、リアルタイムに光が流れるフルスクリーンのプロシージャルフラグメントシェーダーを配置し、その前面に大きなセリフ体の2行の見出しと短いタグラインを重ねます。スクロールすると、ブランドマニフェストのセクションへ続く構成にしてください。中心となるのはモデルインデックスです。フラッグシップセダン、ツーリングSUV、パフォーマンススーパーカー、コンパクトシティカーの4車種を、大きな文字の行として一覧表示します。行にホバーすると、リストの横にその車の画像を表示し、ほかの項目を淡くします。クリックすると、車種の位置づけを紹介する導入文と、「造形」「キャビン」「パフォーマンス」の3つのテキスト章を備えた専用詳細ページを開き、一覧へ戻れるようにしてください。ブランド体験の動画セクションと、エクスペリエンスセンターの住所・営業時間を記載したお問い合わせ用フッターも追加します。配色はほぼモノクロームに抑え、セリフ体のディスプレイフォントと等幅のラベルフォントを組み合わせてください。スムーズスクロールに加え、控えめなパララックスとフェード遷移を使用します。ブラウザで直接動作する静的サイトとして仕上げ、スクロール、ホバー表示、ページ遷移がすべて実際に機能するようにしてください。 掲載コンテンツをスペシャルティコーヒーブランド向けに変更してください。5つの製品ラインを5種類のシングルオリジン豆に置き換え、シェーダーヒーローは温かみのある茶色の湯気とコーヒー豆の粒子へ変更します。各詳細ページには、産地、精製方法、フレーバーノート、抽出のヒントを追加してください。 
お問い合わせフォームを追加

詳細ページの下部にお問い合わせフォームを追加する。

Kimi Buildを試す
架空のEVブランド、Nexus Automotiveのシネマティックなショールームサイトを構築してください。ヒーローには、リアルタイムに光が流れるフルスクリーンのプロシージャルフラグメントシェーダーを配置し、その前面に大きなセリフ体の2行の見出しと短いタグラインを重ねます。スクロールすると、ブランドマニフェストのセクションへ続く構成にしてください。中心となるのはモデルインデックスです。フラッグシップセダン、ツーリングSUV、パフォーマンススーパーカー、コンパクトシティカーの4車種を、大きな文字の行として一覧表示します。行にホバーすると、リストの横にその車の画像を表示し、ほかの項目を淡くします。クリックすると、車種の位置づけを紹介する導入文と、「造形」「キャビン」「パフォーマンス」の3つのテキスト章を備えた専用詳細ページを開き、一覧へ戻れるようにしてください。ブランド体験の動画セクションと、エクスペリエンスセンターの住所・営業時間を記載したお問い合わせ用フッターも追加します。配色はほぼモノクロームに抑え、セリフ体のディスプレイフォントと等幅のラベルフォントを組み合わせてください。スムーズスクロールに加え、控えめなパララックスとフェード遷移を使用します。ブラウザで直接動作する静的サイトとして仕上げ、スクロール、ホバー表示、ページ遷移がすべて実際に機能するようにしてください。 すべての詳細ページの下部に、名前、メールアドレス、メッセージの入力欄を備えたお問い合わせフォームを追加し、送信後には成功状態を表示してください。ナビゲーションバーには常時表示される「お問い合わせ」ボタンを追加し、フォームまでスムーズにスクロールするようにしてください。 
英語版

海外の訪問者向けに、すべてのコピーを英語に切り替える。

Kimi Buildを試す
架空のEVブランド、Nexus Automotiveのシネマティックなショールームサイトを構築してください。ヒーローには、リアルタイムに光が流れるフルスクリーンのプロシージャルフラグメントシェーダーを配置し、その前面に大きなセリフ体の2行の見出しと短いタグラインを重ねます。スクロールすると、ブランドマニフェストのセクションへ続く構成にしてください。中心となるのはモデルインデックスです。フラッグシップセダン、ツーリングSUV、パフォーマンススーパーカー、コンパクトシティカーの4車種を、大きな文字の行として一覧表示します。行にホバーすると、リストの横にその車の画像を表示し、ほかの項目を淡くします。クリックすると、車種の位置づけを紹介する導入文と、「造形」「キャビン」「パフォーマンス」の3つのテキスト章を備えた専用詳細ページを開き、一覧へ戻れるようにしてください。ブランド体験の動画セクションと、エクスペリエンスセンターの住所・営業時間を記載したお問い合わせ用フッターも追加します。配色はほぼモノクロームに抑え、セリフ体のディスプレイフォントと等幅のラベルフォントを組み合わせてください。スムーズスクロールに加え、控えめなパララックスとフェード遷移を使用します。ブラウザで直接動作する静的サイトとして仕上げ、スクロール、ホバー表示、ページ遷移がすべて実際に機能するようにしてください。 大きなインデックス、詳細ページの本文、ナビゲーションを含むサイト内のすべてのコピーを英語に切り替えてください。シェーダーのビジュアルとホバー操作は変更せず、英語に合わせてフォントサイズと行間を調整してください。