{/* Header strip — also the animation trigger (observed via triggerRef so the tile stagger only fires once this element scrolls into view). */}

{/* Batch label — clickable trigger with chevron, opens dropdown */}

{open && }

{/* Grid */}

{Array.from({ length: AT_SCALE_TILES }, (_, i) => { const src = sources[i] || sources[i % sources.length]; const isVisible = !fadingOut && i < revealed; // On desktop: 4 cols, so SKU label sits on every 4th tile (start of each row). // On mobile: 2 cols, so we still tag the first tile of every SKU group (every 4th in source order). const isRowStart = i % AT_SCALE_COLS === 0; const skuNum = String(skuStart + Math.floor(i / AT_SCALE_COLS)).padStart(4, '0'); return (

isVisible && setLightbox(src)} role="button" tabIndex={isVisible ? 0 : -1} aria-label="Open larger preview" onKeyDown={(e) => {if (isVisible && (e.key === 'Enter' || e.key === ' ')) {e.preventDefault();setLightbox(src);}}} style={{ position: 'relative', aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--bone)', cursor: isVisible ? 'zoom-in' : 'default', opacity: isVisible ? 1 : 0, transform: isVisible ? 'translateY(0) scale(1)' : 'translateY(6px) scale(0.98)', transition: fadingOut ? `opacity ${AT_SCALE_FADEOUT}ms ease-in-out, transform ${AT_SCALE_FADEOUT}ms ease-in-out` : `opacity ${AT_SCALE_FADE}ms cubic-bezier(0.16, 1, 0.3, 1), transform ${AT_SCALE_FADE}ms cubic-bezier(0.16, 1, 0.3, 1)` }}> {frameAlt(src)}

{e.currentTarget.style.transform = 'scale(1.05)';}} onMouseLeave={(e) => {e.currentTarget.style.transform = 'scale(1)';}} /> {isRowStart && SKU · {skuNum} }

); })}

{/* Footer strip */}

{counter.toLocaleString()} / {AT_SCALE_TILES} frames shown Failed frames automatically reprocessed · No credits charged on errors {onReplay && }

{/* Lightbox — larger preview of a clicked tile */} {lightbox &&

setLightbox(null)} role="dialog" aria-modal="true" aria-label="Image preview" style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(10,10,10,0.86)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(24px, 5vw, 64px)', animation: 'atscale-lightbox-in 200ms var(--ease-standard)', cursor: 'zoom-out' }}> {frameAlt(lightbox)}

e.stopPropagation()} style={{ maxWidth: 'min(880px, 100%)', maxHeight: '100%', objectFit: 'contain', display: 'block', boxShadow: '0 24px 80px rgba(0,0,0,0.5)', cursor: 'default' }} />

}

); } window.AtScaleGrid = AtScaleGrid; function BatchHeader() { return (

Batch upload

From one product. To one thousand.

Batch upload turns a 1000-SKU shoot list into a single overnight job. Here’s how it works, from upload to organised export.

); } function BatchStep({ step, index }) { const { isMobile, isTablet } = useBreakpoint(); const imageRight = index % 2 === 0; // 01,03 image right; 02,04 image left const num = String(index + 1).padStart(2, '0'); const bg = index % 2 === 0 ? 'var(--paper)' : 'var(--canvas)'; const text =

{step.badge}

{step.headLead}
{step.headEm}

{step.body}

; const figure =

{/* Top-left badge — vertically aligned with the titlebar's right-side "ViZO · 01" label */}

{step.badge}

; return (

{isMobile ? <>{figure}{text} : imageRight ? <>{text}{figure} : <>{figure}{text}}

); } /* Final summary — stats strip + closing links, in its own section to mirror page rhythm. */ function BatchSummary() { return (

); } window.BatchSummary = BatchSummary; /* ---------- Inline UI mocks ---------- Editorial, monochrome, hint-of-brand. Built with CSS so they scale and read cleanly. */ function BatchMock({ kind, num }) { const shell = { background: 'var(--paper)', border: '1px solid var(--mist)', borderRadius: 10, overflow: 'hidden', position: 'relative', boxShadow: '0 12px 32px rgba(0,0,0,0.05)' }; const titlebar = (label) =>

{label} ViZO · {num}

; if (kind === 'tag') { const thumbs = [ 'assets/sku-ivory-front.png', 'assets/sku-ivory-detail.png', 'assets/sku-ivory-back.png', 'assets/sku-pink-front.png', 'assets/sku-pink-detail.png', 'assets/sku-pink-back.png']; return (

{titlebar('Tag')}

{thumbs.map((src, i) =>

)}

Selected

); } if (kind === 'upload') { return (

{titlebar('')}

Drop CSV + image set

up to 5,000 SKUs

Queue ready

); } if (kind === 'brief') { const models = ['assets/model-portrait-tshirt.png', 'assets/hero-model-chair.jpg', 'assets/hero-model-garden.png']; const envs = ['assets/environment-south-france.jpeg', 'assets/editorial-pink-curtains.jpg', 'assets/output-flyer-dress-courtyard.png']; return (

{titlebar('Brief')}

Brief · SS26 drop 02

Mediterranean garden, late afternoon, warm low light. Cast model two: relaxed pose, leaning, half-smile. Apply to every front-view SKU in the batch.

); } if (kind === 'export') { const tree = [ { sku: 'SS26-024', expanded: true, views: ['front', 'back', 'side', 'detail'] }, { sku: 'SS26-025', expanded: false }, { sku: 'SS26-026', expanded: false }, { sku: 'SS26-027', expanded: false }]; const previews = [ 'assets/hero-model-chair.jpg', 'assets/editorial-black-dress-red.jpg', 'assets/hero-model-garden.png', 'assets/output-flyer-dress-courtyard.png', 'assets/beauty-blue-shadow.jpg', 'assets/editorial-pink-curtains.jpg']; return (

{titlebar('Export')}

{tree.map((row, i) =>

{row.expanded ? '▾' : '▸'} {row.sku}/

{row.expanded && row.views &&

{row.views.map((v) =>

{v}.jpg

)}

}

)}

{previews.map((src, i) =>

)}

); } return null; } function Field({ label, value, dropdown }) { return (

{value &&

{label}

}

{value || label} {dropdown && ▾}

); } function SummaryRow({ label, value, tone }) { const dot = tone === 'ok' ? 'var(--accent-amber)' : tone === 'warn' ? '#C77E2E' : 'var(--slate)'; return (

{label} {value}

); } function ThumbRow({ label, srcs, activeIdx = 0 }) { return (

{label}

{srcs.map((src, i) =>

)}

); } function BatchSpecs() { const { isMobile } = useBreakpoint(); const ref = React.useRef(null); const playedRef = React.useRef(false); const [counter, setCounter] = React.useState(0); const [show50, setShow50] = React.useState(false); const [show24, setShow24] = React.useState(false); const [pulseOn, setPulseOn] = React.useState(false); const [showLabel0, setShowLabel0] = React.useState(false); const [showLabel1, setShowLabel1] = React.useState(false); const [showLabel2, setShowLabel2] = React.useState(false); const timeoutsRef = React.useRef([]); const rafRef = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const reduceMotion = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const startAnimation = () => { if (reduceMotion) { setCounter(1000); setShow50(true); setShow24(true); setPulseOn(false); setShowLabel0(true); setShowLabel1(true); setShowLabel2(true); return; } const t0 = performance.now(); const duration = 1200; const easeOut = (t) => 1 - Math.pow(1 - t, 3); const tick = (now) => { const t = Math.min(1, (now - t0) / duration); const value = Math.round(easeOut(t) * 1000); setCounter(value); if (t < 1) { rafRef.current = requestAnimationFrame(tick); } else { rafRef.current = null; } }; rafRef.current = requestAnimationFrame(tick); timeoutsRef.current.push(setTimeout(() => setShow50(true), 200)); timeoutsRef.current.push(setTimeout(() => setShow24(true), 400)); timeoutsRef.current.push(setTimeout(() => setShowLabel1(true), 800)); timeoutsRef.current.push(setTimeout(() => setShowLabel2(true), 1000)); timeoutsRef.current.push(setTimeout(() => setShowLabel0(true), 1200)); timeoutsRef.current.push(setTimeout(() => setPulseOn(true), 1000)); }; const io = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting && !playedRef.current) { playedRef.current = true; startAnimation(); io.disconnect(); break; } } }, { threshold: 0.3 }); io.observe(el); return () => { io.disconnect(); // Don't kill in-flight timeouts / rAF on cleanup — only the parent unmount should stop them. }; }, []); // Separate cleanup that only fires on true unmount. React.useEffect(() => () => { timeoutsRef.current.forEach((id) => clearTimeout(id)); timeoutsRef.current = []; if (rafRef.current != null) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } }, []); /* Shared number style — tabular figures + nowrap so "~24 hrs" never breaks. Font-size clamp upper bound is tuned so the longest stat fits one line at the narrowest desktop column width. */ const numberStyle = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(34px, 3.8vw, 44px)', letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--ink)', whiteSpace: 'nowrap', fontFeatureSettings: '"tnum" 1', fontVariantNumeric: 'tabular-nums' }; const labelStyle = (visible) => ({ marginTop: 10, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--slate)', opacity: visible ? 1 : 0, transition: 'opacity 400ms ease-out' }); return (

{/* 1 — 1000 counts up */}

{counter.toLocaleString()}

SKUs per overnight batch

{/* 2 — 50% scales and fades in */}

95%

frames accepted on first delivery

{/* 3 — ~24 hrs fades up, tilde pulses perpetually after entrance */}

5 +

camera angles per SKU

); } function BatchClosingLinks() { const { isMobile } = useBreakpoint(); const link = (to, label) => ; return (

{link('/solutions#scale', 'See who batch is built for')} {link('/pricing', 'See pricing')}

); } function BatchClosingLink({ to, label }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--ink)', textDecoration: 'none', borderBottom: '1px solid var(--ink)', paddingBottom: 2 }}> {label} ); } Object.assign(window, { BatchHeader, BatchStep, BatchMock, BatchSpecs, BatchClosingLinks, BatchClosingLink, Field, SummaryRow, ThumbRow });

{title}

From idea to output in minutes.

{s.title}

The shoot, under your control.

{input.headlineLead}
{input.headlineEm}

{col.heading === 'Inputs' && <>What goes in.} {col.heading === 'Generation' && <>How it renders.} {col.heading === 'Output' && <>Campaign-ready, on day one.}

Turn any frame into motion.

Pay only for the resolution you export.

One brief.
One season.
One thousand frames.

From one product. To one thousand.

{step.headLead}
{step.headEm}

{title}

From idea to output in minutes.

{s.title}

The shoot, under your control.

{input.headlineLead}{input.headlineEm}

{col.heading === 'Inputs' && <>What goes in.} {col.heading === 'Generation' && <>How it renders.} {col.heading === 'Output' && <>Campaign-ready, on day one.}

Turn any frame into motion.

Pay only for the resolution you export.

One brief.One season. One thousand frames.

From one product. To one thousand.

{step.headLead}{step.headEm}

{input.headlineLead}
{input.headlineEm}

One brief.
One season.
One thousand frames.

{step.headLead}
{step.headEm}