// Winkz Designs 2026, animated product mockups for the moving portfolio. // Each paints a self-contained fake UI with ambient looping animation. Sized to fill its parent. (function () { const { useState, useEffect, useRef } = React; const Icon = window.Icon; const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)'; const mono = 'var(--font-mono)'; // ── shared bits ── const Dot = ({ c = '#2DE3A0', s = 7 }) => ; const Bar = ({ w, c = 'rgba(255,255,255,0.16)', h = 7 }) => ; function useCycle(n, ms) { const [i, setI] = useState(0); useEffect(() => { const t = setInterval(() => setI(v => (v + 1) % n), ms); return () => clearInterval(t); }, [n, ms]); return i; } const shell = { position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#EEF' }; /* 1, E-COMMERCE STORE */ function EcommerceMock() { const cart = useCycle(4, 1400); const prods = [['#F23BFE', 'Aero Runner', '$128'], ['#79BAFF', 'Cloud Tee', '$42'], ['#2DE3EA', 'Trail Pack', '$96'], ['#FFC24B', 'Flux Cap', '$28']]; return (
NORTHWIND
{cart + 1}
New arrivals
{prods.map((p, i) => (
{p[1]}
{p[2]}
))}
); } /* 2, PLUMBING / LOCAL SERVICE SITE */ function PlumbingMock() { return (
RIVERSIDE PLUMBING 24/7
Emergency plumbing,
fixed fast.
Licensed & insured. Same-day service across the metro.
Book a visit Call now
{[['Star', '4.9', 'rating'], ['Clock', '<45m', 'arrival'], ['ShieldCheck', '10yr', 'warranty']].map((s, i) => (
{s[1]}
{s[2]}
))}
); } /* 3, CFO / FINANCE DASHBOARD (animated line chart) */ function CFOMock() { const [d, setD] = useState(0); const [ph, setPh] = useState(0); useEffect(() => { let f; const s = Date.now(); const loop = () => { const el = Date.now() - s; setD(1 - Math.pow(1 - Math.min(1, el / 1500), 3)); setPh(el / 1000); f = requestAnimationFrame(loop); }; f = requestAnimationFrame(loop); return () => cancelAnimationFrame(f); }, []); const base = [0.5, 0.46, 0.6, 0.55, 0.68, 0.63, 0.78, 0.9]; const W = 250, H = 74; const pts = base.map((v, i) => Math.max(0.06, Math.min(0.96, v + Math.sin(ph * 0.7 + i * 0.7) * 0.03))); const coords = pts.map((v, i) => `${((i / (pts.length - 1)) * W).toFixed(1)},${(H - v * H).toFixed(1)}`); return (
Cash overview
FY26 · Q3
{[['Cash on hand', '$1.84M', '#2DE3A0', '+12%'], ['Runway', '18 mo', '#79BAFF', '+3mo']].map((k, i) => (
{k[0]}
{k[1]}
{k[3]}
))}
{}
); } /* 4, CRM DASHBOARD (rich overview: KPIs, funnel, hot deals, live lead) */ function CRMDashboard() { const [on, setOn] = useState(false); const [lead, setLead] = useState(false); useEffect(() => { const t = setTimeout(() => setOn(true), 120); const l = setInterval(() => { setLead(true); setTimeout(() => setLead(false), 2200); }, 4200); return () => { clearTimeout(t); clearInterval(l); }; }, []); const stages = [['Leads', 0.95, '#79BAFF'], ['Qualified', 0.68, '#2DE3EA'], ['Proposal', 0.44, '#F23BFE'], ['Won', 0.27, '#2DE3A0']]; const deals = [['NV', 'Northwind Co.', '$48k', 'Proposal', '#F23BFE'], ['ME', 'Meridian LLC', '$32k', 'Qualified', '#2DE3EA']]; return (
Pipeline
this quarter
{/* KPIs */}
{[['Pipeline', '$284k', '#2DE3A0', '+12%'], ['Win rate', '32%', '#79BAFF', '+4pt'], ['New leads', '48', '#F23BFE', '7 today']].map((k, i) => (
{k[0]}
{k[1]}
{k[3]}
))}
{/* funnel */}
{stages.map((s, i) => (
{s[0]}
))}
{/* hot deals */}
{deals.map((d, i) => (
{d[0]} {d[1]} {d[3]} {d[2]}
))}
{/* live new-lead toast */}
new lead
); } /* 5, CRM PIPELINE */ function CRMMock() { const move = useCycle(3, 1500); const cols = [['New', '#79BAFF', 3], ['Qualified', '#F23BFE', 2], ['Won', '#2DE3A0', 2]]; return (
Deals
$284k open
{cols.map((c, ci) => (
{c[0]}
{Array.from({ length: c[2] }).map((_, k) => { const hot = ci === move && k === 0; return (
); })}
))}
); } /* 6, AI SUPPORT CHAT (typing) */ function ChatMock() { const [n, setN] = useState(0); const msgs = [ { me: true, t: "What's your return window?" }, { me: false, t: '30 days on unworn items, want me to start one?' }, { me: true, t: 'Yes, order #4821' }, { me: false, t: 'Done ✓ Label sent to your email.' }, ]; useEffect(() => { const t = setInterval(() => setN(v => (v >= msgs.length ? 0 : v + 1)), 1300); return () => clearInterval(t); }, []); return (
Support Assistant
online
{msgs.slice(0, n).map((m, i) => (
{m.t}
))} {n < msgs.length && (
{[0, 1, 2].map(d => )}
)}
); } /* 7, ANALYTICS DASHBOARD (smoothly breathing bars) */ function DashboardMock() { const base = [0.5, 0.72, 0.4, 0.86, 0.6, 0.95, 0.7]; const [on, setOn] = useState(false); const [ph, setPh] = useState(0); useEffect(() => { const t = setTimeout(() => setOn(true), 120); let f; const s = Date.now(); const loop = () => { setPh((Date.now() - s) / 1000); f = requestAnimationFrame(loop); }; f = requestAnimationFrame(loop); return () => { clearTimeout(t); cancelAnimationFrame(f); }; }, []); const bars = base.map((b, i) => Math.max(0.14, Math.min(1, b + Math.sin(ph * 0.9 + i * 0.6) * 0.06))); return (
Traffic & conversions
▲ 23.4%
{[['Visitors', '48.2k'], ['Signups', '3,104'], ['Rev', '$92k']].map((k, i) => (
{k[0]}
{k[1]}
))}
{bars.map((b, i) => (
))}
); } /* 8, AI VOICE AGENT (call + waveform + transcript) */ function VoiceAgentMock() { const [t, setT] = useState(0); useEffect(() => { let f; const s = Date.now(); const loop = () => { setT((Date.now() - s) / 1000); f = requestAnimationFrame(loop); }; f = requestAnimationFrame(loop); return () => cancelAnimationFrame(f); }, []); const bars = Array.from({ length: 22 }); const lines = [['caller', 'Hi, do you have any openings tomorrow?'], ['agent', 'We do, 9:30am or 2pm. Which works?'], ['caller', '2pm is perfect.'], ['agent', 'Booked ✓ You’ll get a text confirmation.']]; const shown = Math.min(lines.length, 1 + Math.floor((t % 8) / 1.6)); return (
AI Voice Agent
on a call · 00:{(12 + Math.floor(t % 48)).toString().padStart(2, '0')}
{bars.map((_, i) => { const h = 20 + Math.abs(Math.sin(t * 3 + i * 0.5)) * 78; return ; })}
{lines.slice(0, shown).map((l, i) => (
{l[1]}
))}
); } /* 9, COMMAND CENTER (distribution CRM dashboard, from a real build, anonymized) */ function CommandCenter() { const [on, setOn] = useState(false); useEffect(() => { const t = setTimeout(() => setOn(true), 140); return () => clearTimeout(t); }, []); const kpis = [['167', 'Total leads', '#79BAFF'], ['16', 'Sourced', '#F23BFE'], ['28', 'In talks', '#2DE3EA'], ['0', 'Follow-ups', '#2DE3A0']]; const C = 2 * Math.PI * 22; const segs = [['#B57BFF', 77], ['#3EA6FF', 27], ['#F23BFE', 4], ['#2DE3A0', 25], ['#4a4a58', 34]]; let acc = 0; return (
Command Center
DISTRIBUTION
↻ synced
{kpis.map((k, i) => (
{k[0]}
{k[1]}
))}
SOURCING ACTIVITY
{segs.map((s, i) => { const len = (s[1] / 167) * C; const el = ; acc += len; return el; })} 167
); } Object.assign(window, { EcommerceMock, PlumbingMock, CFOMock, CRMDashboard, CRMMock, ChatMock, DashboardMock, VoiceAgentMock, CommandCenter }); })();