// web-mockups.jsx — Web variant, timeline-sequenced mockups // Each phase lasts 4s (16s total across 5 phases) with sub-events scheduled // inside. Elements appear in order and STAY — true timeline choreography. // ═══════════════════════════════════════════════════════════════════════════ // PHASE 01 — DISCOVER: sticky notes pinned to a corkboard, one by one // ═══════════════════════════════════════════════════════════════════════════ function WebDiscoverMockup({ localTime = 0, duration = 4 }) { const notes = [ { t: 0.2, x: 50, y: 120, rot: -3, color: '#f4d9a0', head: '§01', text: 'Target:\nfounder-led\nB2B studios' }, { t: 0.8, x: 260, y: 90, rot: 2, color: '#e8f0d9', head: '§02', text: 'Hero:\nhigh-contrast\neditorial' }, { t: 1.4, x: 470, y: 130, rot: -2, color: '#f5c9b3', head: '§03', text: '3-click\ncontact\nflow' }, { t: 2.0, x: 70, y: 330, rot: 1.5, color: '#e8f0d9', head: '§04', text: 'Case studies\n→ proof' }, { t: 2.4, x: 300, y: 360, rot: -1, color: '#f4d9a0', head: '§05', text: 'Book call\n= primary CTA' }, ]; // Arrows appear after their two notes exist const arrows = [ { t: 2.8, d: 'M180,180 Q240,140 320,160' }, { t: 3.1, d: 'M400,180 Q460,130 530,160' }, { t: 3.4, d: 'M170,380 Q240,410 320,400' }, ]; // Persona card lands late const tPersona = 3.2; return (
RESEARCH BOARD · user_flow_v3.fig
{/* Arrows */} {arrows.map((a, i) => { const p = clamp((localTime - a.t) / 0.5, 0, 1); return ( ); })} {notes.map((n, i) => { const p = clamp((localTime - n.t) / 0.35, 0, 1); const ease = Easing.easeOutCubic(p); return (
{n.head}
{n.text} {/* pin */}
); })}
{/* Persona card */} {localTime >= tPersona - 0.1 && (() => { const p = clamp((localTime - tPersona) / 0.5, 0, 1); const ease = Easing.easeOutCubic(p); return (
PERSONA · 01
Maya · 34
Founder, venture studio
GOAL · Credibility in 2 weeks
FRICTION · Generic agency sites
); })()} {/* Status strip at bottom */}
● notes: {notes.filter(n => localTime >= n.t).length}/5 pinned
); } // ═══════════════════════════════════════════════════════════════════════════ // PHASE 02 — DESIGN: wireframe on left, wipe reveals hi-fi on right // The seam moves left→right across the phase, revealing the polished version // ═══════════════════════════════════════════════════════════════════════════ function WebDesignMockup({ localTime = 0, duration = 4 }) { // Wipe travels from 100% (all wireframe) to 0% (all hi-fi) between t=1.0 and t=3.2 const wipeP = clamp((localTime - 1.0) / 2.2, 0, 1); const wireframeWidth = (1 - Easing.easeInOutCubic(wipeP)) * 100; // % of viewport covered by wireframe // Annotation dot appears, cursor clicks CTA const tAnnot = 0.6; const tStamp = 3.4; return (
{/* Figma chrome */}
{['#ff5f57','#febc2e','#28c840'].map((c, i) =>
)}
digital_heroes — hero-v4.fig
DesignPrototypeInspect
{/* Hi-fi bottom layer (always there) */}
HI-FI · v2.0
digital.HEROES
WorkServicesAbout
Contact
Sites that
ship.
Editorial-grade marketing pages, delivered on a clear schedule.
Start a project →
View work
{/* Accent orb */}
{/* Wireframe top layer — fills the frame but is clipped so that only the RIGHT portion is visible. As the wipe progresses, the left edge of the visible wireframe moves rightward, revealing the hi-fi underneath from the left. Content inside stays anchored so it isn't "pushed" right. */}
WIREFRAME · v0.3
{/* Nav */}
{[0,1,2].map(i =>
)}
{/* Annotation ping */} {localTime >= tAnnot && (
more contrast here
)}
{/* Seam cursor — sits at the seam between hi-fi (left) and wireframe (right) */} {wipeP > 0 && wipeP < 1 && (
→
)} {/* "Approved" stamp at end */} {localTime >= tStamp && (() => { const p = clamp((localTime - tStamp) / 0.4, 0, 1); return (
§ APPROVED
); })()}
); } // ═══════════════════════════════════════════════════════════════════════════ // PHASE 03 — BUILD: Storybook tiles appear in order, build progress bar fills // ═══════════════════════════════════════════════════════════════════════════ function WebBuildMockup({ localTime = 0, duration = 4 }) { const tiles = [ { type: 'heading', label: 'Display / XL', t: 0.3 }, { type: 'heading-s', label: 'Display / M', t: 0.5 }, { type: 'btn-primary', label: 'Button / Primary', t: 0.7 }, { type: 'btn-ghost', label: 'Button / Ghost', t: 0.9 }, { type: 'chip', label: 'Chip', t: 1.1 }, { type: 'card', label: 'Card / Work', t: 1.3 }, { type: 'swatch', label: 'Color / Moss', t: 1.5 }, { type: 'swatch-amber', label: 'Color / Amber', t: 1.7 }, { type: 'input', label: 'Input / Text', t: 1.9 }, { type: 'badge', label: 'Badge / Live', t: 2.1 }, { type: 'divider', label: 'Rule · 1px', t: 2.3 }, { type: 'avatar', label: 'Avatar · 48', t: 2.5 }, ]; const buildDone = 2.9; const built = tiles.filter(t => localTime >= t.t).length; const percent = Math.min(100, Math.round((built / tiles.length) * 100)); return (
storybook · 4.2
{[ { n: 'Foundations', c: 8 }, { n: 'Typography', c: 6, active: true }, { n: 'Buttons', c: 4 }, { n: 'Cards', c: 5 }, { n: 'Forms', c: 7 }, { n: 'Nav', c: 3 }, ].map((item, i) => (
{item.n} {item.c}
))}
{/* Build progress bar */}
BUILD · {built}/{tiles.length} COMPONENTS
{percent}%
{localTime >= buildDone && (
✓ PASSED
)}
{tiles.map((t, i) => { const p = clamp((localTime - t.t) / 0.25, 0, 1); const ease = Easing.easeOutCubic(p); return (
{renderTile(t.type)}
{t.label}
{/* green check */} {localTime - t.t > 0.4 && (
✓
)}
); })}
); } function renderTile(type) { switch (type) { case 'heading': return
Aa
; case 'heading-s': return
Aa
; case 'btn-primary': return
Start →
; case 'btn-ghost': return
View
; case 'chip': return
§ LIVE
; case 'card': return
; case 'swatch': return
; case 'swatch-amber': return
; case 'input': return
hello@…
; case 'badge': return
LIVE
; case 'divider': return
; case 'avatar': return
; default: return null; } } // ═══════════════════════════════════════════════════════════════════════════ // PHASE 04 — LAUNCH: marketing page builds — nav → H1 → body → CTA → deploy // ═══════════════════════════════════════════════════════════════════════════ function WebLaunchMockup({ localTime = 0, duration = 4 }) { const time = useTime(); const T_NAV = 0.2, T_H1_A = 0.5, T_H1_B = 0.9, T_BODY = 1.3, T_CTA = 1.7, T_VIS = 2.1, T_DEPLOY = 2.6, T_SHIPPED = 3.2; // cursor path: (1380, 560) -> sits near CTA then clicks const cursorOn = Math.floor(time * 2) % 2 === 0; return (
{/* Nav */}
digital.HEROES
WorkServicesStudioJournal
Book a call →
{/* Hero */}
§ READY FOR LAUNCH · MISSION · BRAND GROWTH
Sites that
ship.
We craft tailored digital experiences — design, development, growth — delivered on a clear schedule.
Start launch sequence → {/* Cursor blinking + click ripple after shipping */} {localTime > T_SHIPPED + 0.1 && (
)}
View work
{/* Right visual block */}
2,000+ BRANDS
build your next
big thing
55+ COUNTRIES
{/* Deploy terminal strip appears near end */} {localTime >= T_DEPLOY && (() => { const p = clamp((localTime - T_DEPLOY) / 0.6, 0, 1); const lines = [ { t: T_DEPLOY, txt: '$ vercel --prod' }, { t: T_DEPLOY + 0.3, txt: 'Building... ✓' }, { t: T_DEPLOY + 0.55, txt: 'Deploying... ✓' }, { t: T_SHIPPED, txt: '✓ Live at digitalheroes.com' }, ]; return (
{lines.filter(l => localTime >= l.t).map((l, i) => (
{l.txt}
))}
); })()} {/* SHIPPED chip */} {localTime >= T_SHIPPED && (
SHIPPED · v1.0
)}
); } // ═══════════════════════════════════════════════════════════════════════════ // PHASE 05 — OPTIMIZE: funnel fills sequentially, chart draws, metric ticks up // ═══════════════════════════════════════════════════════════════════════════ function WebOptimizeMockup({ localTime = 0, duration = 4 }) { const funnel = [ { label: 'Visitors', v: 48240, w: 100, t: 0.3, color: DH.moss500 }, { label: 'Engaged', v: 19870, w: 72, t: 0.8, color: DH.moss500 }, { label: 'Signups', v: 2140, w: 48, t: 1.3, color: DH.moss600 }, { label: 'Activated', v: 1370, w: 32, t: 1.8, color: DH.moss700 }, ]; const T_CHART = 1.2, T_CHART_DONE = 2.6, T_METRIC = 2.8, T_ANNOT = 3.4; const chartPts = [[0,58],[1,55],[2,48],[3,50],[4,42],[5,38],[6,30],[7,32],[8,26],[9,20],[10,18],[11,12]]; const maxX = 11, maxY = 60; const chartProg = clamp((localTime - T_CHART) / (T_CHART_DONE - T_CHART), 0, 1); const metricProg = clamp((localTime - T_METRIC) / 0.8, 0, 1); return (
FUNNEL · LAST 30 DAYS
Lifecycle overview
{['7d', '30d', '90d'].map((r, i) => (
{r}
))}
{/* Funnel */}
{funnel.map((f, i) => { const p = clamp((localTime - f.t) / 0.6, 0, 1); const w = Easing.easeOutCubic(p) * f.w; return (
{f.label} {Math.round(f.v * p).toLocaleString()}
); })}
ACTIVATION · RATE
{(2.84 * Easing.easeOutCubic(metricProg)).toFixed(2)}% {localTime >= T_METRIC + 0.6 && ↑ 1.60}
{/* Chart */}
BOUNCE · TREND
{(18.4 + (1 - chartProg) * 12).toFixed(1)}% {chartProg >= 0.99 && ↓ 12}
{[0, 20, 40, 60].map(g => )} { const px = (x / maxX) * 310 + 5; const py = 125 - (y / maxY) * 105; return `${i === 0 ? 'M' : 'L'}${px},${py}`; }).join(' ')} stroke={DH.moss600} strokeWidth="2.5" fill="none" strokeDasharray="500" strokeDashoffset={(1 - chartProg) * 500} /> { const px = (x / maxX) * 310 + 5; const py = 125 - (y / maxY) * 105; return `${i === 0 ? 'M' : 'L'}${px},${py}`; }).join(' ') + ` L315,125 L5,125 Z`} fill={DH.moss500} fillOpacity={0.14 * chartProg} /> {chartProg >= 1 && ( )} {/* Annotation callout */} {localTime >= T_ANNOT && (() => { const p = clamp((localTime - T_ANNOT) / 0.5, 0, 1); return (
↓ New hero shipped · wk 3
); })()}
); } Object.assign(window, { WebDiscoverMockup, WebDesignMockup, WebBuildMockup, WebLaunchMockup, WebOptimizeMockup, });