Card Hand

A navigation menu with personality. Card Hand deals a fan of playing cards as it scrolls into view. They float gently, sit in greyscale and take their colour as you pick one up. Each card's label writes itself on in hand-drawn ink, with a doodled arrow pointing at its card. On the first view the labels write themselves once in turn, so visitors learn the cards are links.

The cards are drawn in vector (any rank and suit), or you can drop in your own card art.

What's inside

• Deals in on scroll, idle float, hover lift with colour reveal

• Hand-written labels with self-drawing arrows; one-time hint sequence

• Vector card faces for any rank and suit, or your own images

• Up to 7 cards; fan angle, spread, lift and size are all adjustable

• Touch screens show labels permanently; narrow frames stack labels above and below

• Links per card, with new-tab option; full keyboard focus states

Works with: Framer (code component). Fully customisable in the properties panel; respects Reduce Motion; no external libraries.

Part of the STUDIO day kit: 14 Framer components, each with a live demo. After checkout you get the install link, and it always points at the latest version.