shadcn/ui＋GSAP管理画面プロンプト作例｜スクロールアニメ
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
shadcn/ui風のダーク管理画面を1枚のHTMLで作成。Tailwind CSS (CDN)、Swiper（カルーセル統計カード）、GSAP（スクロールトリガー・スタッガー）、AOS（セクション表示）を使用。サイドバー（ガラスダーク）、ヘッダー（検索＋アバター）、4つの統計カード（収益・ユーザー・注文・成長）はアイコン付き棒グラフ（CSSのみ）、注文テーブル、フッターを含む。すべてのホバー・クリックにスムーズなトランジション。コンパクトでプロダクション品質。
shadcn/ui風のダッシュボードをTailwind CSSで構築。Swiperで統計カードをカルーセル表示、GSAPとAOSでスクロールに応じたフェード・スケールアニメーションを実装。ガラス調サイドバー、検索ヘッダー、4つの統計カード、CSSバーチャート、注文テーブルを収録。すべての操作にスムーズなトランジションを適用し、プロダクション品質に仕上げています。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選