Scatter Deck
Scattered card deck feature grid with random positioning.
Main Features of Scatter Deck
How to Use Scatter Deck in Next.js
Installation Guide for Scatter Deck
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
cards | Array<{title: string, color: string, rotate: number, z: number}> | [{title: 'Motion', color: 'bg-[#ff4d4d]', rotate: -5, z: 10}, ...] | Array of card objects with title, color (Tailwind class), rotation angle, and z-index. |
backgroundColor | string | #e5e5e5 | Background color (hex, rgb, or hsl). |
gridSize | number | 400 | Grid size in pixels for positioning. |
dragText | string | Drag Me | Text displayed on draggable cards. |
backgroundText | string | SCATTER | Background text pattern. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an interactive 'Scatter Deck' aesthetic. Use this feature layout for an Engaging experience where cards can be 'Thrown' and 'Dragged' across a physical canvas.
Best Practices
Maintain scalable component architecture by keeping the card count balanced. Follow React best practices by using Framer Motion for the drag-physics. Optimize for performance by managed the background text pattern repeats.
Why This Component Matters in Modern UI Development
Draggable card decks create a sense of direct engagement and playfulness. This production-ready UI template helpsคุณ build an interface that feels tactile and unique, turning static features into items for digital manipulation.
Frequently Asked Questions
QIs it really draggable?
Yes, each card features full Framer Motion drag functionality with physics-based momentum (constraints: true) for a realistic physical feel.
QCan I adjust the rotation?
Absolutely, each card's specific rotation and z-index can be configured in the data array to create the perfect 'Scattered' layout look.
QDoes it work on mobile?
Yes, it supports standard touch-drag events, allowing mobile users to 'flick' cards across the screen with their fingers.