{[ { label: 'Promotions', pct: 92 }, { label: 'Social', pct: 78 }, { label: 'Newsletters', pct: 64 }]. map((row, i) =>

{row.label} −{row.pct}%

)}

); } if (kind === 'categories') { const pills = [ { t: 'Bills', n: 14, c: 'var(--accent)' }, { t: 'Travel', n: 6, c: '#5567A8' }, { t: 'Receipts', n: 142, c: 'var(--ink-mute)' }, { t: 'Subscriptions', n: 14, c: '#8B6FA8' }, { t: 'Parcels', n: 4, c: '#5C8A6F' }, { t: 'Meetings', n: 11, c: '#7CA88B' }, { t: 'Statements', n: 12, c: 'var(--ink-mute)' }]; return (

{pills.map((p, i) =>

{p.t} {p.n}

)}

); } return null; } function FeatureCard({ f, hovered }) { const featured = f.featured; const lift = hovered ? -10 : 0; return (

{f.kicker}

{f.title}

{f.body}

); } function Carousel() { const trackRef = React.useRef(null); const containerRef = React.useRef(null); const offsetRef = React.useRef(0); const lastTRef = React.useRef(0); const pausedRef = React.useRef(false); const cycleWidthRef = React.useRef(0); const lastScrubRef = React.useRef(0); const [hoveredIdx, setHoveredIdx] = React.useState(-1); // Duplicate features for seamless loop const loop = [...features, ...features]; React.useEffect(() => { // Measure one cycle (single set of features) const measure = () => { const track = trackRef.current; if (!track) return; const half = track.scrollWidth / 2; cycleWidthRef.current = half; }; measure(); window.addEventListener('resize', measure); const SCRUB_RECOVERY_MS = 600; let raf; const SPEED = 28; // px per second const tick = (t) => { if (!lastTRef.current) lastTRef.current = t; const dt = (t - lastTRef.current) / 1000; lastTRef.current = t; const sinceScrub = t - lastScrubRef.current; const scrubbing = lastScrubRef.current > 0 && sinceScrub < SCRUB_RECOVERY_MS; // Auto-flow runs unless paused (hover) or actively scrubbing (recent wheel input) if (!pausedRef.current && !scrubbing && cycleWidthRef.current > 0) { // Ease back in after a scrub finishes — ramp speed from 0 to SPEED across the recovery window let speed = SPEED; if (lastScrubRef.current > 0 && sinceScrub < SCRUB_RECOVERY_MS * 1.6) { const k = Math.min(1, (sinceScrub - SCRUB_RECOVERY_MS) / (SCRUB_RECOVERY_MS * 0.6)); speed = SPEED * Math.max(0, k); } offsetRef.current += speed * dt; } // Wrap offset in both directions for seamless loop const w = cycleWidthRef.current; if (w > 0) { if (offsetRef.current >= w) offsetRef.current -= w;else if (offsetRef.current < 0) offsetRef.current += w; } if (trackRef.current) { trackRef.current.style.transform = `translate3d(${-offsetRef.current}px, 0, 0)`; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); // Resume animation on scroll or cursor movement (resets dt spike) const wake = () => {lastTRef.current = 0;}; window.addEventListener('scroll', wake, { passive: true }); window.addEventListener('mousemove', wake, { passive: true }); // Wheel scrubbing — let the user push cards either direction with trackpad/mouse wheel. // We only intercept clearly-horizontal intent so vertical page scroll keeps working. const onWheel = (e) => { // Prefer deltaX (trackpad horizontal swipe). If user is holding shift, treat // deltaY as horizontal too. Otherwise leave the event alone. let dx = e.deltaX; if (Math.abs(dx) < 1 && e.shiftKey) dx = e.deltaY; // If horizontal intent dominates, use it. if (Math.abs(dx) >= Math.abs(e.deltaY) && Math.abs(dx) > 1) { e.preventDefault(); offsetRef.current += dx; lastScrubRef.current = performance.now(); } }; const el = containerRef.current; if (el) el.addEventListener('wheel', onWheel, { passive: false }); // Drag-to-scrub for users without a horizontal trackpad — click-and-drag the carousel. let dragging = false; let dragStartX = 0; let dragStartOffset = 0; const onPointerDown = (e) => { // Only primary button, and ignore drags that start on a real interactive element if (e.button !== 0) return; dragging = true; dragStartX = e.clientX; dragStartOffset = offsetRef.current; lastScrubRef.current = performance.now(); if (el) el.style.cursor = 'grabbing'; e.preventDefault(); }; const onPointerMove = (e) => { if (!dragging) return; const dx = e.clientX - dragStartX; offsetRef.current = dragStartOffset - dx; lastScrubRef.current = performance.now(); }; const onPointerUp = () => { if (!dragging) return; dragging = false; lastScrubRef.current = performance.now(); // start the recovery window now if (el) el.style.cursor = 'grab'; }; if (el) { el.style.cursor = 'grab'; el.addEventListener('pointerdown', onPointerDown); } window.addEventListener('pointermove', onPointerMove); window.addEventListener('pointerup', onPointerUp); window.addEventListener('pointercancel', onPointerUp); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); window.removeEventListener('scroll', wake); window.removeEventListener('mousemove', wake); if (el) { el.removeEventListener('wheel', onWheel); el.removeEventListener('pointerdown', onPointerDown); } window.removeEventListener('pointermove', onPointerMove); window.removeEventListener('pointerup', onPointerUp); window.removeEventListener('pointercancel', onPointerUp); }; }, []); const onCardEnter = (i) => { pausedRef.current = true; setHoveredIdx(i); }; const onCardLeave = () => { pausedRef.current = false; lastTRef.current = 0; // reset so dt doesn't spike setHoveredIdx(-1); }; return (

{loop.map((f, i) =>

onCardEnter(i)} onMouseLeave={onCardLeave} style={{ flexShrink: 0 }}>

)}

); } function Bento() { return (

A small system,
quietly running.

Connect once. Scrub does the rest in the background.

); } window.Bento = Bento;

{f.title}

A small system,quietly running.

A small system,
quietly running.