Fanned Card Deck
Five collection cards laid out as a spread hand, each carrying its own generative canvas texture: waveform bars, an opacity mosaic, stacked ribbons, a flowing block grid, and a scrolling blueprint frame. Hovering lifts a card off the fan; clicking one grows it to full size, fades in its body copy, and sweeps the rest into a small overlapping cluster below. Textures are seeded, so a card always draws the same pattern, and they animate continuously on a canvas at a fixed resolution scaled into whichever slot the card holds. Motion for React.
Interface Craft
A working library for those committed to designing with uncommon care.
Working Knowledge
Frameworks, principles, and models you can apply to your interface work right away, from spacing systems to the way state is designed.
Practical Demonstration
Detailed walkthroughs of building interfaces, spotting the real opportunities, and refining a screen until every part holds together.
Collaborating with AI
Repeatable, specific methods for working with AI to get exacting results, covering Claude Code and how to structure prompts for real components.
Means & Methods
Small techniques for daily work: alignment, rhythm, and the assembly details that separate a good interface from a great one.
Interface Toolkit
Screencasts and deep dives on the full path from a blank canvas to a shipped, production-ready set of interface primitives.
npx shadcn@latest add https://ui.aryank.space/r/fanned-card-deck.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | DeckCard[] | Five BLANK collection cards | Each card's title (newlines split the lines), description, background, foreground, bodyColor, graphicType, and seed. |
| className | string | undefined | Extra classes on the deck stage wrapper. |
cardstextTitle, description, background, foreground, body color, texture, and seed per card.
motion