Interactions
Direction-Aware Flip Card
A flip card that swings toward the cursor's entry side, with cursor-tracked sheen, parallax tilt, and a lifting floor shadow that quietly pull you in for another flip.
Installation
Coming soon. Components will be available via the registry once checkout goes live.
Usage
<DirectionAwareFlipCard
frontSrc="/cards/front.webp"
backSrc="/cards/back.webp"
width={360}
height={520}
radius={24}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| frontSrc* | string | — | Image shown on the front face. |
| backSrc* | string | — | Image shown on the back face. |
| frontAlt | string | — | Alt text for the front image. |
| backAlt | string | — | Alt text for the back image. |
| width* | number | — | Card width in px. |
| height* | number | — | Card height in px. |
| radius | number | 20 | Border radius in px. |
| duration | number | — | Flip duration in seconds. Used as a fallback when the spring is disabled. |
| className | string | — | Classes merged onto the card root. |
Use cases
Trading-card / collectibles UI
Reveal alternate art or stats on the back of a card without leaving the page.
Pricing tier compare
Flip from headline pricing to detailed feature breakdown.
Profile / member card
Front: portrait + name. Back: bio + links.
Event ticket / boarding pass
Cover art on the front, QR code and itinerary on the back of a digital pass.