Data phase diagram

/* global React */ const { useState, useEffect, useRef } = React; // ===== Playbook (4 phases) — light, embossed visual language ===== // Shared SVG defs: soft drop shadow + blue glow filters for embossed-card feel. function SvgDefs({ id }) { return ( ); } // Reusable embossed pad (white card with LED + label inside it) function SvgPad({ x, y, w = 120, h = 30, label, lit = true, padId }) { return ( {lit && } {label} ); } function StepVisual({ kind, isActive }) { // 01 DATA — three input pads merge to STYLE GUIDE pad if (kind === 'data') { return ( ); } // 02 SYNTHESIS — 5 concept pads fan into 5×10 matrix; winners glow if (kind === 'synthesis') { const winners = new Set([4, 17, 23, 31, 42]); return ( ); } // 03 PRODUCTION — 4 source pads → engine ring → blue "50" output if (kind === 'production') { return ( ); } // 04 LOOP — Run N pad → curved feedback → Run N+1 pad. Right: exploit/explore split if (kind === 'loop') { return ( ); } return null; } // ===== Step card with reveal + hover ===== function StepCard({ step, index }) { const ref = useRef(null); const [revealed, setRevealed] = useState(false); const [hover, setHover] = useState(false); useEffect(() => { if (!ref.current) return; if (typeof IntersectionObserver === 'undefined') { setRevealed(true); return; } const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setRevealed(true); io.disconnect(); } }, { threshold: 0.4 } ); io.observe(ref.current); return () => io.disconnect(); }, []); return (

{step.title}

{step.body}

); } function Loop() { const steps = [ { num: '01', kind: 'data', title: 'Data', body: 'Your winners go in. So does the competitive landscape. Hooks, pacing, the beats that actually converted. Velo distills it into a living style guide that compounds every run.', }, { num: '02', kind: 'synthesis', title: 'Synthesis', body: 'Most concepts variations what\u2019s already winning. The rest stress test fresh territory. Each one fans across hook, voice, persona, and style into a concept matrix. Human gate before a single pixel renders.', }, { num: '03', kind: 'production', title: 'Production', body: 'Asset streams render in parallel. Gameplay capture. AI voice. AI persona on camera. Motion graphics. A sample drops first, the batch follows. Always-on output, ready to push live.', }, { num: '04', kind: 'loop', title: 'Loop', body: 'KPIs come back tagged by axis. The next run leans into what won, with room for what the winners never tried. Every cycle carries more signal than the last. Sharper every loop.', }, ]; return (

Mechanism

Four phases. One loop. Sharper every run.

Data feeds Synthesis. Synthesis feeds Production. Production feeds the Loop. The Loop feeds Data, sharper than before. Markets shift. Hooks fatigue. Velo finds the next winner before the current one burns out.

{steps.map((s, i) => ( ))}

); } // ===== Mechanism diagram (inlined, scroll-tied) ===== const MECH_INPUTS = [ 'Your Assets', 'KPI targets', 'Current winner', 'Competitor winners', 'New trends', ]; const MECH_OUT_CELLS = (() => { // 5 rows × 13 cols. The mid cell of row 3 is the swan. const cells = []; const palette = ['dim', 'lit', '', 'dim', 'lit', '', 'dim', 'lit', '', 'dim', 'lit', '', 'dim']; for (let r = 0; r < 5; r++) { for (let c = 0; c < 13; c++) { if (r === 2 && c === 4) { cells.push('swan'); continue; } const i = (r * 13 + c) % palette.length; cells.push(palette[i]); } } return cells; })(); function MechanismDiagram() { const wrapRef = useRef(null); const stageInnerRef = useRef(null); const fieldRef = useRef(null); const inputsRef = useRef(null); const engineRef = useRef(null); useEffect(() => { const wrap = wrapRef.current; const stageInner = stageInnerRef.current; const field = fieldRef.current; const inputs = inputsRef.current; const engine = engineRef.current; if (!wrap || !stageInner || !field || !engine) return; const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const TWEAKS = { count: 51, videoShare: 60, playableShare: 20, imageShare: 20 }; const ICO = { video: '', image: '', playable: '' }; const TAG = { video: 'VID', image: 'IMG', playable: 'PLAY' }; const srand = (i, s) => ((Math.sin(i * s) + 1) * 0.5); const seededType = (i, tw) => { const total = Math.max(1, tw.videoShare + tw.playableShare + tw.imageShare); const r = ((Math.sin(i * 91.13) + 1) * 0.5) * total; if (r < tw.videoShare) return 'video'; if (r < tw.videoShare + tw.playableShare) return 'playable'; return 'image'; }; function render() { field.innerHTML = ''; const fieldRect = field.getBoundingClientRect(); const er = engine.getBoundingClientRect(); const cx = er.left + er.width / 2 - fieldRect.left; const cy = er.top + er.height / 2 - fieldRect.top; const w = fieldRect.width, h = fieldRect.height; const N = TWEAKS.count; const isMobile = window.innerWidth <= 1100; // Desktop: scatter scales with width so creatives reach into the right // margin past the out-card. Mobile keeps the tighter min-based fan. const rMax = isMobile ? Math.min(w, h) * 0.62 : Math.max(w, h) * 0.46; const LANES = [-55, -30, -15, 25, 50].map(d => (isMobile ? d + 90 : d) * Math.PI / 180); for (let i = 0; i < N; i++) { const laneI = i % LANES.length; const laneIdx = Math.floor(i / LANES.length); const laneN = Math.ceil(N / LANES.length); const lt = (laneIdx + 0.5) / laneN; const theta = LANES[laneI]; const engR = 100; const dist = (rMax * 2 - engR) * Math.pow(lt, 0.95) + (srand(i, 17.3) - 0.5) * 14; const ox = cx + Math.cos(theta) * engR; const oy = cy + Math.sin(theta) * engR * 0.92; const perp = (srand(i, 31.1) - 0.5) * 38; const px = -Math.sin(theta) * perp; const py = Math.cos(theta) * perp; const x = ox + Math.cos(theta) * dist + px; const y = oy + Math.sin(theta) * dist * 0.92 + py; const size = 1 - Math.pow(lt, 1.1); const W = 28 + size * 28; const H = W * 1.7; const opacity = 0.32 + size * 0.65; const type = seededType(i + 100, TWEAKS); const lit = (i % 9 === 2 && size > 0.55); const showTag = size > 0.45; const el = document.createElement('div'); el.className = 'ft' + (lit ? ' lit' : ''); el.style.left = (cx - W / 2) + 'px'; el.style.top = (cy - H / 2) + 'px'; el.style.width = W + 'px'; el.style.height = H + 'px'; el.style.zIndex = String(Math.round(size * 100)); el.style.setProperty('--fop', opacity.toFixed(2)); el.style.setProperty('--rot', ((srand(i, 11.7) - 0.5) * 14).toFixed(1) + 'deg'); el.style.setProperty('--dx', (x - cx).toFixed(1) + 'px'); el.style.setProperty('--dy', (y - cy).toFixed(1) + 'px'); const isz = (10 + size * 10); let inner = '' + ICO[type] + ''; if (showTag) inner = '' + TAG[type] + '' + inner; el.innerHTML = inner; field.appendChild(el); } } function sizeEngine() { if (!inputs || !engine) return; const h = inputs.offsetHeight; if (h > 0) { engine.style.width = h + 'px'; engine.style.height = h + 'px'; } } function measureGaps() { const pad = stageInner.querySelector('.pad'); if (!pad || !engine) return; const padR = pad.getBoundingClientRect(); const engR = engine.getBoundingClientRect(); const gap1 = Math.max(0, engR.left - padR.right); stageInner.style.setProperty('--gap1', gap1.toFixed(1) + 'px'); } let raf = null; function update() { if (reduceMotion) { stageInner.style.setProperty('--p1', '1'); stageInner.style.setProperty('--p2', '1'); stageInner.style.setProperty('--pCard', '1'); return; } // Map the diagram's position-in-viewport to t ∈ [0, 1]: // t = 0 when the element's top hits viewport bottom (just entering) // t = 1 when the element's bottom hits viewport top (leaving) const r = stageInner.getBoundingClientRect(); const vh = window.innerHeight; const total = r.height + vh; const traveled = vh - r.top; // Same entry trigger, but 3× faster — reach final state after ~1/3 of the // scroll range, so the animation finishes well before the diagram leaves. const raw = total > 0 ? traveled / total : 0; const t = Math.max(0, Math.min(1, raw * 3)); const p1 = Math.max(0, Math.min(1, t / 0.5)); const p2 = Math.max(0, Math.min(1, (t - 0.4) / 0.6)); const pCard = Math.max(0, Math.min(1, (t - 0.55) / 0.45)); stageInner.style.setProperty('--p1', p1.toFixed(3)); stageInner.style.setProperty('--p2', p2.toFixed(3)); stageInner.style.setProperty('--pCard', pCard.toFixed(3)); raf = null; } function onScroll() { if (!raf) raf = requestAnimationFrame(update); } let resizeTimer; function onResize() { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { sizeEngine(); measureGaps(); render(); update(); }, 120); } sizeEngine(); measureGaps(); render(); update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); clearTimeout(resizeTimer); if (raf) cancelAnimationFrame(raf); }; }, []); return (

{MECH_INPUTS.map(label => (

{label}

))}

and +12 more

Synth + Render

Velo engine

Most are mid. One breaks the pattern.

black swan creative

); } // ===== Case study ===== function CaseStudy() { return (

Case study

A puzzle studio, one run, fifty ads.

Mid-size publisher running a Match-3 title. ~$420k/mo on AppLovin and Unity. One Velo run delivered fifty ads in under four hours, and performance fed the next run two weeks later.

IPM lift

+47%

Top-quartile creatives only, weighted by spend.

CPI

−22%

Blended across AppLovin and Unity, US/UK/CA.

Ads per run

8→50

Same UA team, same creative budget.

Run cycle time

3wk→4h

Brief to delivered MP4s, gates included.

"We were shipping eight concepts a week and calling it 'velocity.' Velo gets us fifty per run with the same team, and the loser-kill is the part that actually moved CPI."

M·K

Head of UA, Top-50 publisher

Pilot, Q1 2026 · name on request

); } // ===== CTA ===== function CTA() { return (

Stop shipping in drips. Start shipping in runs.

Request access →

); } // ===== Footer ===== function Footer({ logo = 'arrow' }) { return ( ); } window.Loop = Loop; window.CaseStudy = CaseStudy; window.CTA = CTA; window.Footer = Footer;