wuizard · pro
Hover for tilt
spring 260/24 · 8° max
Card tilt + cursor glow
A card that tilts toward the cursor and glows where you point.
Tailwind card animations
Cards carry most of a product’s content, so how they lift, tilt and open sets the tone. Every card here reads your sheet’s colours and radii, so it looks like your product, not a demo.
17 live assets · React + Tailwind + Motion · restyle to your design tokens
Animations
Spotlight border card
Card whose hairline border lights up around the pointer, with a faint wash of the same light across its surface.
Flip card
Two-sided card that flips in 3D on click, Enter or Space and settles with a springy wobble.
Expanding card
Compact card that grows in place to reveal its details with a layout spring; Escape collapses it.
Swipe card stack
Deck of cards you drag left or right: the top card tilts with the drag and, past the threshold, flings away while the next card scales up into place, with Skip and Keep buttons and arrow keys for keyboard users.
Hover reveal card
Media card whose details panel slides up over the artwork on hover or keyboard focus while the image eases into a subtle zoom.
Glass card
Frosted glass card over soft, blurred accent blobs whose layers drift apart in a gentle parallax as the pointer moves.
Border beam card
Card with a short, bright beam of light that travels around its hairline border on a steady loop, trailing a soft inner glow.
Product card
Shop product card whose image cross-fades to an alternate view on hover or focus, with an add-to-cart button that squishes on press, rolls its label to a drawn check and pops a +1 as it confirms.
Profile card
Person card with avatar, name, role and stat counts whose Follow button springs into a Following state, rings the avatar and rolls the follower count up by one.
Card carousel
Horizontal scroll-snap row of cards that swipes natively, pages with a spring from prev/next buttons or the arrow keys, and shows where you are with a sliding progress thumb.
Wallet stack
Stack of passes showing each one's top strip, where opening a pass springs it to the front at full height while the others tuck into a peeking pile below, and Escape or a second press restacks them.
Receipt card
Order-summary receipt that feeds out from under a printer slot in line-by-line jolts, counts its total up and thumps a rotated Paid stamp on, with a torn zigzag edge and a hard outline and shadow that follow it.
Now playing card
Compact media player card whose artwork eases larger while playing, with equaliser bars, a play button that morphs into pause, tracks that slide in from the side you skipped towards, and a keyboard-operable seek slider.
Collection card
Folder-style card whose pile of preview tiles fans out on hover or focus (the back tiles swing out to either side as the cover lifts) above a title, item count and an arrow that nudges forward.
Offset lift card
Link card of bordered strips (index cell, tag, artwork on a visible grid and title block) that jumps up and left off its hard shadow in two frames on hover or keyboard focus, floods its tag with the accent, kicks its corner arrow straight, shifts the grid half a cell, and drops flat when pressed.
Tag product card
Thick-bordered product card with artwork on a visible grid, a tilted price tag that swings in hard frames when the item is added, option cells that invert in a cut as a WAI-ARIA radio group with struck-through sold-out options, and an add button that presses onto its shadow and stamps “Added”.
With your agent
From this page to your app in three steps
- 1Add the ones you like to your sheet. It holds your colours, type and motion.
- 2Connect Claude, Cursor or any MCP client in a click.
- 3Ask for the screen. Your agent pulls these exact components with your values filled in.
Are these plain Tailwind classes?
They’re React components styled with Tailwind utilities and CSS variables from your sheet. Motion handles the springs; there’s nothing else to install.
Can my agent change the tilt or spring?
Yes. Every asset exposes its tunable values, and in a sheet the springs follow your motion token, so all your cards move the same way.
More of the library
Guides and articles
ComparisonScreenshot inspiration vs live components for UI designGalleries of app screenshots or a library of running components: what each tells you about a design, and which one your coding agent can build from.5 min readGuideConnect your coding agent to Wuizard over MCPConnect Claude, Claude Code, Cursor, Windsurf or any MCP client to Wuizard, so your agent builds with your exact colours, fonts and components.6 min readGuideDesign a sheet from the library and fine-tune itBuild a Wuizard sheet by hand: start from a vibe or the library, set colours, type and motion, fill slots, add rules and check it in the live preview.5 min read
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.