shadcn/ui Dark Dashboard Prompt: GSAP Scroll Animations
CODE PREVIEW
エディタを読み込み中…
P
Prompt
Create a single HTML page with a modern dark dashboard UI inspired by shadcn/ui. Use Tailwind CSS (CDN), Swiper for a carousel of stat cards, GSAP for scroll-triggered animations (stagger, fade, scale), and AOS for section reveals. Include: sidebar navigation (dark glass), top header with search and avatar, grid of 4 stat cards (revenue, users, orders, growth) with icons, a bar chart (CSS-only), a recent orders table, and a footer. All interactive elements (hover, click) must have smooth transitions. Keep it compact, production-ready, and visually stunning.
shadcn/ui風のダッシュボードをTailwind CSSで構築。Swiperで統計カードをカルーセル表示、GSAPとAOSでスクロールに応じたフェード・スケールアニメーションを実装。ガラス調サイドバー、検索ヘッダー、4つの統計カード、CSSバーチャート、注文テーブルを収録。すべての操作にスムーズなトランジションを適用し、プロダクション品質に仕上げています。
Prompt Overview
Build a shadcn/ui-style dashboard with Tailwind CSS. Display statistical cards in a carousel using Swiper, and implement scroll-triggered fade and scale animations with GSAP and AOS. Includes a glassmorphism sidebar, search header, four statistical cards, CSS bar charts, and an order table. Smooth transitions are applied to all interactions, achieving production quality.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選