// surfaces.jsx // Brand chrome (monochrome + blue) and the two product surfaces the captures // flow into: the ScreenSync Library and the Figma canvas. /* ───────────────────────── marks ───────────────────────── */ function ScreenSyncMark({ size = 22 }) { return ; } function AndroidMark({ size = 20 }) { const g = '#3DDC84'; return ( ); } function FigmaMark({ size = 20 }) { const u = size / 24; return ( ); } /* ───────────────────────── pill ───────────────────────── */ // The from→to motif: a floating white pill labelling the current surface. function Pill({ icon, label, sub }) { return (
{icon} {label} {sub && {sub}}
); } /* ───────────────────── frame thumbnail ───────────────────── */ // A captured screen, cropped to a card. Used in Library + Figma. function FrameThumb({ variant, w = 200, cropH, radius = 12, ring = 'none' }) { const scale = w / SCREEN_W; const fullH = SCREEN_H * scale; const h = cropH != null ? cropH : fullH; const ringStyle = ring === 'blue' ? '0 0 0 2.5px #007aff, 0 8px 22px rgba(0,122,255,0.22)' : ring === 'soft' ? '0 0 0 1px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.10)' : 'none'; return (
); } /* ───────────────────── ScreenSync Library ───────────────────── */ const LIB = { w: 720, h: 724 }; // captureProgress: per-variant entrance 0..1 (keyed by variant). selected: variant string. function LibraryWindow({ captureProgress = {}, selected = null, syncedCount = 3 }) { const newCards = [ { variant: 'travel', name: 'kyoto-explore.png', time: '0:12' }, { variant: 'music', name: 'now-playing.png', time: '0:08' }, { variant: 'fitness', name: 'activity-rings.png', time: '0:03' }, ]; const older = ['#fde2c4', '#e7d4ff', '#cdeede', '#ffd4dd', '#d3e4ff']; return (
{/* header */}
ScreenSync / Mobile refs
Search
{/* toolbar */}
All assets Collections Recent
synced
{/* body */}
TODAY {syncedCount} new frames
{newCards.map((c) => { const p = clamp(captureProgress[c.variant] ?? 1, 0, 1); const sel = selected === c.variant; return (
{c.name} {c.time}
{p > 0.6 && ( NEW )}
); })}
{/* older row */}
EARLIER
{older.map((col, i) => (
))}
); } /* ───────────────────────── Figma canvas ───────────────────────── */ const FIG = { w: 760, h: 724 }; // frameProgress: per-variant 0..1 entrance onto the canvas. // cam: { amt:0..1, fcx } — zoom/pan the CANVAS CONTENT inside the fixed window. function FigmaWindow({ frameProgress = {}, focus = null, cam }) { const c = cam || { amt: 0, fcx: 305 }; const vcx = (FIG.w - 150) / 2; // canvas viewport centre x const vcy = 330; // where the focused frame centre lands vertically const fcyLocal = 270; // frame centre y in canvas coords const cs = 1 + 0.72 * c.amt; const ctx2 = (vcx - cs * c.fcx) * c.amt; const cty2 = (vcy - cs * fcyLocal) * c.amt; const camTransform = `translate(${ctx2}px, ${cty2}px) scale(${cs})`; const frames = [ { variant: 'travel', name: 'Kyoto explore', x: 56, y: 88 }, { variant: 'music', name: 'Now playing', x: 230, y: 88 }, { variant: 'fitness', name: 'Activity rings', x: 404, y: 88 }, ]; const fw = 150; // frame width on canvas const fh = fw * (SCREEN_H / SCREEN_W); return (
{/* menubar */}
Mobile references
{['#34e89e', '#a838ff', '#ff8a5c'].map((c, i) =>
)}
Share
{/* layers panel */}
Layers
{frames.map((f) => (
{f.name}
))}
{/* canvas */}
{frames.map((f) => { const p = clamp(frameProgress[f.variant] ?? 0, 0, 1); if (p <= 0.001) return null; const e = p; // placed frame appears at full size \u2014 no scale-up pop const isFocus = focus === f.variant; return (
{f.name}
); })}
{/* bottom toolbar */}
{['move', 'frame', 'pen', 'shape', 'text'].map((t, i) => (
))}
); } function ToolIcon({ t, active }) { const c = active ? '#fff' : '#b3b3b3'; const map = { move: , frame: , pen: , shape: , text: T, }; return {map[t]}; } /* ───────────────────── toast + sync trail dot ───────────────────── */ function Toast({ label, sub, opacity = 1, y = 0 }) { return (
{label} {sub && {sub}}
); } Object.assign(window, { ScreenSyncMark, AndroidMark, FigmaMark, Pill, FrameThumb, LibraryWindow, FigmaWindow, Toast, LIB, FIG });