18:I[55681,["/_next/static/immutable/chunks/0n1e3sa98ofw1.js","/_next/static/immutable/chunks/2aa8l6xa8bjcj.js","/_next/static/immutable/chunks/0c4p9qqceu2rl.js","/_next/static/immutable/chunks/16aj0v4-rc6zs.js","/_next/static/immutable/chunks/2yyvv0h_26zxx.js"],"default"] 19:T7478,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { animate, press, stagger, useReducedMotion } from "motion/react"; import "./cart-card.css"; /* ------------------------------------------------------------------ props -- */ export type CartCardProps = { /** Product name. It is clipped to one line, so anything fits. */ title?: string; /** The line under the title. */ brand?: string; /** Unit price. The figure on the card rolls to `price × quantity`. */ price?: number; /** Product photo. It is multiplied onto the tile, so a white backdrop melts away. */ image?: string; /** Synthesised cues for every interaction. */ sound?: boolean; /** Fired once the slider is taken all the way across. */ onConfirm?: (order: { quantity: number; total: number }) => void; }; const OPEN = { type: "spring", stiffness: 240, damping: 28, mass: 0.9 } as const; const SHUT = { type: "spring", stiffness: 330, damping: 34, mass: 0.8 } as const; const SNAP = { type: "spring", stiffness: 620, damping: 18, mass: 0.6 } as const; const TAP = { type: "spring", stiffness: 900, damping: 32 } as const; const EASE = [0.16, 1, 0.3, 1] as const; const INSET = 4; const KNOB = 46; /** C major pentatonic — any two of these land well together. */ const SCALE = [523.25, 587.33, 659.25, 783.99, 880.0, 1046.5]; /* ------------------------------------------------------------------ sound -- */ /** * Short envelopes over a pentatonic set: enough to be felt rather than heard. * Nothing ships as an asset and the context is only built once a gesture has * unlocked it. */ function useSfx(enabled: boolean) { const ref = useRef<{ ctx: AudioContext; master: AudioNode } | null>(null); const on = useRef(enabled); on.current = enabled; const wake = useCallback(() => { if (!on.current || typeof window === "undefined") return null; const AC = window.AudioContext ?? (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!AC) return null; if (!ref.current) { const ctx = new AC(); const master = ctx.createGain(); master.gain.value = 0.85; /* shaves the glassy top off every cue */ const warm = ctx.createBiquadFilter(); warm.type = "lowpass"; warm.frequency.value = 5200; master.connect(warm).connect(ctx.destination); ref.current = { ctx, master }; } if (ref.current.ctx.state === "suspended") void ref.current.ctx.resume(); return ref.current; }, []); useEffect(() => () => void ref.current?.ctx.close().catch(() => {}), []); return useRef({ /** one pitched voice, optionally gliding from `freq` to `to` */ tone(o: { freq: number; to?: number; dur?: number; type?: OscillatorType; vol?: number; delay?: number }) { const engine = wake(); if (!engine) return; const dur = o.dur ?? 0.18; const t = engine.ctx.currentTime + (o.delay ?? 0); const osc = engine.ctx.createOscillator(); const gain = engine.ctx.createGain(); osc.type = o.type ?? "sine"; osc.frequency.setValueAtTime(o.freq, t); if (o.to) osc.frequency.exponentialRampToValueAtTime(o.to, t + dur); gain.gain.setValueAtTime(0.0001, t); gain.gain.exponentialRampToValueAtTime(o.vol ?? 0.12, t + 0.012); gain.gain.exponentialRampToValueAtTime(0.0001, t + dur); osc.connect(gain).connect(engine.master); osc.start(t); osc.stop(t + dur + 0.05); }, /** a filtered noise burst — the physical half of a tap or a pop */ hit(o: { dur?: number; vol?: number; freq?: number; q?: number; delay?: number } = {}) { const engine = wake(); if (!engine) return; const dur = o.dur ?? 0.1; const n = Math.max(1, Math.floor(engine.ctx.sampleRate * dur)); const buffer = engine.ctx.createBuffer(1, n, engine.ctx.sampleRate); const data = buffer.getChannelData(0); for (let i = 0; i < n; i += 1) data[i] = (Math.random() * 2 - 1) * (1 - i / n) ** 3; const src = engine.ctx.createBufferSource(); src.buffer = buffer; const band = engine.ctx.createBiquadFilter(); band.type = "bandpass"; band.frequency.value = o.freq ?? 1200; band.Q.value = o.q ?? 1.2; const gain = engine.ctx.createGain(); gain.gain.value = o.vol ?? 0.06; src.connect(band).connect(gain).connect(engine.master); src.start(engine.ctx.currentTime + (o.delay ?? 0)); }, wake, }).current; } /* -------------------------------------------------------------- component -- */ /** * A product card that is only a photo until you open it. * * Both growing regions — the detail body and the confirmation strip — are * measured at their natural height and then sprung to it, so neither can be * outgrown by its own content. The knob's transform is owned by the drag * rather than by a spring, so the pointer is tracked exactly and nothing ever * fights over the same property. */ export default function CartCard({ title = "Air Force 1 Low Supr…", brand = "Nike", price = 59, image = "/library/shoe.jpg", sound = true, onConfirm, }: CartCardProps) { const reduced = useReducedMotion(); const sfx = useSfx(sound && !reduced); const gooId = useId().replace(/:/g, ""); const [open, setOpen] = useState(false); const [liked, setLiked] = useState(false); const cardRef = useRef(null); const tileRef = useRef(null); const shoeRef = useRef(null); const heartRef = useRef(null); const heartIconRef = useRef(null); const sparksRef = useRef(null); const bodyRef = useRef(null); const bodyInnerRef = useRef(null); const doneRef = useRef(null); const doneInnerRef = useRef(null); const bagRef = useRef(null); const bagPlusRef = useRef(null); const badgeRef = useRef(null); const priceRef = useRef(null); const sliderRef = useRef(null); const knobRef = useRef(null); const fillRef = useRef(null); const labelRef = useRef(null); const arrowRef = useRef(null); const checkRef = useRef(null); /* the order, kept out of React state: every one of these is read inside pointer handlers that must not wait for a re-render to see the new value */ const countRef = useRef(0); const openRef = useRef(false); const confirmedRef = useRef(false); const doneTimer = useRef | undefined>(undefined); const chainTimers = useRef[]>([]); /* slider geometry and drag bookkeeping */ const travel = useRef(0); const offset = useRef(0); const knobScale = useRef(1); const dragging = useRef(false); const startX = useRef(0); const startOffset = useRef(0); const lastTick = useRef(0); /* --- mount: the shut card springs in ----------------------------------- */ useEffect(() => { const card = cardRef.current; if (!card) return; if (reduced) { card.style.opacity = "1"; if (shoeRef.current) shoeRef.current.style.opacity = "1"; return; } animate( card, { opacity: [0, 1], y: [46, 0], scale: [0.94, 1] }, { type: "spring", stiffness: 210, damping: 24, mass: 0.9 }, ); if (shoeRef.current) { animate(shoeRef.current, { opacity: [0, 1] }, { duration: 0.5, delay: 0.12, ease: EASE }); } /* * A card mounted into a page that is not being rendered — a background tab, * a restored session, a throttled window — never gets the frames the * entrance is made of, and would sit at opacity 0 for as long as nobody * looked at it. The timer runs regardless of frames, so a second later the * card is simply in its finished state whether or not the entrance played. */ const settle = setTimeout(() => { if (Number.parseFloat(getComputedStyle(card).opacity) > 0.99) return; card.getAnimations().forEach((a) => a.cancel()); card.style.opacity = "1"; card.style.transform = "none"; if (shoeRef.current) shoeRef.current.style.opacity = "1"; }, 1000); return () => clearTimeout(settle); // the entrance plays once, on mount // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect( () => () => { clearTimeout(doneTimer.current); chainTimers.current.forEach(clearTimeout); }, [], ); /* --- the confirmation strip on the shut card --------------------------- */ const hideDone = useCallback(() => { clearTimeout(doneTimer.current); const strip = doneRef.current; if (!strip) return; const h = strip.offsetHeight; if (h === 0) return; if (reduced) { strip.style.height = "0px"; return; } animate(strip, { height: [`${h}px`, "0px"] }, SHUT); strip.dataset.to = "0"; setTimeout(() => { if (strip.dataset.to !== "0") return; strip.getAnimations().forEach((a) => a.cancel()); strip.style.height = "0px"; }, 900); }, [reduced]); const showDone = useCallback(() => { clearTimeout(doneTimer.current); const strip = doneRef.current; const inner = doneInnerRef.current; if (!strip || !inner) return; /* the settled chime, once the card is small again */ sfx.tone({ freq: SCALE[3], dur: 0.7, vol: 0.085 }); sfx.tone({ freq: SCALE[5], dur: 0.9, vol: 0.06, delay: 0.06 }); strip.style.height = "auto"; const h = inner.offsetHeight; strip.style.height = "0px"; if (reduced) { strip.style.height = `${h}px`; } else { animate(strip, { height: ["0px", `${h}px`] }, OPEN); animate(inner, { opacity: [0, 1], y: [10, 0] }, { ...OPEN, delay: 0.08 }); /* the strip lands open on a timer too, for the same reason the fold does */ strip.dataset.to = String(h); setTimeout(() => { if (strip.dataset.to !== String(h)) return; strip.getAnimations().forEach((a) => a.cancel()); strip.style.height = `${h}px`; inner.style.opacity = "1"; inner.style.transform = "none"; }, 900); } doneTimer.current = setTimeout(hideDone, 3600); }, [hideDone, reduced, sfx]); /* --- open / shut -------------------------------------------------------- */ const setCardOpen = useCallback( (next: boolean) => { if (openRef.current === next) return; openRef.current = next; setOpen(next); const box = bodyRef.current; const inner = bodyInnerRef.current; const card = cardRef.current; if (!box || !inner || !card) return; /* measure the natural height before the spring takes the property over */ box.style.height = "auto"; const full = inner.offsetHeight; const from = next ? 0 : full; const to = next ? full : 0; box.style.height = `${from}px`; if (reduced) { box.style.height = next ? "auto" : "0px"; } else { void animate(box, { height: [`${from}px`, `${to}px`] }, next ? OPEN : SHUT).finished.then(() => { if (openRef.current === next) box.style.height = next ? "auto" : "0px"; }); /* * The spring writes the height frame by frame, and a page that is not * being rendered produces none — so the card would sit half open until * someone looked at it. This lands the final height on a timer, which * runs either way, and it is a no-op once the spring has got there. */ chainTimers.current.push( setTimeout(() => { if (openRef.current !== next) return; box.getAnimations().forEach((a) => a.cancel()); box.style.height = next ? "auto" : "0px"; }, 900), ); } if (next) { sfx.hit({ freq: 1500, vol: 0.045, dur: 0.07 }); sfx.tone({ freq: 392, to: 784, dur: 0.24, type: "triangle", vol: 0.075 }); } else { sfx.tone({ freq: 700, to: 320, dur: 0.2, type: "triangle", vol: 0.065 }); sfx.hit({ freq: 700, vol: 0.035, dur: 0.09, delay: 0.1 }); } if (next) { hideDone(); const rows = Array.from(inner.querySelectorAll("[data-stagger]")); if (!reduced && rows.length) { rows.forEach((el) => { el.style.opacity = "0"; }); animate(rows, { opacity: [0, 1], y: [14, 0] }, { ...OPEN, delay: stagger(0.055, { startDelay: 0.06 }) }); } } /* a small pop as it opens, and as it drops back down */ if (!reduced) { animate(card, { scale: next ? [1, 1.015, 1] : [1, 0.985, 1] }, { duration: 0.42, ease: EASE }); } }, [hideDone, reduced, sfx], ); /* --- the tile ----------------------------------------------------------- */ useEffect(() => { const tile = tileRef.current; if (!tile || reduced) return; return press(tile, () => { animate(tile, { scale: 0.975 }, TAP); return () => animate(tile, { scale: 1 }, SNAP); }); }, [reduced]); /* --- the heart ---------------------------------------------------------- */ useEffect(() => { const heart = heartRef.current; if (!heart || reduced) return; return press(heart, () => { animate(heart, { scale: 0.86 }, TAP); return () => animate(heart, { scale: 1 }, SNAP); }); }, [reduced]); function toggleLike(e: React.MouseEvent) { e.stopPropagation(); const next = !liked; setLiked(next); if (next) { sfx.tone({ freq: SCALE[2], dur: 0.11, vol: 0.13 }); sfx.tone({ freq: SCALE[5], dur: 0.18, vol: 0.1, delay: 0.055 }); } else { sfx.tone({ freq: 420, to: 262, dur: 0.14, vol: 0.08 }); } if (reduced || !heartIconRef.current) return; animate( heartIconRef.current, next ? { scale: [1, 1.45, 1], rotate: [0, -12, 0] } : { scale: [1, 0.72, 1] }, { duration: 0.5, ease: EASE }, ); if (!next || !sparksRef.current) return; const sparks = Array.from(sparksRef.current.children) as HTMLElement[]; sparks.forEach((spark, i) => { const angle = (i / sparks.length) * Math.PI * 2; const distance = 24 + Math.random() * 10; animate( spark, { opacity: [1, 1, 0], scale: [0, 1, 0.2], x: [0, Math.cos(angle) * distance], y: [0, Math.sin(angle) * distance], }, { duration: 0.62, delay: i * 0.012, ease: EASE }, ); }); } /* --- the bag ------------------------------------------------------------ */ useEffect(() => { const bag = bagRef.current; if (!bag || reduced) return; return press(bag, () => { animate(bag, { scale: 0.9 }, TAP); return () => animate(bag, { scale: 1 }, SNAP); }); }, [reduced, open]); const setPrice = useCallback( (to: number) => { const el = priceRef.current; if (!el) return; const from = Number(el.textContent) || 0; if (reduced || from === to) { el.textContent = String(to); return; } animate(from, to, { duration: 0.45, ease: EASE, onUpdate: (v) => { el.textContent = String(Math.round(v)); }, }); /* the final figure lands even if the roll was never drawn */ setTimeout(() => { if (el.dataset.target === String(to)) el.textContent = String(to); }, 600); el.dataset.target = String(to); }, [reduced], ); function addToBag() { countRef.current += 1; const count = countRef.current; if (badgeRef.current) badgeRef.current.textContent = String(count); setPrice(price * count); /* the pitch climbs with the quantity, so the third tap sounds like a third */ sfx.hit({ freq: 2000, vol: 0.05, dur: 0.06 }); sfx.tone({ freq: SCALE[(count - 1) % SCALE.length], dur: 0.16, type: "triangle", vol: 0.11 }); /* the badge being on is a resting state, so it is written rather than animated into place; the pop below is only dressing on top of it */ if (badgeRef.current) badgeRef.current.style.opacity = "1"; if (reduced) return; /* the plus turns a half circle and settles — quiet, but a beat */ /* the plus turns a half circle and springs back out of the dip it takes */ if (bagPlusRef.current) animate(bagPlusRef.current, { rotate: [0, 180], scale: [0.72, 1] }, { ...SNAP, stiffness: 420 }); if (badgeRef.current) animate(badgeRef.current, { opacity: [0.4, 1], scale: [0.4, 1.3, 1] }, { duration: 0.5, ease: EASE }); } /* --- slide to confirm ---------------------------------------------------- */ /* the knob's transform is written here, so a drag tracks the pointer 1:1 and never fights a spring writing to the same property */ const paint = useCallback((x: number) => { offset.current = x; if (knobRef.current) knobRef.current.style.transform = `translateX(${x}px) scale(${knobScale.current})`; const progress = travel.current > 0 ? x / travel.current : 0; if (fillRef.current) fillRef.current.style.width = `${x + KNOB + INSET}px`; sliderRef.current?.setAttribute("aria-valuenow", String(Math.round(progress * 100))); if (confirmedRef.current) return; if (labelRef.current) { labelRef.current.style.opacity = String(Math.max(0, 1 - progress * 1.6)); labelRef.current.style.transform = `translateX(${progress * 14}px)`; } }, []); useEffect(() => { const slider = sliderRef.current; if (!slider) return; const measure = () => { travel.current = Math.max(0, slider.clientWidth - KNOB - INSET * 2); }; measure(); const observer = new ResizeObserver(measure); observer.observe(slider); return () => observer.disconnect(); }, [open]); const springTo = useCallback( (target: number, spec: Parameters[2]) => { if (reduced) { paint(target); return; } animate(offset.current, target, { ...(spec as object), onUpdate: paint }); }, [paint, reduced], ); const resetOrder = useCallback(() => { confirmedRef.current = false; if (labelRef.current) { labelRef.current.textContent = "Slide to confirm"; labelRef.current.classList.remove("pcart__slideLabel--done"); labelRef.current.style.opacity = "1"; labelRef.current.style.transform = "none"; } if (arrowRef.current) { arrowRef.current.style.opacity = "1"; arrowRef.current.style.transform = "none"; } if (checkRef.current) checkRef.current.style.opacity = "0"; if (sliderRef.current) sliderRef.current.style.backgroundColor = ""; knobScale.current = 1; paint(0); countRef.current = 0; if (badgeRef.current) { badgeRef.current.textContent = "0"; badgeRef.current.style.opacity = "0"; } if (priceRef.current) priceRef.current.textContent = String(price); }, [paint, price]); const confirmOrder = useCallback(() => { if (confirmedRef.current) return; confirmedRef.current = true; /* the reward: a rising triad with the octave on top */ [0, 2, 3].forEach((step, i) => sfx.tone({ freq: SCALE[step], dur: 0.3, vol: 0.11, delay: i * 0.075 })); sfx.tone({ freq: SCALE[5], dur: 0.6, vol: 0.09, delay: 0.225 }); sfx.hit({ freq: 3000, vol: 0.035, dur: 0.05 }); springTo(travel.current, { type: "spring", stiffness: 300, damping: 28, mass: 0.7 }); if (labelRef.current) { labelRef.current.textContent = "Order placed"; labelRef.current.classList.add("pcart__slideLabel--done"); labelRef.current.style.opacity = "0"; if (!reduced) animate(labelRef.current, { opacity: [0, 1], y: [6, 0] }, { duration: 0.4, delay: 0.1, ease: EASE }); else labelRef.current.style.opacity = "1"; } if (!reduced) { if (arrowRef.current) animate(arrowRef.current, { opacity: 0, scale: 0.5 }, { duration: 0.18 }); if (checkRef.current) animate(checkRef.current, { opacity: [0, 1], scale: [0.4, 1] }, { ...SNAP, delay: 0.12 }); if (sliderRef.current) animate(sliderRef.current, { backgroundColor: "#1f3a24" }, { duration: 0.4 }); } else { if (arrowRef.current) arrowRef.current.style.opacity = "0"; if (checkRef.current) checkRef.current.style.opacity = "1"; } onConfirm?.({ quantity: countRef.current, total: price * Math.max(1, countRef.current) }); /* the confirmation lands on the shut card, not on this one */ chainTimers.current.push( setTimeout( () => { setCardOpen(false); showDone(); chainTimers.current.push(setTimeout(resetOrder, 520)); }, reduced ? 0 : 780, ), ); }, [onConfirm, price, reduced, resetOrder, setCardOpen, sfx, showDone, springTo]); function onKnobDown(e: React.PointerEvent) { if (confirmedRef.current) return; dragging.current = true; startX.current = e.clientX; startOffset.current = offset.current; try { knobRef.current?.setPointerCapture(e.pointerId); } catch { /* capture is a nicety, not a requirement */ } lastTick.current = 0; sfx.hit({ freq: 900, vol: 0.04, dur: 0.05 }); if (reduced) return; animate(knobScale.current, 1.06, { ...SNAP, onUpdate: (v) => { knobScale.current = v; paint(offset.current); }, }); } function onKnobMove(e: React.PointerEvent) { if (!dragging.current) return; const x = Math.min(travel.current, Math.max(0, startOffset.current + (e.clientX - startX.current))); paint(x); /* one soft tick per quarter crossed, so the track has detents to feel */ const quarter = travel.current > 0 ? Math.floor((x / travel.current) * 4) : 0; if (quarter > lastTick.current) sfx.hit({ freq: 2600, vol: 0.028, dur: 0.035, q: 2.4 }); lastTick.current = quarter; } function onKnobUp(e: React.PointerEvent) { if (!dragging.current) return; dragging.current = false; try { knobRef.current?.releasePointerCapture(e.pointerId); } catch { /* already released */ } if (!reduced) { animate(knobScale.current, 1, { ...SNAP, onUpdate: (v) => { knobScale.current = v; paint(offset.current); }, }); } if (offset.current >= travel.current * 0.88) confirmOrder(); else { sfx.tone({ freq: 330, to: 208, dur: 0.16, type: "triangle", vol: 0.07 }); springTo(0, { type: "spring", stiffness: 420, damping: 30, mass: 0.8 }); } } /* keyboard: Enter or Space confirms, the arrows walk the knob along */ function onSliderKey(e: React.KeyboardEvent) { if (confirmedRef.current) return; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); confirmOrder(); } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") { e.preventDefault(); const step = travel.current / 6; const next = Math.min( travel.current, Math.max(0, offset.current + (e.key === "ArrowRight" ? step : -step)), ); if (next >= travel.current) confirmOrder(); else springTo(next, { type: "spring", stiffness: 500, damping: 30 }); } } /* --- render -------------------------------------------------------------- */ return (

setCardOpen(!openRef.current)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setCardOpen(!openRef.current); } }} > {/* eslint-disable-next-line @next/next/no-img-element */} {title}

Order confirmed

{title}

{brand}

{price} $

Slide to confirm

); } 1a:T1863,/* =========================================================================== Add To Cart --------------------------------------------------------------------------- A product card that is only a photo until you open it. The two collapsible regions are measured and then sprung, so they are never given a hard-coded height that the type inside could outgrow. =========================================================================== */ .pcart { --pcart-ink: #151515; --pcart-tile: #e9e9e9; --pcart-rail: #2b2b2c; --pcart-red: #e0182d; --pcart-green: #2fbf5f; position: relative; width: 302px; max-width: 100%; font-family: Inter, "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif; color: #ffffff; text-align: left; user-select: none; -webkit-user-select: none; } .pcart *, .pcart *::before, .pcart *::after { box-sizing: border-box; } /* * `:where()` carries no specificity, so this reset sits *below* the component's * own class rules instead of above them. Written as a bare `.pcart button` it * would outrank every single-class rule in this file and quietly strip the type * off the controls that set their own. */ .pcart :where(button) { margin: 0; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pcart :focus-visible { outline: 2px solid rgb(255 255 255 / 0.7); outline-offset: 2px; } .pcart__card { position: relative; padding: 15px; border-radius: 34px; background: var(--pcart-ink); box-shadow: 0 22px 44px -22px rgb(0 0 0 / 0.45), 0 6px 14px -8px rgb(0 0 0 / 0.22); will-change: transform; } /* --- the tile: the whole card while it is shut -------------------------- */ .pcart__tile { position: relative; display: block; width: 100%; aspect-ratio: 272 / 241; overflow: hidden; border-radius: 26px; background: var(--pcart-tile); cursor: pointer; will-change: transform; } /* * The source photo sits on white, so `multiply` melts its background into the * tile rather than needing a cut-out. */ .pcart__shoe { position: absolute; left: 3.5%; top: -42%; width: 93%; max-width: none; transform: scaleX(-1); mix-blend-mode: multiply; will-change: transform; } .pcart__heart { position: absolute; right: 10px; top: 10px; z-index: 20; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--pcart-ink); will-change: transform; } .pcart__heartIcon { position: relative; width: 19px; height: 19px; will-change: transform; } /* the burst: eight dots blurred into one blob on the way out */ .pcart__sparks { position: absolute; inset: 0; pointer-events: none; } .pcart__spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 999px; background: var(--pcart-red); opacity: 0; pointer-events: none; } /* --- collapsible regions ------------------------------------------------- */ .pcart__fold { height: 0; overflow: hidden; } .pcart__doneInner { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 15px; } .pcart__doneTick { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--pcart-green); } .pcart__doneTick svg { width: 12px; height: 12px; } .pcart__doneLabel { font-size: 14px; font-weight: 500; color: #ffffff; } /* * Padding, not margin: a collapsing top margin would fall outside the measured * height and the open animation would land short of the content. */ .pcart__bodyInner { padding: 22px 0 8px; } .pcart__title { margin: 0; overflow: hidden; font-size: 20px; font-weight: 600; line-height: 1.15; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; } .pcart__brand { margin: 6px 0 0; font-size: 14px; font-weight: 400; line-height: 1; color: #a3a3a3; } .pcart__priceRow { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; } .pcart__price { display: flex; align-items: baseline; color: #ffffff; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .pcart__priceNum { font-variant-numeric: tabular-nums; } .pcart__bag { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 999px; background: #ffffff; will-change: transform; } .pcart__bag svg { width: 25px; height: 25px; } .pcart__badge { position: absolute; right: -2px; top: -2px; z-index: 10; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border: 3px solid var(--pcart-ink); border-radius: 999px; background: var(--pcart-red); font-size: 11px; font-weight: 700; line-height: 1; color: #ffffff; opacity: 0; } /* --- slide to confirm ---------------------------------------------------- */ .pcart__slider { position: relative; width: 100%; height: 54px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: var(--pcart-rail); user-select: none; } .pcart__fill { position: absolute; inset-block: 0; left: 0; width: 0; border-radius: 999px; background: rgb(255 255 255 / 0.06); pointer-events: none; } .pcart__slideLabel { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: #a3a3a3; pointer-events: none; will-change: transform; } .pcart__slideLabel--done { color: #ffffff; } .pcart__knob { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: #ffffff; cursor: grab; will-change: transform; } .pcart__knob:active { cursor: grabbing; } .pcart__knobFaces { position: relative; display: block; width: 20px; height: 20px; } .pcart__knobFaces svg { position: absolute; inset: 0; width: 20px; height: 20px; will-change: transform; } .pcart__knobCheck { opacity: 0; } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Add To Cart — Pin UI\",\"description\":\"A product card that is only a photo until you open it. Both growing regions are measured at their natural height and then sprung to it, so neither can be outgrown by its own content. The knob's transform is owned by the drag rather than by a spring, so the pointer is tracked exactly and nothing ever\",\"url\":\"https://pinui.xyz/components/cart-card\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://pinui.xyz/#components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Add To Cart\",\"item\":\"https://pinui.xyz/components/cart-card\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"cart-card","name":"Add To Cart","tagline":"A product card that is only a photo until you open it.","blurb":"Both growing regions are measured at their natural height and then sprung to it, so neither can be outgrown by its own content. The knob's transform is owned by the drag rather than by a spring, so the pointer is tracked exactly and nothing ever fights over the same property.","highlights":["Measured, not hard-coded","Drag, or arrow keys","Gooey heart burst","A cue for every beat"],"clip":"/clips/cart-card.mp4","posterTime":8.7,"zoom":1,"stage":"#ececec","usage":"import CartCard from \"@/components/library/CartCard\";\n\n","props":[{"name":"title","type":"string","fallback":"\"Air Force 1 Low Supr…\"","note":"Clipped to one line, so anything fits."},{"name":"brand","type":"string","fallback":"\"Nike\"","note":"The line under the title."},{"name":"price","type":"number","fallback":"59","note":"Unit price. The figure rolls to price × quantity."},{"name":"image","type":"string","fallback":"\"/library/shoe.jpg\"","note":"Multiplied onto the tile, so a white backdrop melts away."},{"name":"sound","type":"boolean","fallback":"true","note":"A synthesised cue for every interaction."},{"name":"onConfirm","type":"(order) => void","note":"Fired once the slider is taken all the way across."}],"files":[{"name":"CartCard.tsx","lang":"tsx"},{"name":"cart-card.css","lang":"css"}],"info":{"paragraphs":["Shut, the card is only a photograph. Click the tile and the detail opens out of it: title, price, the bag, and a track you drag to confirm. Both growing regions are measured at their natural height and then sprung to it, so neither can ever be outgrown by its own content.","The knob's transform belongs to the drag rather than to a spring, so the pointer is tracked exactly and nothing fights over the same property — and if dragging is not for you, the track takes Enter and the arrow keys. Take it past nine tenths and the order lands: the card drops back to its small shape and the confirmation arrives underneath it."]},"origin":{"label":"Cart"}},"panes":[{"name":"CartCard.tsx","lang":"tsx","code":"$19"},{"name":"cart-card.css","lang":"css","code":"$1a"}],"registryUrl":"https://pinui.xyz/r/cart-card.json"}]]

Add To Cart — Pin UI Component

Air Force 1 Low Supr…