// mock-screens.jsx // Small, identifiable iOS-esque screen mocks rendered in pure CSS/SVG, // used as the inset (PiP) screenshot inside Screengram gallery cards. // They're tiny — ~180px tall — so they read as "a phone showing X" not // as a full screen design. // Shared helpers ────────────────────────────────────────────────────────── const screenSurface = (bg) => ({ background: bg, width: '100%', height: '100%', borderRadius: 'inherit', overflow: 'hidden', position: 'relative', fontFamily: '-apple-system, "SF Pro Text", system-ui', WebkitFontSmoothing: 'antialiased', fontSize: 9, color: '#111', display: 'flex', flexDirection: 'column', }); const StatusRow = ({ time = '4:45', dark = false }) => { const c = dark ? '#fff' : '#000'; return (
{time}
); }; // ─── Maps ─────────────────────────────────────────────────────────────── function MockMaps() { return (
{/* map plane */}
{/* parks */} {/* water */} {/* roads */} {/* route */} {/* pins */}
{/* search pill */}
◉ Search Maps
{/* bottom card */}
14 min
5.2 mi · via I-580 W
); } // ─── Messages ─────────────────────────────────────────────────────────── function MockMessages() { const me = '#0a84ff', them = '#e6e6eb'; const Bub = ({ side, w, children }) => (
{children}
); return (
M
Mom
TODAY 4:42 PM
are you home for dinner sunday? dad's making the brisket yes!! what time 6 ish. bring nothing. love u
Delivered
iMessage
); } // ─── Music player ─────────────────────────────────────────────────────── function MockMusic() { return (
Now Playing
nocturnes
side a
Aisha, alone
Pall — Nocturnes
{/* progress */}
1:24-2:38
{/* transport */}
⏮ ⏸ ⏭
); } // ─── Notes / writing app ─────────────────────────────────────────────── function MockNotes() { return (
‹ Notes ⊕
Things to remember
May 7 · 4:31 PM

The screen is the dominant surface now. Most of what we look at isn't the world — it's a rectangle.

The front camera captures your face. The back camera captures the room. Neither captures what you were doing.

Build the third one.

); } // ─── Browser / article ───────────────────────────────────────────────── function MockSafari() { return (
𝐀𝐀 nytimes.com ↻
OPINION
The quiet collapse of the
front-facing era
By S. Kapoor — May 6, 2026
For ten years, the camera looked at us. We posed, we tilted, we performed. Now the camera is looking at the world again — and the world has changed. A new generation of apps is asking what, exactly, is worth a photograph.
); } // ─── Calendar ─────────────────────────────────────────────────────────── function MockCalendar() { const days = ['M','T','W','T','F','S','S']; return (
MAY 2026
Friday 8
{days.map((d, i) => (
{d}
{4 + i}
))}
{[ ['9:00','standup','#3478f6'], ['11:30','dentist','#e89e2f'], ['1:00','lunch w/ J','#34a853'], ['4:30','—','#aaa'], ['7:00','dinner @ 320','#e84d3d'], ].map(([t, l, c], i) => (
{t} {l}
))}
); } // ─── Photo grid ──────────────────────────────────────────────────────── function MockPhotos() { const tones = [ 'linear-gradient(135deg,#e8c39a,#9b6638)', 'linear-gradient(135deg,#3a4d6a,#1a2438)', 'linear-gradient(135deg,#d8c0a4,#7a6448)', 'linear-gradient(135deg,#5a3d2a,#1f130a)', 'linear-gradient(135deg,#cfa67c,#6e4226)', 'linear-gradient(135deg,#1a1a22,#3a3a48)', 'linear-gradient(135deg,#e2d2b4,#8a6a40)', 'linear-gradient(135deg,#7a4830,#28150a)', 'linear-gradient(135deg,#9c8a6e,#3e2e1a)', ]; return (
Library
2,148 photos
{tones.map((t, i) => (
))}
); } // ─── Wallet / Activity / Banking ─────────────────────────────────────── function MockWallet() { return (
Wallet
{[ ['#1a3a6e','#0a1a3a','VISA','•• 4421'], ['#3a1a1a','#1a0a0a','AMEX','•• 9082'], ['#1f3a1f','#0a1a0a','CASH','tap to pay'], ].map(([a, b, t, n], i) => (
{t}
{n}
◢
))}
); } // ─── Code editor ───────────────────────────────────────────────────── function MockCode() { const lines = [ ['function ', 'screengram', '() {'], [' const ', 'screen', ' = await ', 'capture', '()'], [' const ', 'photo', ' = await ', 'rear', '()'], [' return ', 'compose', '(screen, photo)'], ['}'], [''], ['// the third image'], ]; return (
{lines.map((parts, i) => (
{i + 1} {parts.map((p, j) => { if (p.startsWith('//')) return {p}; if (['function ', 'const ', 'await ', 'return '].includes(p)) return {p}; if (['screengram','capture','rear','compose'].includes(p)) return {p}; if (['screen','photo'].includes(p)) return {p}; return {p}; })}
))}
); } window.MockMaps = MockMaps; window.MockMessages = MockMessages; window.MockMusic = MockMusic; window.MockNotes = MockNotes; window.MockSafari = MockSafari; window.MockCalendar = MockCalendar; window.MockPhotos = MockPhotos; window.MockWallet = MockWallet; window.MockCode = MockCode;