Memory Flip
The pairs game with real 3D flips, glowing matches, shaking misses, stars and a cascade win.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Pass your own faces: emoji, letters or product images. It shuffles on the client, so there's no hydration mismatch.
Installation
$ npm i @guetix/memory-flip
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
Usage
example.tsx
import { MemoryFlip } from "@/components/guetix/memory-flip";
export default function Example() {
return <MemoryFlip />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| faces | string[] | — | Card faces (pairs are made for you). |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Every card is a labelled button; moves and time are announced.