// software-mockups.jsx — Software/App variant (fintech/productivity app) // PHASE 01 — DISCOVER: spec doc + persona cards function SwDiscoverMockup({ progress = 1 }) { return (
PRODUCT · DISCOVERY · v0.3
{/* Spec doc */}
SPEC · v0.3
Tally · weekly budget review
PROBLEM
Users check balances daily but abandon weekly reviews. Need a calmer ritual.
TARGET · WEEK 1
{['Sunday-evening review push', 'Category summary card', 'One-tap roll-forward'].map((t, i) => { const p = clamp(progress * 4 - 1 - i * 0.3, 0, 1); return (
{i < 2 && '✓'}
{t}
); })}
KPI
D7 retention ≥ 35% · NPS ≥ 42
{/* Persona cards */}
{[ { name: 'Priya · 29', role: 'Freelance designer', goal: 'See money fortnightly', friction: 'Dreads spreadsheets', tone: DH.moss600 }, { name: 'Jonas · 36', role: 'Engineer · two kids', goal: 'Stay on track quietly', friction: 'Noisy notifications', tone: DH.amber }, ].map((p, i) => { const pr = clamp(progress * 3 - i * 0.5 - 0.2, 0, 1); return (
{p.name}
{p.role}
§ 0{i + 1}
GOAL · {p.goal}
FRICTION · {p.friction}
); })}
); } // PHASE 02 — DESIGN: Figma screen flows (3-4 screens with arrows) function SwDesignMockup({ progress = 1 }) { const screens = [ { label: 'Onboarding', x: 60, y: 80 }, { label: 'Weekly recap', x: 320, y: 60 }, { label: 'Category detail', x: 580, y: 80 }, { label: 'Celebrate', x: 840, y: 60 }, ]; return (
{/* Fake figma chrome */}
{['#ff5f57','#febc2e','#28c840'].map((c, i) =>
)}
tally — userflow_v4.fig
Play flow ▸
{/* Arrows */} {[[200, 200, 310, 180], [470, 180, 580, 200], [720, 200, 830, 180]].map(([x1,y1,x2,y2], i) => { const p = clamp((progress - 0.3 - i * 0.15) * 4, 0, 1); return ( ); })} {screens.map((s, i) => { const p = clamp(progress * 3 - i * 0.35, 0, 1); return (
{/* Notch */}
{/* Content sketch */} {i === 0 && <>
Welcome
} {i === 1 && <>
WEEK 14
−€124
{[60, 42, 30, 20].map((w, j) =>
)} } {i === 2 && <>
GROCERIES
€312
} {i === 3 && <>
Nicely done.
}
{String(i+1).padStart(2,'0')} · {s.label}
); })}
); } // PHASE 03 — BUILD: IDE with live preview function SwBuildMockup({ progress = 1 }) { const codeLines = [ { i: 'import', c: 'import { View, Text } from "react-native";', color: '#6fa37a' }, { i: '', c: '' }, { i: 'export', c: 'export function WeeklyRecap({ week }) {', color: '#3f6b54' }, { i: 'const', c: ' const total = useTotal(week);', color: '#cd8a4b' }, { i: 'return', c: ' return (', color: '#3f6b54' }, { i: 'jsx', c: ' ', color: '#555' }, { i: 'jsx', c: ' WEEK {week}', color: '#555' }, { i: 'jsx', c: ' −€{total}', color: '#555' }, { i: 'jsx', c: ' ', color: '#555' }, { i: 'jsx', c: ' ', color: '#555' }, { i: '', c: ' );' }, { i: '', c: '}' }, ]; return (
{/* Title bar */}
{['#ff5f57','#febc2e','#28c840'].map((c, i) =>
)}
tally — WeeklyRecap.tsx
▶ Run● Build · passed
{/* Explorer */}
TALLY / SRC
{['App.tsx', 'screens/', ' Home.tsx', ' WeeklyRecap.tsx', ' Category.tsx', 'components/', ' Sparkline.tsx', ' Card.tsx'].map((f, i) => (
{f}
))}
{/* Editor */}
{codeLines.map((l, i) => { const p = clamp(progress * 4 - i * 0.15, 0, 1); return (
{i+1}
{l.c}
); })}
Metro bundler · Ready in 412ms
{/* iPhone preview */}
WEEK 14
−€124
Under budget.
{['Groceries', 'Transport', 'Leisure'].map((c, i) => (
{c} €{[42, 28, 54][i]}
))}
Roll forward →
); } // PHASE 04 — LAUNCH: iPhone mockup of shipped app home screen function SwLaunchMockup({ progress = 1 }) { const time = useTime(); return (
{/* Shipped badge top */}
LIVE ON APP STORE · v1.0
{/* App name + tagline */}
§ LAUNCHED · day 42
Tally
a quieter budget.
Spend well, check in weekly. No charts that shout.
Download on the
App Store
▶
Get it on
Google Play
{/* iPhone mockup */}
{/* Notch */}
9:41 ● ● ●
WEEK 14 · SUNDAY
−€124
under budget.
{[ ['Groceries', '€312', '−8%'], ['Transport', '€88', '−22%'], ['Leisure', '€134', '+4%'], ].map(([c, v, d], i) => { const p = clamp(progress * 3 - i * 0.25 - 0.2, 0, 1); return (
{c}
{v} {d}
); })}
Roll forward to Week 15 →
{/* Home indicator */}
{/* Background glow behind phone */}
); } // PHASE 05 — OPTIMIZE: retention cohorts + DAU chart function SwOptimizeMockup({ progress = 1 }) { const dau = [140, 155, 170, 165, 188, 210, 225, 240, 260, 255, 280, 300]; // Cohort grid const cohorts = [ [100, 78, 62, 52, 46, 42], [100, 72, 58, 48, 40, 38], [100, 82, 68, 58, 50, 46], [100, 88, 72, 64, 58, 52], [100, 90, 78, 70, 62, 56], ]; return (
TALLY · RETENTION · COHORTS
Health · last 5 weeks
DAU
18,420 ↑ 32%
D7
38% ↑ 16pp
{/* Cohort grid */}
COHORT · RETENTION %
{['W0','W1','W2','W3','W4','W5'].map(w =>
{w}
)} {cohorts.map((row, i) => (
Cohort {i+1}
{row.map((v, j) => { const p = clamp(progress * 3 - (i * 0.1 + j * 0.06), 0, 1); const intensity = v / 100; return (
0.55 ? '#fff' : DH.ink, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: p, transform: `scale(${0.9 + 0.1*p})`, fontFamily: DH.mono, }}> {v}
); })} ))}
{/* DAU chart */}
DAU · LAST 12 WEEKS
18,420 ↑ 32%
{[0, 100, 200, 300].map(g => )} { const x = (i / (dau.length - 1)) * 290 + 5; const y = 135 - (v / 320) * 115; return `${i === 0 ? 'M' : 'L'}${x},${y}`; }).join(' ')} stroke={DH.moss600} strokeWidth="2" fill="none" strokeDasharray="500" strokeDashoffset={(1 - clamp(progress * 1.5, 0, 1)) * 500}/> { const x = (i / (dau.length - 1)) * 290 + 5; const y = 135 - (v / 320) * 115; return `${i === 0 ? 'M' : 'L'}${x},${y}`; }).join(' ') + ' L295,140 L5,140 Z'} fill={DH.moss500} fillOpacity={0.15 * clamp(progress * 2, 0, 1)}/> {progress > 0.85 && ( )}
); } // A/B mockups for software — two app screens function SwABMockupA() { return (
Good evening, user
€2,140
Balance · all accounts
{[0,1,2,3,4].map(i => (
Transaction {i+1} −€{[12, 48, 22, 86, 34][i]}
))}
); } function SwABMockupB() { const time = useTime(); return (
WEEK 14 · SUNDAY
−€124
under budget.
{[ ['Groceries', '€312', '−8%'], ['Transport', '€88', '−22%'], ['Leisure', '€134', '+4%'], ].map(([c, v, d], i) => (
{c}
{v} {d}
))}
Roll forward →
ON TRACK
); } Object.assign(window, { SwDiscoverMockup, SwDesignMockup, SwBuildMockup, SwLaunchMockup, SwOptimizeMockup, SwABMockupA, SwABMockupB });