// Hero — cycling equation: product + original scene + model = output
// Auto-advances every 5s, pauses on hover/focus, with dot pagination + arrows.
// Mobile (≤780px): headline + promise + CTA come FIRST (above the fold), the
// equation visual follows underneath. See the HeroStyles mobile block.
const EQUATION_EXAMPLES = [
{ og: 'assets/eq-og-1.jpg', output: 'assets/eq-output-1.jpg', model: 'assets/eq-model-head.jpg' },
{ og: 'assets/eq-og-9.jpg', output: 'assets/eq-output-9.jpg', model: 'assets/eq-model-9.jpg' },
{ og: 'assets/eq-og-10.jpg', output: 'assets/eq-output-10.jpg', model: 'assets/eq-model-10.jpg' },
{ og: 'assets/eq-og-2.jpg', output: 'assets/eq-output-2.jpg', model: 'assets/eq-model-2.jpg' },
{ og: 'assets/eq-og-4.jpg', output: 'assets/eq-output-4.jpg', model: 'assets/eq-model-4.jpg' },
{ og: 'assets/eq-og-5.jpg', output: 'assets/eq-output-5.jpg', model: 'assets/eq-model-5.jpg' },
{ og: 'assets/eq-og-6.jpg', output: 'assets/eq-output-6.jpg', model: 'assets/eq-model-6.jpg' },
{ og: 'assets/eq-og-7.jpg', output: 'assets/eq-output-7.jpg', model: 'assets/eq-model-7.jpg' },
{ og: 'assets/eq-og-8.jpg', output: 'assets/eq-output-8.jpg', model: 'assets/eq-model-8.jpg' },
{ og: 'assets/eq-og-3.jpg', output: 'assets/eq-output-3.jpg', model: 'assets/eq-model-3.jpg' },
];
const EQUATION_PRODUCT = 'assets/eq-product.jpg';
function PSHero() {
return (
{/* LEFT, typographic slab */}
By The Vault Stock · Authentic × AI Hybrid
VAULT CREATIVE STUDIO.
Create with 10,000 real images, or BYO.
Bring your product, or just create. Play with the whole Vault Stock library, real photographs, not AI slop, or upload your own. Our engine places your product like it was shot there. No shoot. No studio.
Open the StudioSee examples
{/* Mobile only — on desktop the nav already carries Pricing, and a
third pill here crowds the hero. */}
View pricing
Free to explore. Credits to generate.
Trusted by 10,000+ creatives · hundreds of thousands of downloads
{/* Stat row — on DESKTOP it sits at the bottom of the slab. On mobile
this copy is hidden and the stats reappear below the image (see the
ps-hero-stats-mobile block) so the page reads words → image → words. */}
{/* RIGHT, cycling equation */}
{/* Mobile-only: the stats land UNDER the image, completing the
words → image → words rhythm. Hidden on desktop. */}
);
}
/* The four trust stats. Shared between the desktop slab and the mobile block
so the copy stays in one place. `mobile` drops the top margin since on
mobile it sits under the image rather than at the bottom of the slab. */
function HeroStats({ className = '', mobile = false }) {
const items = [
['10,000+', 'image library or BYO'],
['130+', 'models in the library'],
['all categories', 'skincare to homewares'],
['2K · 4K', 'commercial-ready output'],
];
return (
{items.map(([n, l]) =>
{n}
{l}
)}
);
}
/* ============================================================
HERO EQUATION
product + original + model = output, cycling through 8 examples.
Auto-advances every 5s, pauses on hover. Dots + arrows.
============================================================ */
function HeroEquation() {
const [idx, setIdx] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const total = EQUATION_EXAMPLES.length;
// Smart preload — only the first example is loaded eagerly so first paint
// is fast. Remaining examples are deferred 2.5s after mount so they don't
// compete with critical above-the-fold assets, then loaded in the
// background. Combined with the JIT preload below, the user always has
// the next example ready by the time the cycle advances.
React.useEffect(() => {
const eager = [EQUATION_PRODUCT, EQUATION_EXAMPLES[0].og, EQUATION_EXAMPLES[0].output, EQUATION_EXAMPLES[0].model];
eager.forEach(u => { const i = new Image(); i.src = u; });
const t = setTimeout(() => {
EQUATION_EXAMPLES.slice(1).forEach(e => {
[e.og, e.output, e.model].forEach(u => { const i = new Image(); i.src = u; });
});
}, 2500);
return () => clearTimeout(t);
}, []);
// JIT preload the next example whenever idx changes — covers the case
// where the deferred preload above hasn't finished yet (slow connection)
// or the user clicks ahead manually.
React.useEffect(() => {
const nextIdx = (idx + 1) % total;
const e = EQUATION_EXAMPLES[nextIdx];
[e.og, e.output, e.model].forEach(u => { const i = new Image(); i.src = u; });
}, [idx, total]);
React.useEffect(() => {
if (paused) return;
const t = setInterval(() => setIdx(i => (i + 1) % total), 5200);
return () => clearInterval(t);
}, [paused, total]);
const current = EQUATION_EXAMPLES[idx];
const next = () => setIdx((idx + 1) % total);
const prev = () => setIdx((idx - 1 + total) % total);
return (
{/* Dots (arrows now overlay the image left/right) */}
{EQUATION_EXAMPLES.map((_, i) => (
);
}
/* Small thumbnail cell used in the equation strip below the big output hero. */
function StripCell({ src, label, tone, mode, animateKey, highlight }) {
return (
{label}
);
}
function EquationOperator({ children }) {
return (