Scatter Deck
Draggable card deck with Uilora-branded cards (Uilora, Motion, TypeScript, Design, 700+), spring physics, and a crosshair-grid background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Drag. Explore. Build. | Heading displayed at the top of the scatter deck. |
| description | string | Uilora gives you every piece — drag them into your stack. | Subtitle below the heading. |
| accentColor | string | #6366f1 | Hex accent used for the eyebrow label and hover hint color. |
When to Use
Best for hero sections that want to create delight and surprise — hackathon pages, creative portfolio landing screens, or component library showcases where interactivity itself is the message. High engagement, high memorability.
Best Practices
The drag area is constrained to the container ref so cards never escape the viewport. Spring physics (bounce: 0.4) feel natural — avoid setting higher bounce values as cards become chaotic. The Asterisk icons use animate-spin-slow which requires a custom Tailwind animation.
Why This Component Matters
Draggable interfaces create a sense of physical ownership — users feel they're interacting with something real. This emotional engagement makes the Uilora brand memorable in a crowded market.
FAQ
QHow do I change the card labels?
Edit the cards array in the component. Each card has label (display text), color (Tailwind bg class), textColor (Tailwind text class), rotate, and z values.
QCan I add more cards?
Yes — add objects to the cards array. They'll spring in with a delay of i * 0.1s automatically.
QWhy does animate-spin-slow not work?
You need to add a custom animation to your Tailwind config: `'spin-slow': 'spin 6s linear infinite'` under `theme.extend.animation`.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.