Flip card
A card that flips between a front and a back with a spring, tilting toward the pointer with a moving glare.
Field SocietyMember cardNo. 0148
Privileges
- Reading room, weekdays
- Two guest passes a season
- Archive visits by appointment
The card has flipped 0 times. Click, drag, or press Enter to flip it.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useRef,7 useState,8 type CSSProperties,9 type KeyboardEvent,10 type PointerEvent as ReactPointerEvent,11 type ReactNode,12} from "react";13import { useReducedMotion } from "@/lib/media";14 15export type FlipCardAxis = "x" | "y";16 17export interface FlipCardProps {18 front?: ReactNode;19 back?: ReactNode;20 flipped?: boolean;21 defaultFlipped?: boolean;22 onFlipChange?: (flipped: boolean) => void;23 axis?: FlipCardAxis;24 flipOnClick?: boolean;25 draggable?: boolean;26 dragDistance?: number;27 tilt?: boolean;28 tiltMax?: number;