// screengram-app.jsx
// Interactive Screengram prototype — mirrors the shipped iOS app.
// Behavioral source of truth (HTML prototype): updated 2026-05-20 to match
// what's actually on `main` (flat library + user-curated albums, no
// Volume metaphor; 3-page dictionary onboarding; animated headline;
// daily prompt; 3 composite layouts; 5-tab bar; reel export).
const { useState, useEffect, useRef, useMemo } = React;
const APP_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "cream",
"shutterStyle": "rotate",
"captureLayout": "pip",
"screenshotOverlay": true,
"skipOnboarding": false,
"useLatestHero": true,
"showDailyPrompt": true
}/*EDITMODE-END*/;
// ─── Palettes (mirror Tokens.swift / concept page) ─────────────────
const APP_PALETTES = {
cream: { bg:'#f0e7d3', card:'#f7eedb', ink:'#1a140e', faded:'#6e5f48', accent:'#a3431a', chrome:'#ebe1c9' },
sepia: { bg:'#d8c8a4', card:'#dfcca5', ink:'#2a1a0c', faded:'#6e4d2a', accent:'#7a2c0e', chrome:'#cbb888' },
newsprint: { bg:'#f3efe6', card:'#fff', ink:'#0e0e0d', faded:'#5a584f', accent:'#0e0e0d', chrome:'#e9e4d8' },
ink: { bg:'#181612', card:'#241f18', ink:'#e8dcc2', faded:'#9a8e74', accent:'#d96930', chrome:'#1f1d18' },
};
// ─── Demo library (no Volume numbers — flat library) ───────────────
// Each item is a single filed screengram. Albums below reference these
// by id.
const SEED_LIBRARY = [
{ id:'a', mock:'MockPhotos', when:'sun · 11:48 pm', where:'living room', caption:'a year, in tiles', month:'2026-05' },
{ id:'b', mock:'MockCalendar', when:'fri · 11:09 am', where:'meeting room 4', caption:'next week', month:'2026-05' },
{ id:'c', mock:'MockSafari', when:'wed · 7:22 pm', where:'cafe table', caption:'reading', month:'2026-05' },
{ id:'d', mock:'MockNotes', when:'tue · 6:51 am', where:'desk, before light', caption:'three sentences', month:'2026-05' },
{ id:'e', mock:'MockMusic', when:'sat · 2:03 am', where:'kitchen floor', caption:'side a', month:'2026-04' },
{ id:'f', mock:'MockMessages', when:'thu · 10:48 pm', where:'bed, brooklyn', caption:'asynchronous', month:'2026-04' },
{ id:'g', mock:'MockMaps', when:'sun · 9:14 am', where:'kitchen, oakland', caption:'morning, no destination', month:'2026-04' },
];
const SEED_ALBUMS = [
{ id:'al1', title:'mornings', coverId:'g', items:['g','d'] },
{ id:'al2', title:'late nights', coverId:'e', items:['e','f','a'] },
{ id:'al3', title:'on the road', coverId:'b', items:['b','c'] },
];
const DAILY_PROMPTS = [
'the alarm + you ignoring it',
'the last thing you screenshotted to remember.',
'whatever pulled you out of the moment.',
'a map of where you wanted to be.',
'the message you saved to think about later.',
];
// ─── Top-level App ────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(APP_TWEAK_DEFAULTS);
const p = APP_PALETTES[t.palette] || APP_PALETTES.cream;
const [screen, setScreen] = useState(t.skipOnboarding ? 'home' : 'onboarding');
const [library, setLibrary] = useState(SEED_LIBRARY);
const [albums, setAlbums] = useState(SEED_ALBUMS);
const [pendingScreengram, setPendingScreengram] = useState(null);
const [active, setActive] = useState(null); // active screengram / album
useEffect(() => {
const r = document.documentElement.style;
r.setProperty('--bg', p.bg);
r.setProperty('--card', p.card);
r.setProperty('--ink', p.ink);
r.setProperty('--faded', p.faded);
r.setProperty('--accent', p.accent);
r.setProperty('--chrome', p.chrome);
}, [p]);
// Daily prompt — pinned for the session, can be shuffled.
const [promptIdx, setPromptIdx] = useState(0);
const [promptDismissed, setPromptDismissed] = useState(false);
return (
setPromptIdx((i) => (i + 1) % DAILY_PROMPTS.length)}
/>
({ value: v, label: v }))}
onChange={(v) => setTweak('palette', v)} />
setTweak('captureLayout', v)} />
setTweak('shutterStyle', v)} />
setTweak('screenshotOverlay', v)} />
setTweak('useLatestHero', v)} />
setTweak('showDailyPrompt', v)} />
setTweak('skipOnboarding', v)} />
setScreen('onboarding')} />
setScreen('cap-screenshot')} />
{ setActive(library[0]); setScreen('reel-export'); }} />
setScreen('cap-saved')} />
);
}
// ─── Side rail with quick links ───────────────────────────────────
function SideRail({ screen, setScreen }) {
const links = [
['onboarding', 'intro'],
['home', 'home'],
['cap-screenshot', 'capture'],
['library', 'library'],
['albums', 'albums'],
['profile', 'profile'],
['settings', 'settings'],
];
return (
{links.map(([k, l]) => (
setScreen(k)}>
{l}
))}
prototype
);
}
// ─── Router ────────────────────────────────────────────────────────
function ScreenRouter(props) {
const { screen } = props;
switch (screen) {
case 'onboarding': return
heaven is a place on earth
a screen shot,graph .
Pair every screenshot with a photo of where you were.
One image, two realities — filed into a tiny private library.
◉
Camera
to photograph the room
▤
Photos · read
to pull the latest screenshot
setScreen('home')}>
Go
→
free · no account · iOS 17+
);
}
// ─── Home ──────────────────────────────────────────────────────────
function Home(props) {
const { setScreen, library, t, prompt, promptDay, promptDismissed,
setPromptDismissed, shufflePrompt } = props;
// Animated headline phase: 0=two-line, 1=merged single line
const [merged, setMerged] = useState(false);
useEffect(() => {
if (merged) return;
const t1 = setTimeout(() => setMerged(true), 1800);
return () => clearTimeout(t1);
}, [merged]);
const recent5 = library.slice(0, 5);
const showPrompt = t.showDailyPrompt && !promptDismissed;
return (
{recent5.length > 0 && (
{ props.setActive(sg); setScreen('detail'); }} />
)}
{showPrompt && (
setScreen('cap-screenshot')}
onSkip={() => setPromptDismissed(true)}
onShuffle={shufflePrompt}
/>
)}
setScreen('cap-screenshot')}>
GO
{t.useLatestHero && (
setScreen('cap-camera')}>
use latest
taken just now
→
)}
);
}
function AnimatedHeadline({ merged }) {
return (
a screen shot,graph .
screengram .
);
}
function RecentStrip({ items, onTap }) {
return (
{items.map((sg) => {
const M = window[sg.mock];
return (
onTap(sg)}>
);
})}
today's prompt · day {day}
{text}
●
take it
skip
);
}
// ─── Capture: 1) screenshot pull ──────────────────────────────────
function CapScreenshot({ setScreen, setPending }) {
const [phase, setPhase] = useState('framing');
useEffect(() => {
if (phase === 'framing') {
const id = setTimeout(() => setPhase('flashing'), 1100);
return () => clearTimeout(id);
}
if (phase === 'flashing') {
const id = setTimeout(() => {
setPending({ screenComp: 'MockSafari' });
setScreen('cap-camera');
}, 700);
return () => clearTimeout(id);
}
}, [phase]);
return (
{phase === 'flashing' &&
}
setScreen('home')} className="mono small">cancel
);
}
// ─── Capture: 2) camera with compose-time overlay ──────────────────
function CapCamera({ setScreen, t, pending, setPending }) {
const [snapped, setSnapped] = useState(false);
const [overlayOn, setOverlayOn] = useState(t.screenshotOverlay !== false);
const [pipPos, setPipPos] = useState({ x: 14, y: 14 }); // bl-ish, in % from corner
const [pipScale, setPipScale] = useState(1);
const Mock = pending && window[pending.screenComp] ? window[pending.screenComp] : window.MockSafari;
const trigger = () => {
setSnapped(true);
setTimeout(() => {
setPending({ ...pending, photoIdx: Math.floor(Math.random() * 4), pipScale, pipPos });
setScreen('cap-review');
}, 380);
};
return (
{overlayOn && (
)}
setOverlayOn((v) => !v)}>
{snapped &&
}
setScreen('cap-screenshot')}>
retake screen
setPipScale((s) => Math.min(1.4, s + 0.15))}>
zoom +
setPipScale((s) => Math.max(0.6, s - 0.15))}>
zoom −
);
}
// ─── Capture: 3) review with layout switcher + overlay text ───────
function CapReview({ setScreen, pending, setPending, library, setLibrary, t }) {
const [layout, setLayout] = useState(t.captureLayout);
const [corner, setCorner] = useState('bl');
const [overlayText, setOverlayText] = useState('');
const [overlayDragX, setOverlayDragX] = useState(50); // % from left
const [overlayDragY, setOverlayDragY] = useState(72); // % from top
const Mock = pending && window[pending.screenComp] ? window[pending.screenComp] : window.MockSafari;
const save = () => {
const next = {
id: 'n' + (library.length + 1),
mock: pending?.screenComp || 'MockSafari',
when: 'today · ' + new Date().toLocaleTimeString([], { hour:'numeric', minute:'2-digit' }).toLowerCase(),
where: 'right here',
caption: overlayText || 'just now',
month: '2026-05',
};
setLibrary([next, ...library]);
setPending(null);
setScreen('cap-saved');
};
return (
{overlayText && (
{overlayText}
)}
{['pip','sbs','stack'].map((k) => (
setLayout(k)}>
{k}
))}
{layout === 'pip' && (
{['tl','tr','bl','br'].map((c) => (
setCorner(c)}>
{c.toUpperCase()}
))}
)}
caption
when today · 4:48 pm
source safari · nytimes.com
setScreen('cap-screenshot')}>retake
file to library
);
}
// ─── Capture: 4) saved — polaroid prints from Dynamic Island ─────
// The Dynamic Island morphs into a printer slot; a polaroid extrudes,
// develops from dark to photo, then drops + rotates and slots into
// its place in the library grid behind it.
function CapSaved({ setScreen, library, pending }) {
// phases drive the CSS state machine on `.csv[data-phase]`.
// 0 idle — library faded, island normal
// 1 wake — island stretches down into a printer slot
// 2 print — polaroid extrudes (with tiny wiggle)
// 3 develop — polaroid emerged, photo fades up from dark
// 4 drop — polaroid tilts and dives toward target cell
// 5 settled — polaroid scaled into the cell; toast in
const [phase, setPhase] = useState(0);
useEffect(() => {
const seq = [
[120, 1],
[380, 2],
[1700, 3],
[2900, 4],
[3700, 5],
[4800, 'nav'],
];
const ids = seq.map(([t, p]) =>
setTimeout(() => (p === 'nav' ? setScreen('library') : setPhase(p)), t)
);
return () => ids.forEach(clearTimeout);
}, []);
const sg = library[0];
const Mock = window[sg.mock] || window.MockSafari;
// Library backdrop: target cell first (highlighted dashed), then the
// next five recents. Keep it short — feels like the top of the grid.
const backdrop = library.slice(1, 6);
return (
{/* faded library grid behind — the new polaroid will dive into
the first cell (the dashed target). */}
library
{library.length} screengrams
{backdrop.map((s) => {
const M = window[s.mock] || window.MockSafari;
return (
);
})}
{/* Island morph: black slot extruding from the bottom of the
system Dynamic Island, with a sliver of paper at the lip. */}
{/* The polaroid being printed. Sits below the island in z-order
so its top edge is naturally clipped while emerging. */}
{sg.caption || 'just now'}
{/* "Filed" toast appears once polaroid has landed. */}
filed to library
{sg.when}
⌕
{activeFilter ? (
{ setAlbumFilter(null); setMonthFilter(null); }}>
{activeFilter} ✕
) : (
<>
setShowAlbumSheet(true)}>by album
setShowMonthSheet(true)}>by month
)}
{filtered.length === 0 ? (
— no matches —
Try a different search or clear the filter.
) : (
{filtered.map((sg) => {
const M = window[sg.mock];
return (
{ setActive(sg); setScreen('detail'); }}>
);
})}
)}
{showAlbumSheet && (
({ id: a.id, label: a.title }))}
onPick={(id) => { setAlbumFilter(id); setMonthFilter(null); setShowAlbumSheet(false); }}
onClose={() => setShowAlbumSheet(false)} />
)}
{showMonthSheet && (
({ id: m, label: monthLabel(m) }))}
onPick={(id) => { setMonthFilter(id); setAlbumFilter(null); setShowMonthSheet(false); }}
onClose={() => setShowMonthSheet(false)} />
)}
);
}
function monthLabel(ym) {
if (!ym) return '';
const [y, m] = ym.split('-');
const names = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
return names[parseInt(m, 10) - 1] + ' ' + y;
}
function FilterSheet({ title, items, onPick, onClose }) {
return (
e.stopPropagation()}>
{title}
{items.map((it) => (
onPick(it.id)}>
{it.label}
))}
cancel
);
}
// ─── Screengram detail (replaces Volume detail) ───────────────────
function ScreengramDetail({ setScreen, active, setActive }) {
if (!active) {
useEffect(() => { setScreen('library'); }, []);
return null;
}
const M = window[active.mock] || window.MockSafari;
return (
setScreen('library')}>←
screengram
⋯
{active.caption}
when {active.when}
where {active.where}
filed private library
share
setScreen('reel-export')}>export reel
add to album
delete
);
}
// ─── Reel export sheet (animated reveal video) ────────────────────
function ReelExport({ setScreen, active }) {
const [t01, setT01] = useState(0); // reveal progress 0..1
useEffect(() => {
let raf;
const start = performance.now();
const tick = (now) => {
const dt = (now - start) / 1800;
setT01(Math.min(1, dt));
if (dt < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [active?.id]);
const M = window[active?.mock] || window.MockSafari;
return (
setScreen('detail')}>←
export reel
duration
1.8s reveal · 0.6s hold
size
1080 × 1920 · h.264
watermark
on
setT01(0)}>replay
save reel
);
}
// ─── Albums tab ───────────────────────────────────────────────────
function Albums({ setScreen, albums, library, setActive }) {
return (
{albums.length === 0 ? (
— no albums —
Create from any screengram's menu, or tap + above.
) : (
{albums.map((a) => {
const cover = library.find((sg) => sg.id === a.coverId) || library[0];
const M = cover ? window[cover.mock] : null;
return (
{ setActive({ ...a, items: a.items }); setScreen('album-detail'); }}>
{a.title}
{a.items.length} screengram{a.items.length === 1 ? '' : 's'}
›
);
})}
)}
);
}
function AlbumDetail({ setScreen, active, library, setActive }) {
if (!active) { useEffect(() => setScreen('albums'), []); return null; }
const items = library.filter((sg) => active.items.includes(sg.id));
return (
setScreen('albums')}>←
{active.title}
⋯
{items.map((sg) => {
const M = window[sg.mock];
return (
{ setActive(sg); setScreen('detail'); }}>
);
})}
);
}
// ─── Profile (simplified to match shipped) ────────────────────────
function Profile({ setScreen, library }) {
return (
S
Screengrammer
— private library —
{library.length}
screengrams
);
}
// ─── Settings (mirrors SettingsView.swift) ────────────────────────
function Settings({ setScreen }) {
const [freshMin, setFreshMin] = useState(10);
const [haptics, setHaptics] = useState(true);
const [useLatest, setUseLatest] = useState(true);
const [watermark, setWatermark] = useState(true);
return (
Freshness window
{freshMin} min
setFreshMin(parseInt(e.target.value))} />
how recent a screenshot must be to appear as "use latest".
setScreen('how-to-use')} />
setScreen('onboarding')}>
Replay onboarding
);
}
function SettingsGroup({ label, children }) {
return (
);
}
function ToggleRow({ title, sub, value, onChange }) {
return (
);
}
function LinkRow({ title, sub, onClick }) {
return (
›
);
}
function StaticRow({ k, v }) {
return (
);
}
// ─── How to use ──────────────────────────────────────────────────
function HowToUse({ setScreen }) {
const steps = [
['screenshot anything.',
'A recipe, a map, a tweet, a passage. iOS shows the thumbnail in the lower-left — leave it, do nothing.'],
['open screengram.',
'Home knows there\'s a fresh screenshot. Tap GO or the "use latest" hero. Camera opens with the screenshot floating in the viewfinder.'],
['frame the room.',
'Drag or pinch the screenshot anywhere on the viewfinder. Hit the shutter when the room behind it looks right.'],
['pick a layout, file it.',
'PiP, side-by-side, or stacked. Add a caption that floats on the photo. Save to your library.'],
['live in the library.',
'Search, filter by month, group into albums. Export a reveal reel and send the screengram anywhere.'],
];
return (
setScreen('settings')}>←
how to use
{steps.map(([h, b], i) => (
))}
);
}
// ─── 5-tab bottom bar (matches MainShell.swift) ───────────────────
function BottomTabs({ current, setScreen }) {
const Tab = ({ k, label, icon }) => (
setScreen(k)}>
{icon}
{label}
);
return (
);
}
// ─── Mount ─────────────────────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(