Flip Card

Features

• 3D Y-axis flip on a real <button> triggered by click and by keyboard (Enter or Space)
• aria-pressed reflects the flipped state and the aria-label updates to describe the next action
• Pointer-only hover preview — the card lifts and tilts; click, Enter or Space do the flipping
• Mid-flip lift and a settle — the card scales and rises through the turn before landing
• Embossed card number and holder text via layered ink-polarity text-shadows
• Gold EMV chip and a contactless glyph injected from a brand-mark registry
• Duo-tone network discs plus a JetBrains Mono card number, expiry and security code
• Reverse face with a black magnetic stripe, an Allura cursive signature and the CCV block
• Fully respects prefers-reduced-motion — the flip still works but resolves instantly

Accessibility

Flip control

The whole card is a native <button> — click, Enter and Space all flip it

State exposure

aria-pressed tracks the flipped state

Action label

aria-label updates to describe which face the next activation reveals

Decorative art

Logo, chip, contactless glyph and duo-tone network marks are aria-hidden

Focus indicators

:focus-visible with the --ring outline on the flip button

Reduced motion

prefers-reduced-motion: reduce makes the flip instant while still functional

Customise it with AI

Open Flip Card in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the payment is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.