できること

  • ディスクから、または iframe の中で動く、完全なヒーローの HTML 1 ファイル
  • ES モジュールとしてのエンジン、加えて React と Next.js のコンポーネント
  • 5 つのカラーテーマと、密度、引き込み、リングの調整表
  • タッチ、動きを減らす設定、非表示のタブ、画面外での扱いを内蔵
  • 任意:実行前に見積もる PopNow の映像プレートまたは製品画像

向いている用途

  • 開発者ツール、AI 製品、ローンチのページ
  • 人に遊んでもらうポートフォリオやイベントの冒頭
  • ループする背景動画を、より軽いものに替えること

向いていない用途

  • 淡い背景を必要とする明るい、パステルのブランド
  • 健康や金融のフォームのような、非常に落ち着いたページ
  • スクロールに連動する長いストーリー

使い方

Claude・ChatGPT で

PopNow のスキル「インタラクティブなグリッドのヒーロー」(interactive-grid-hero)を使って、次のことをしてください:私の CLI ツールのサイトの最初の画面を。「ワンコマンドでデプロイのプレビュー」、琥珀色のグリッド、「Install」と「Read the docs」のボタン。

コーディングエージェントで

/popnow-interactive-grid-hero 私の CLI ツールのサイトの最初の画面を。「ワンコマンドでデプロイのプレビュー」、琥珀色のグリッド、「Install」と「Read the docs」のボタン。

次はこれ

グリッドをもっと落ち着いた、少し疎なものにして。

グリッドの下に、とても暗いスモークの映像を入れて、先にクレジットを教えて。

用意しておくもの

  • 短い見出し、一文か二文、ボタンのリンク
  • テーマ、またはブランドのアクセント色
  • 任意:機能のヒント、証明の行に出してよい名前

似ているスキル

すべて見る →

よくある質問

ライブラリや WebGL が必要ですか?

いいえ。この効果は、2D のキャンバスで動く、約 300 行のプレーンな JavaScript で、依存関係はありません。このテンプレートはオフラインでも、サンドボックスの iframe の中でも動きます。

スマホではどうなりますか?

タップでリングが出て、横へのドラッグでグリッドが引っ張られます。縦のスワイプではページがスクロールします。誰も触れていないときは、ゆっくりした揺れでグリッドが動き続けます。

自分のブランドの色は使えますか?

使えます。暗い背景のひとつで、アクセントとリングの色にできます。効果は薄い線が明るくなることに頼るので、背景はとても暗いままです。白黒のブランドには、モノクロのテーマを使います。

アクセシブルですか?

文章、リンク、ボタンは、キャンバスの上の普通の HTML で、フォーカスのスタイルも保たれます。動きを減らす設定にすると、グリッドは静止画になり、ループは非表示のタブや画面の外では止まります。