5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T2755,"use client"; import { useEffect, useRef, useState } from "react"; import { animate, motion, useMotionTemplate, useMotionValue, useSpring, useTransform, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; // Half a turn is a lot of travel for a physical object; under ~300ms it reads // as a snap rather than a card turning over, so this runs longer than most // UI. The small bounce lets it settle like something with weight. const FLIP = { type: "spring", visualDuration: 0.55, bounce: 0.2 } as const; // A few degrees is enough to feel the card lean in; more and the text skews. const MAX_TILT = 6; // Settles in about 300ms with no overshoot, so the lean feels heavy. const FOLLOW = { stiffness: 300, damping: 30 }; // How far the card rises toward you at the halfway point of a flip. const LIFT_SCALE = 0.03; // Held down, the card gives a little under your finger. const PRESS_SCALE = 0.96; const PRESS = { duration: 0.15, ease: [0.23, 1, 0.32, 1] } as const; export function FlipCard({ front, back, frontLabel = "Show details", backLabel = "Show front", className, }: { front: React.ReactNode; back: React.ReactNode; frontLabel?: string; backLabel?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const [flipped, setFlipped] = useState(false); const frontButton = useRef(null); const backButton = useRef(null); const moveFocus = useRef(false); const flip = useMotionValue(0); // Lives in the same transform as the flip. A CSS scale on a wrapper // around the 3D card makes Safari flatten it into an opaque square for // as long as the press lasts. const press = useMotionValue(1); const setPressed = (down: boolean) => { const to = down ? PRESS_SCALE : 1; if (reduceMotion) press.jump(to); else animate(press, to, PRESS); }; // Pointer position across the card, -1 to 1 on each axis. const pointerX = useMotionValue(0); const pointerY = useMotionValue(0); const x = useSpring(pointerX, FOLLOW); const y = useSpring(pointerY, FOLLOW); // The half under the pointer tips toward you. const tiltX = useTransform(y, (v) => -v * MAX_TILT); const tiltY = useTransform(x, (v) => v * MAX_TILT); // 0 when a face is flat to the viewer, 1 when the card is edge-on. Derived // from the angle itself, so an interrupted flip lifts exactly as much as // its current position warrants. const lift = useTransform(flip, (v) => Math.abs(Math.sin((v * Math.PI) / 180)), ); const scale = useTransform( () => (1 + lift.get() * LIFT_SCALE) * press.get(), ); // Tilt adds to the flip in world space, so the lean still follows the // cursor when the back is showing. const turn = useTransform(() => flip.get() + tiltY.get()); const transform = useMotionTemplate`rotateX(${tiltX}deg) rotateY(${turn}deg) scale(${scale})`; // Reduced motion keeps the press, just without the turn. const pressTransform = useMotionTemplate`scale(${press})`; // Raised higher, the shadow falls further away, spreads and darkens. const shadowY = useTransform(lift, (l) => 14 + l * 22); const shadowScale = useTransform( () => (0.92 + lift.get() * 0.08) * press.get(), ); const shadowOpacity = useTransform(lift, (l) => 0.3 + l * 0.3); const shadowTransform = useMotionTemplate`translateY(${shadowY}px) scale(${shadowScale})`; useEffect(() => { if (reduceMotion) { flip.jump(0); return; } // Starts from the live angle and velocity, so flipping again mid-turn // reverses smoothly instead of restarting. const controls = animate(flip, flipped ? 180 : 0, FLIP); return () => controls.stop(); }, [flipped, reduceMotion, flip]); // The face that was pressed turns inert, so focus follows to the other one. useEffect(() => { if (!moveFocus.current) return; moveFocus.current = false; (flipped ? backButton : frontButton).current?.focus({ preventScroll: true, }); }, [flipped]); const toggle = () => { moveFocus.current = true; setFlipped((f) => !f); }; const face = "absolute inset-0 rounded-3xl backface-hidden"; // Reduced motion swaps faces with a short cross-fade in place of the turn. const fade = "transition-[opacity] duration-200 ease-out"; const hitArea = "absolute inset-0 z-10 cursor-pointer rounded-[inherit] outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-4 focus-visible:outline-foreground"; return (

{ if (e.button === 0 && (e.target as Element).closest("button")) { setPressed(true); } }} onPointerUp={() => setPressed(false)} onPointerCancel={() => setPressed(false)} onKeyDown={(e) => { if (e.key === " " && !e.repeat) setPressed(true); }} onKeyUp={(e) => { if (e.key === " ") setPressed(false); }} onBlur={() => setPressed(false)} onPointerMove={(e) => { // Touch would fight the page scroll, so leaning is for mouse and pen. if (reduceMotion || e.pointerType === "touch") return; const rect = e.currentTarget.getBoundingClientRect(); pointerX.set(((e.clientX - rect.left) / rect.width) * 2 - 1); pointerY.set(((e.clientY - rect.top) / rect.height) * 2 - 1); }} onPointerLeave={() => { pointerX.set(0); pointerY.set(0); setPressed(false); }} >

); } function FlipHint({ children }: { children: React.ReactNode }) { return ( {children} ); } const DETAILS = [ ["Plan", "Studio, yearly"], ["Seats", "3 of 5 used"], ["Storage", "42 of 100 GB"], ["Renews", "12 Mar 2027"], ] as const; function Front() { return (

ui lab No. 0042

Studio member Yash
Bavadiya

Member since April 2024

Details

); } function Back() { return (

Membership Studio

{term}: {value}

No. 0042 Front

); } export default function FlipCardDemo() { return } back={} />; } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/flip-card.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]