// Direction 3 — "Cinematic Reel" (TWEAKABLE EDITION)
// All visual options driven by a context object so the Tweaks panel can drive everything.
(function () {
const { useState, useEffect, useRef, useMemo, useContext, createContext } = React;
// Preview mode (admin opens ?preview=1 to view drafts as they'll look live).
const A2M_PREVIEW = (() => { try { return new URLSearchParams(window.location.search).get('preview') === '1'; } catch (e) { return false; } })();
// `let` (not const) so the host page can swap in Firestore data before the
// first render via window.A2M_applyData(). Components read these at render
// time, so reassigning before ReactDOM.render reflects the live data.
let CASES = window.A2M_CASES;
let FILTERS = window.A2M_FILTERS;
const CaseArt = window.CaseArt;
// Called by index.html after fetching cases from Firestore (falls back to the
// bundled lib/*.js data if the fetch fails or returns nothing).
window.A2M_applyData = function (cases) {
if (!Array.isArray(cases) || !cases.length) return;
CASES = cases;
FILTERS = {
sectors: [...new Set(cases.map(c => c.sectorTag).filter(Boolean))],
channels: [...new Set(cases.flatMap(c => c.channels || []))],
formats: [...new Set(cases.flatMap(c => c.formats || []))],
};
};
const D3Ctx = createContext({});
const useD3 = () => useContext(D3Ctx);
const BG_PRESETS = {
black: { bg: '#000000', fg: '#F4F1EB', soft: '#F4F1EB18', dim: '#F4F1EB' },
dark: { bg: '#0A0A0A', fg: '#F4F1EB', soft: '#F4F1EB18', dim: '#F4F1EB' },
charcoal: { bg: '#1B1B1A', fg: '#F4F1EB', soft: '#F4F1EB20', dim: '#F4F1EB' },
midnight: { bg: '#0B1424', fg: '#E8ECF7', soft: '#E8ECF722', dim: '#E8ECF7' },
cream: { bg: '#F4F1EB', fg: '#0A0A0A', soft: '#0A0A0A18', dim: '#0A0A0A' },
};
// ── Cursor with trail + follower ────────────────────────
function Cursor({ scrollRef }) {
const { accent, palette } = useD3();
const dotRef = useRef(null);
const ringRef = useRef(null);
const pos = useRef({ x: 0, y: 0 });
const ring = useRef({ x: 0, y: 0 });
const [label, setLabel] = useState(null);
useEffect(() => {
const el = scrollRef.current; if (!el) return;
const onMove = (e) => {
pos.current = { x: e.clientX, y: e.clientY };
if (dotRef.current) dotRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
const target = e.target.closest('[data-d3-cursor]');
setLabel(target ? target.getAttribute('data-d3-cursor') : null);
};
el.addEventListener('mousemove', onMove);
let raf;
const tick = () => {
ring.current.x += (pos.current.x - ring.current.x) * 0.12;
ring.current.y += (pos.current.y - ring.current.y) * 0.12;
if (ringRef.current) ringRef.current.style.transform = `translate(${ring.current.x}px, ${ring.current.y}px)`;
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => { el.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
}, []);
return (
<>
);
}
function AmbientOrb() {
const { accent, glow2, showOrbs, orbIntensity } = useD3();
if (!showOrbs) return null;
const alpha = Math.round(orbIntensity * 0.55 * 255).toString(16).padStart(2, '0');
const alpha2 = Math.round(orbIntensity * 0.45 * 255).toString(16).padStart(2, '0');
return (
);
}
function KineticText({ text, size, weight = 500, delay = 0 }) {
const { showKinetic } = useD3();
const ref = useRef(null);
const [on, setOn] = useState(!showKinetic);
useEffect(() => {
if (!showKinetic) { setOn(true); return; }
const io = new IntersectionObserver(([e]) => e.isIntersecting && setOn(true), { threshold: 0.2 });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, [showKinetic, text]);
return (
{String(text).split(' ').map((word, wi) => (
{word}
))}
);
}
function Magnetic({ children, strength = 0.3, style = {}, ...rest }) {
const { showMagnetic } = useD3();
const ref = useRef(null);
const [pos, setPos] = useState({ x: 0, y: 0 });
if (!showMagnetic) return {children}
;
return (
{
const r = ref.current.getBoundingClientRect();
setPos({ x: (e.clientX - r.left - r.width / 2) * strength, y: (e.clientY - r.top - r.height / 2) * strength });
}}
onMouseLeave={() => setPos({ x: 0, y: 0 })}
style={{ display: 'inline-block', transform: `translate(${pos.x}px, ${pos.y}px)`, transition: 'transform .35s cubic-bezier(.2,.8,.2,1)', ...style }}
{...rest}
>{children}
);
}
function resolveVariant(i, artStyle) {
if (artStyle === 'auto') return ['split','gradient','big-metric','stripes','block'][i % 5];
return artStyle;
}
// ── Intro reel panels (editorial, non-tiled) ────────────
function IntroFounder() {
const { accent, palette, glow2, isMobile } = useD3();
return (
A note from Tony Laskar .
“ Thank you for taking the time to learn more about Audience2Media. At our core is pioneering data-driven technology, award-winning expertise and an audience targeting platform that's unrivalled on performance — seamlessly combining programmatic and influencer marketing to connect brands with the right people at local and global scale.
What truly sets us apart is our team. We're dedicated to delivering outstanding results and giving our clients the competitive edge they deserve — and I'm excited to keep innovating alongside you into the next decade.”
Tony Laskar
Founder & Chief Executive Officer
);
}
function IntroWhoWeAre() {
const { accent, palette } = useD3();
const lines = [
{ a: 'We are', b: 'Audience2Media' },
{ a: 'A team of', b: '128 specialists' },
{ a: 'Working across', b: '12 markets' },
{ a: 'Since', b: '2009' },
];
return (
{lines.map((l, i) => (
))}
Independent. Audience-first. Built around a single instinct — find the people who matter, meet them at the moment that matters.
);
}
function IntroFramework() {
const { accent, palette, isMobile } = useD3();
const pillars = [
{ n: 'I', t: 'Insights', sub: 'We understand your audience.', d: 'Decoding the real signals and behaviours that shape how people engage with brands.' },
{ n: 'II', t: 'Strategy', sub: 'We create demand.', d: 'Turning attention into measurable growth. Every message backed by data and aligned to the outcome that matters.' },
{ n: 'III', t: 'Activation', sub: 'We connect to the right people.', items: [
{ l: 'Online', d: 'Interest-based programmatic targeting across social, digital OOH and the open web.' },
{ l: 'Offline', d: 'High-impact OOH, print, radio and TV at scale.' },
{ l: 'Influencer', d: 'Data-driven creator story-telling.' },
]},
];
return (
{pillars.map((p, i) => (
{p.n}
{p.t}
{p.sub}
{p.d && (
{p.d}
)}
{p.items && (
{p.items.map((it, j) => (
))}
)}
))}
);
}
function IntroBrands() {
const { accent, palette, isMobile } = useD3();
// Brand logos come from Firestore (window.A2M_BRANDS). If none are loaded,
// fall back to the original scrolling text marquee.
const brands = (window.A2M_BRANDS || []).filter(b => b && b.logoUrl);
const fallbackRows = [
{ dir: 'left', weight: 400, items: ['Ted Baker', 'Vodafone', 'Aston Martin', 'Google', 'Alibaba', 'Warner Bros', 'TUI', 'Macmillan', 'Sony Music', 'Canon'] },
{ dir: 'right', weight: 700, items: ['Tesco', 'Barclays', 'Dyson', 'Nestlé', 'HSBC', 'Toyota', 'Disney+', 'O₂', 'Burger King', 'British Airways'] },
{ dir: 'left', weight: 400, items: ['NordVPN', 'L’Oréal', 'Serpentine', 'Wallace Collection', 'Brooklands Museum', 'AEON Bank', '4FINGERS', 'MUBI', 'Yves Saint Laurent', 'Nando’s'] },
];
// Split the logos across up to 3 marquee rows for a fuller wall.
const rowCount = brands.length >= 12 ? 3 : (brands.length >= 6 ? 2 : 1);
const logoRows = Array.from({ length: rowCount }, (_, r) => brands.filter((_, i) => i % rowCount === r));
return (
Capturing the perfect audience for your brand — delivered with speed and performance.
{brands.length > 0 ? (
{logoRows.map((row, ri) => (
{[...row, ...row, ...row].map((b, i) => (
))}
))}
) : (
{fallbackRows.map((row, ri) => (
{[...row.items, ...row.items, ...row.items].map((b, i) => (
))}
))}
)}
);
}
function IntroOffering() {
const { accent, palette, glow2 } = useD3();
return (
Fuelled by real-time insights, engineered through intelligent strategy, executed with precision activation. A2M integrates proprietary data, AI and human expertise to unify every media channel — influencer marketing included — into one transparent system at global scale.
{['Smarter decisions', 'Faster optimisation', 'Measurable ROI'].map((t, i) => (
))}
{Array.from({ length: 28 }).map((_, i) => {
const x = 20 + (i / 27) * 380;
const seed = Math.sin(i * 0.83) * 0.5 + 0.5;
const h = 90 + seed * 180 + (i % 4) * 14;
const isAccent = i % 2 === 0;
return (
);
})}
);
}
function IntroNumbers() {
const { accent, palette } = useD3();
const stats = [
{ v: '63', l: 'Campaigns shipped', sub: 'in 2025' },
{ v: '12', l: 'Markets', sub: 'across 4 regions' },
{ v: '4.7B', l: 'Audience reached', sub: 'verified impressions' },
{ v: '38%', l: 'Avg lift', sub: 'on the brief KPI' },
];
return (
{stats.map((s, i) => (
))}
);
}
function Reel({ onOpen }) {
const { accent, palette, panelWidth, showParallax, autoDrift, artStyle, tileRadius, introHeadline, introKicker, introBody, skipIntro, isMobile } = useD3();
const ref = useRef(null);
const [progress, setProgress] = useState(0);
const [hoverIdx, setHoverIdx] = useState(null);
const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
// Mobile: the Skip-intro pill is position:fixed, so hide it once the user has
// scrolled into the Case Studies grid (otherwise it floats over everything).
const [showSkipMobile, setShowSkipMobile] = useState(true);
useEffect(() => {
if (!isMobile) return;
const scroller = document.querySelector('.site-viewport > div');
if (!scroller) return;
const onScroll = () => {
const grid = document.getElementById('d3-grid');
const threshold = grid ? grid.offsetTop - window.innerHeight * 0.5 : window.innerHeight * 3;
setShowSkipMobile(scroller.scrollTop < threshold);
};
onScroll();
scroller.addEventListener('scroll', onScroll, { passive: true });
return () => scroller.removeEventListener('scroll', onScroll);
}, [isMobile]);
useEffect(() => {
const el = ref.current; if (!el) return;
// On mobile the reel stacks vertically and scrolls with the page — skip all
// the horizontal wheel/drag/snap hijacking.
if (isMobile) return;
let snapping = false;
let scrollEndTimer = null;
let wheelLocked = false;
let wheelUnlockTimer = null;
const getSnapPoints = () => Array.from(el.children)
.filter(c => c.offsetWidth > window.innerWidth * 0.6)
.map(p => p.offsetLeft);
const glideTo = (target, duration = 600) => {
snapping = true;
const start = el.scrollLeft;
const delta = target - start;
const max = el.scrollWidth - el.clientWidth;
if (Math.abs(delta) < 2) { snapping = false; return; }
const t0 = performance.now();
const step = (now) => {
if (!snapping) return;
const t = Math.min((now - t0) / duration, 1);
const eased = 1 - Math.pow(1 - t, 3);
el.scrollLeft = start + delta * eased;
if (max > 0) setProgress(el.scrollLeft / max);
if (t < 1) requestAnimationFrame(step);
else snapping = false;
};
requestAnimationFrame(step);
};
const stepPanel = (dir) => {
const pts = getSnapPoints();
if (!pts.length) return;
const cur = el.scrollLeft;
let idx = 0, best = Infinity;
pts.forEach((p, i) => { const d = Math.abs(p - cur); if (d < best) { best = d; idx = i; } });
const target = Math.max(0, Math.min(pts.length - 1, idx + dir));
glideTo(pts[target]);
};
// One wheel gesture advances exactly one panel.
const onWheel = (e) => {
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
const max = el.scrollWidth - el.clientWidth;
const dir = e.deltaY > 0 ? 1 : -1;
const atStart = el.scrollLeft <= 2;
const atEnd = el.scrollLeft >= max - 2;
// At the ends, let the wheel bubble so the page can scroll past the reel.
if ((atEnd && dir > 0) || (atStart && dir < 0)) return;
e.preventDefault();
if (wheelLocked || snapping) return;
wheelLocked = true;
stepPanel(dir);
if (wheelUnlockTimer) clearTimeout(wheelUnlockTimer);
wheelUnlockTimer = setTimeout(() => { wheelLocked = false; }, 720);
};
el.addEventListener('wheel', onWheel, { passive: false });
// After a drag, settle to the nearest panel.
const onScroll = () => {
if (snapping || wheelLocked) return;
if (scrollEndTimer) clearTimeout(scrollEndTimer);
scrollEndTimer = setTimeout(() => {
scrollEndTimer = null;
const pts = getSnapPoints();
const cur = el.scrollLeft;
let nearest = null, best = Infinity;
for (const sp of pts) { const d = Math.abs(sp - cur); if (d < best) { best = d; nearest = sp; } }
if (nearest !== null && best > 4) glideTo(nearest);
}, 140);
};
el.addEventListener('scroll', onScroll, { passive: true });
// Click + drag horizontal scrolling (mouse).
let isDragging = false, dragStartX = 0, dragStartScroll = 0, dragMoved = false;
const onMouseDown = (e) => {
if (e.button !== 0) return;
// ignore clicks on interactive children (buttons, links, tiles)
if (e.target.closest('button, a, [data-d3-cursor="Open"]')) return;
isDragging = true; dragMoved = false; dragStartX = e.clientX; dragStartScroll = el.scrollLeft;
snapping = false;
if (scrollEndTimer) { clearTimeout(scrollEndTimer); scrollEndTimer = null; }
el.style.cursor = 'grabbing';
};
const onMouseMove = (e) => {
if (!isDragging) return;
const dx = e.clientX - dragStartX;
if (Math.abs(dx) > 3) dragMoved = true;
el.scrollLeft = dragStartScroll - dx;
const max = el.scrollWidth - el.clientWidth;
setProgress(el.scrollLeft / max);
if (dragMoved) e.preventDefault();
};
const onMouseUp = () => {
if (!isDragging) return;
isDragging = false;
el.style.cursor = '';
};
const onClickCapture = (e) => {
// Suppress click events that fire after a drag so tiles don't open on drag-release.
if (dragMoved) { e.stopPropagation(); e.preventDefault(); dragMoved = false; }
};
el.addEventListener('mousedown', onMouseDown);
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
el.addEventListener('click', onClickCapture, true);
el.style.cursor = 'grab';
let raf, last = performance.now(), idle = 0, lastScroll = el.scrollLeft;
const tick = (now) => {
const dt = now - last; last = now;
if (el.scrollLeft === lastScroll) idle += dt; else idle = 0;
lastScroll = el.scrollLeft;
if (false && !snapping && autoDrift > 0 && idle > 1500) {
el.scrollLeft += 0.3 * autoDrift;
const max = el.scrollWidth - el.clientWidth;
if (el.scrollLeft >= max - 2) el.scrollLeft = 0;
setProgress(el.scrollLeft / max);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => {
el.removeEventListener('wheel', onWheel);
el.removeEventListener('scroll', onScroll);
cancelAnimationFrame(raf);
if (scrollEndTimer) clearTimeout(scrollEndTimer);
};
}, [autoDrift, isMobile]);
return (
setMouse({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight })}>
{!isMobile &&
}
{!isMobile &&
}
{!isMobile &&
}
{!isMobile &&
}
{!isMobile && (
)}
{!isMobile && (
Scroll ↔ {String(Math.round(progress * 100)).padStart(2, '0')}%
)}
{ e.currentTarget.style.background = accent; e.currentTarget.style.borderColor = accent; e.currentTarget.style.color = '#0A0A0A'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = `${accent}55`; e.currentTarget.style.color = palette.fg; e.currentTarget.style.transform = 'translateY(0)'; }}
>
Skip intro
↓
);
}
function GridTile({ c, i, onOpen }) {
const { artStyle, tileRadius, showGloss, accent } = useD3();
const tileRef = useRef(null);
const [hovered, setHovered] = useState(false);
const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
const [revealed, setRevealed] = useState(false);
useEffect(() => {
const io = new IntersectionObserver(([e]) => e.isIntersecting && setRevealed(true), { threshold: 0.15 });
if (tileRef.current) io.observe(tileRef.current);
return () => io.disconnect();
}, []);
const tiltX = (mouse.y - 0.5) * 8;
const tiltY = (mouse.x - 0.5) * -8;
return (
onOpen(c.id)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => { setHovered(false); setMouse({ x: 0.5, y: 0.5 }); }}
onMouseMove={(e) => {
const r = tileRef.current.getBoundingClientRect();
setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
}}
data-d3-cursor="Open"
style={{
cursor: 'pointer', perspective: 1200,
opacity: revealed ? 1 : 0,
transform: revealed ? 'translateY(0)' : 'translateY(40px)',
transition: `opacity .9s cubic-bezier(.2,.8,.2,1) ${(i % 4) * 80}ms, transform .9s cubic-bezier(.2,.8,.2,1) ${(i % 4) * 80}ms`,
}}
>
{c.heroImage ? (
) : (
)}
{showGloss && (
)}
{c.client}
View case study →
{c.shortTitle}
{chips.map((f) => {
const active = f === value;
return (
onChange(f)} data-d3-cursor="Filter"
onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = hoverBg; }}
onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
style={{
flex: '0 0 auto', whiteSpace: 'nowrap',
padding: '9px 16px', border: 0,
background: active ? fg : 'transparent',
color: active ? bg : fg, opacity: active ? 1 : 0.72,
cursor: 'pointer', fontSize: 13, fontWeight: 600, letterSpacing: '0.01em',
borderRadius: 999, fontFamily: 'inherit',
transition: 'background .25s ease, color .25s ease, opacity .2s ease',
}}>{f}
);
})}
);
}
function GridView({ onOpen }) {
const { accent, gridBgInvert, palette } = useD3();
const [filter, setFilter] = useState('All');
const filterChips = ['All', ...FILTERS.sectors, ...FILTERS.channels.slice(0, 5)];
const filtered = filter === 'All' ? CASES : CASES.filter(c => c.sectorTag === filter || c.channels.includes(filter));
const sectionBg = gridBgInvert ? (palette.bg === '#F4F1EB' ? '#0A0A0A' : '#F4F1EB') : palette.bg;
const sectionFg = gridBgInvert ? (palette.fg === '#F4F1EB' ? '#0A0A0A' : '#F4F1EB') : palette.fg;
return (
● {filtered.length} results
{filtered.map((c, i) =>
);
}
// ── Manifesto: "The Build" — looping 14s mosaic sequence ─────────────
// 10 tiles in a 12×6 CSS Grid mosaic: 6 real influencer clips + 4
// Krypton HTML/CSS tiles (dashboard panel, big metric, UK+MY heatmap,
// live-scan ticker). Tiles populate one-by-one with corner-reticle
// lock-on, hold "alive", fade to black, resolve to A2M end slate. Loop.
// Corner reticles (drawn around any tile during "lock-on")
function Reticles({ color, on }) {
const s = (extra) => ({
position: 'absolute', width: 14, height: 14,
transition: `opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1)`,
opacity: on ? 0.9 : 0,
transform: on ? 'scale(1)' : 'scale(0.6)',
...extra,
});
return (
<>
);
}
function ClipTile({ src, client, region, hero, revealed, contentVisible, accent, krypton, paletteFg }) {
const ringColor = hero ? accent : krypton;
return (
{region}
{hero && {client} }
);
}
// Faux Krypton dashboard tile: header, animated cohort bars, lock-on indicator, IP counter.
function KryptonDashTile({ revealed, contentVisible, krypton, accent, paletteFg, alive }) {
const cohorts = [
{ l: 'Engaged 30+ Female', v: 72 },
{ l: 'Travel · Affluent', v: 58 },
{ l: 'Auto Intenders', v: 41 },
{ l: 'Parent · UK', v: 28 },
];
const [ipCount, setIpCount] = useState(218492);
useEffect(() => {
if (!alive) return;
const id = setInterval(() => setIpCount(n => n + Math.floor(7 + Math.random() * 13)), 220);
return () => clearInterval(id);
}, [alive]);
return (
v3.2
Audience cohort scan
{cohorts.map((c, i) => (
))}
Lock-on signal
{ipCount.toLocaleString()} unique IPs
);
}
// Big rotating metric tile
function KryptonMetricTile({ revealed, contentVisible, krypton, accent, alive }) {
const metrics = [
{ value: '1.1B', label: 'Ads served', sub: 'Giffgaff · 2024' },
{ value: '332×', label: 'ROAS uplift', sub: 'Wallace Collection' },
{ value: '4.7B', label: 'Audience reached', sub: '2024 · 12 markets' },
{ value: '62%', label: 'CPS below target', sub: 'Krypton · behavioural' },
];
const [idx, setIdx] = useState(0);
useEffect(() => {
if (!alive) return;
const id = setInterval(() => setIdx(i => (i + 1) % metrics.length), 2800);
return () => clearInterval(id);
}, [alive]);
const m = metrics[idx];
return (
);
}
// UK + Malaysia heatmap with pulsing dots
function KryptonHeatmapTile({ revealed, contentVisible, krypton, accent, alive }) {
// Hand-picked dot positions inside the tile (% coords) — clustered around UK + MY silhouettes
const dots = [
// UK cluster
{ x: 22, y: 18, r: 2.4 }, { x: 28, y: 14, r: 1.6 }, { x: 24, y: 22, r: 3.2 },
{ x: 18, y: 28, r: 1.4 }, { x: 30, y: 24, r: 1.8 }, { x: 26, y: 30, r: 2.0 },
// MY cluster
{ x: 72, y: 62, r: 2.8 }, { x: 78, y: 60, r: 1.8 }, { x: 70, y: 68, r: 2.2 },
{ x: 76, y: 70, r: 1.4 }, { x: 80, y: 64, r: 1.6 }, { x: 74, y: 56, r: 1.2 },
];
return (
{/* Thin lat/long grid */}
{[15, 30, 45, 60, 75].map(y =>
{/* Connecting arc UK → MY */}
{/* Dots */}
{dots.map((d, i) => (
))}
12
Markets · UK · MY · APAC
);
}
// Live scan ticker — horizontal scrolling targeting events
function KryptonScanTile({ revealed, contentVisible, krypton, accent, alive }) {
const events = [
'BEHAVIOURAL SIGNAL ▸ CULTURE / ARTS 45+',
'AUDIENCE MATCH ▸ 87% CONFIDENCE',
'IP COHORT ▸ UK · 138M scanned',
'LOCK-ON ▸ travel · luxury · male 50+',
'REAL-TIME BID ▸ premium publishers · WIN',
'CONTEXTUAL ▸ home improvement · BVOD',
'INFLUENCER MATCH ▸ MY · beauty 25-34',
'CONVERSION ▸ CPA -82% vs target',
];
return (
T+{Math.floor(Math.random() * 99) + 1}ms
{[...events, ...events, ...events].map((e, i) => (
))}
87% confidence
▸ LOCK
);
}
function Manifesto({ scrollRef }) {
const { accent, palette, seenIntro, replayIntro } = useD3();
const ref = useRef(null);
const [visible, setVisible] = useState(false);
// Phase machine (plays ONCE, no loop):
// intro → building → alive → fading → outro → held
// From 'held', the next scroll-down collapses the section so the grid
// rises up. Scrolling back up after collapse re-expands to a static slate.
const [phase, setPhase] = useState('intro');
const [revealedCount, setRevealedCount] = useState(0);
const [collapsed, setCollapsed] = useState(false);
const krypton = '#1A9CA0';
// ── "The Wall" — 30 scatter clips + 2 Krypton punch-through tiles ────
// Positions are % offsets from the section center for each clip card.
// Reveal order = array order (top-rows fill first, scattered jitter).
// Krypton tiles sit at the END so they punch in LAST, on top.
// 5 rough rows × 6 cols = 30 positions. Clips are larger and packed
// tighter so they OVERLAP each other organically — no more separate tiles.
// Per-clip rotation/scale + jittered positions for designer-pinboard feel.
const clipSpecs = [
// Row 1 (y ~18)
{ src: 'video/cases/warner-bros.mp4', client: 'Warner Bros.', region: 'UK', x: 8, y: 18, rot: -3, scale: 0.95, z: 4 },
{ src: 'video/cases/vodafone.mp4', client: 'Vodafone', region: 'UK', x: 22, y: 15, rot: 2, scale: 1.05, z: 9 },
{ src: 'video/cases/voxi.mp4', client: 'VOXI', region: 'UK', x: 36, y: 20, rot: -1.5, scale: 0.9, z: 3 },
{ src: 'video/cases/tenby.mp4', client: 'Tenby Schools', region: 'MY', x: 50, y: 16, rot: 3, scale: 1.0, z: 11 },
{ src: 'video/cases/nestle.mp4', client: 'Nestlé', region: 'MY', x: 64, y: 19, rot: -2, scale: 0.95, z: 6 },
{ src: 'video/cases/darlie.mp4', client: 'Darlie', region: 'MY', x: 78, y: 15, rot: 1.5, scale: 1.0, z: 8 },
{ src: 'video/cases/warner-bros-fern.mp4', client: 'Warner Bros.', region: 'UK', x: 92, y: 19, rot: -3, scale: 0.9, z: 3 },
// Row 2 (y ~36, offset x for overlap into row 1)
{ src: 'video/cases/vodafone-video.mp4', client: 'Vodafone', region: 'UK', x: 15, y: 36, rot: 2.5, scale: 0.95, z: 7 },
{ src: 'video/cases/vodafone-yt.mp4', client: 'Vodafone', region: 'UK', x: 29, y: 33, rot: -2, scale: 1.0, z: 10 },
{ src: 'video/cases/zoek-1.mp4', client: 'Zoek', region: 'UK', x: 43, y: 37, rot: 1.5, scale: 0.9, z: 5 },
{ src: 'video/cases/serpentine.mp4', client: 'Serpentine', region: 'UK', x: 57, y: 34, rot: -3, scale: 1.05, z: 12 },
{ src: 'video/cases/card-factory.mp4', client: 'Card Factory', region: 'UK', x: 71, y: 37, rot: 2, scale: 0.95, z: 6 },
{ src: 'video/cases/nasty.mp4', client: 'NASTY', region: 'UK', x: 85, y: 33, rot: -1.5, scale: 1.0, z: 9 },
// Row 3 (y ~53)
{ src: 'video/cases/tenby-2.mp4', client: 'Tenby Schools', region: 'MY', x: 6, y: 53, rot: -2, scale: 1.0, z: 8 },
{ src: 'video/cases/acmar.mp4', client: 'ACMAR School', region: 'MY', x: 20, y: 50, rot: 1.5, scale: 0.95, z: 11 },
{ src: 'video/cases/acmar-2.mp4', client: 'ACMAR School', region: 'MY', x: 34, y: 54, rot: -3, scale: 0.9, z: 4 },
{ src: 'video/cases/alcon.mp4', client: 'Alcon', region: 'MY', x: 48, y: 51, rot: 3, scale: 1.05, z: 13 },
{ src: 'video/cases/alcon-2.mp4', client: 'Alcon', region: 'MY', x: 62, y: 55, rot: -2, scale: 0.95, z: 7 },
{ src: 'video/cases/derma-angel.mp4', client: 'Derma Angel', region: 'MY', x: 76, y: 50, rot: 2, scale: 1.0, z: 10 },
{ src: 'video/cases/derma-angel-2.mp4', client: 'Derma Angel', region: 'MY', x: 90, y: 54, rot: -1.5, scale: 0.9, z: 3 },
// Row 4 (y ~70, offset)
{ src: 'video/cases/darlie-2.mp4', client: 'Darlie', region: 'MY', x: 12, y: 70, rot: 3, scale: 0.9, z: 5 },
{ src: 'video/cases/nestle-2.mp4', client: 'Nestlé', region: 'MY', x: 26, y: 68, rot: -2, scale: 1.0, z: 9 },
{ src: 'video/cases/nestle-3.mp4', client: 'Nestlé', region: 'MY', x: 40, y: 71, rot: 1.5, scale: 1.05, z: 12 },
{ src: 'video/cases/farm-fresh.mp4', client: 'Farm Fresh', region: 'MY', x: 54, y: 68, rot: -3, scale: 0.95, z: 6 },
{ src: 'video/cases/boh.mp4', client: 'BOH', region: 'MY', x: 68, y: 72, rot: 2, scale: 1.0, z: 11 },
{ src: 'video/cases/boh-2.mp4', client: 'BOH', region: 'MY', x: 82, y: 68, rot: -1.5, scale: 0.95, z: 7 },
// Row 5 (y ~83) — only 4 clips to leave breathing room near bottom
{ src: 'video/cases/kewpie.mp4', client: 'Kewpie', region: 'MY', x: 18, y: 84, rot: -2, scale: 1.0, z: 8 },
{ src: 'video/cases/aeon-bank.mp4', client: 'AEON Bank', region: 'MY', x: 38, y: 86, rot: 3, scale: 1.05, z: 10 },
{ src: 'video/cases/zoek-2.mp4', client: 'Zoek', region: 'UK', x: 58, y: 84, rot: -3, scale: 0.95, z: 6 },
{ src: 'video/cases/visa.mp4', client: 'VISA', region: 'MENA', x: 78, y: 86, rot: 2, scale: 1.0, z: 9 },
];
// Sequence timings (ms) — plays once, ends on 'held'
const T_INTRO_END = 1800; // intro slate holds before the wall builds
const T_TILE_GAP = 150; // 30 clips × 150 = 4500ms
const T_BUILD_END = T_INTRO_END + clipSpecs.length * T_TILE_GAP + 600; // ~6900
const T_ALIVE_END = T_BUILD_END + 3500; // ~10400
const T_FADE_END = T_ALIVE_END + 1800; // ~12200
const T_OUTRO_END = T_FADE_END + 1800; // ~14000 → phase 'held'
useEffect(() => {
// rootMargin pre-triggers visibility ~50vh before section enters viewport
// so the 30 videos get a head start on download.
const io = new IntersectionObserver(([e]) => e.isIntersecting && setVisible(true), { threshold: 0, rootMargin: '0px 0px 400px 0px' });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, []);
// Run the sequence once when the section first becomes visible.
useEffect(() => {
if (!visible) return;
const timers = [];
setPhase('intro');
setRevealedCount(0);
timers.push(setTimeout(() => setPhase('building'), T_INTRO_END));
// Reveal 30 clips one by one with corner-reticle lock-on
for (let i = 0; i < clipSpecs.length; i++) {
timers.push(setTimeout(() => setRevealedCount(i + 1), T_INTRO_END + i * T_TILE_GAP));
}
timers.push(setTimeout(() => setPhase('alive'), T_BUILD_END));
timers.push(setTimeout(() => setPhase('fading'), T_ALIVE_END));
timers.push(setTimeout(() => setPhase('outro'), T_FADE_END));
timers.push(setTimeout(() => setPhase('held'), T_OUTRO_END));
return () => timers.forEach(clearTimeout);
}, [visible]);
// From 'held': the next scroll-DOWN gesture collapses the section so the
// grid below rises up. Only fires while the section is actually in view.
useEffect(() => {
if (collapsed || phase !== 'held') return;
const el = scrollRef && scrollRef.current;
if (!el) return;
const onWheel = (e) => {
if (e.deltaY <= 0) return;
const r = ref.current.getBoundingClientRect();
const inView = r.top < window.innerHeight * 0.4 && r.bottom > window.innerHeight * 0.6;
if (!inView) return;
e.preventDefault();
el.scrollTop = ref.current.offsetTop; // pin to section top for a clean collapse
setCollapsed(true);
};
el.addEventListener('wheel', onWheel, { passive: false });
return () => el.removeEventListener('wheel', onWheel);
}, [phase, collapsed]);
// Once collapsed: scrolling back UP to the section boundary re-expands it
// to a static slate (no replay of the sequence).
useEffect(() => {
if (!collapsed) return;
const el = scrollRef && scrollRef.current;
if (!el) return;
const onWheel = (e) => {
if (e.deltaY >= 0) return;
const r = ref.current.getBoundingClientRect();
if (r.top > -40) {
e.preventDefault();
setCollapsed(false);
setPhase('static');
requestAnimationFrame(() => { if (ref.current) el.scrollTop = ref.current.offsetTop; });
}
};
el.addEventListener('wheel', onWheel, { passive: false });
return () => el.removeEventListener('wheel', onWheel);
}, [collapsed]);
// Slate is shown at the start (intro), the end (outro/held), and when
// re-expanded (static). The wall shows only while it's building/alive/fading.
const slateVisible = phase === 'intro' || phase === 'outro' || phase === 'held' || phase === 'static';
const wallVisible = phase === 'building' || phase === 'alive' || phase === 'fading';
// Helper: shared wrapper for absolutely-positioned wall tiles.
// Clip cards use a vh-based height so they fit the section vertically
// regardless of viewport width. Width is derived via aspect-ratio.
const wrapStyle = (spec, revealed) => ({
position: 'absolute',
left: `${spec.x}%`, top: `${spec.y}%`,
// Krypton tiles (have explicit `width`) use width-based sizing.
// Clip tiles use height-based sizing (capped to ~16vh) so they fit 5 rows.
...(spec.width
? { width: spec.width, aspectRatio: spec.aspectRatio }
: { height: 'clamp(180px, 24vh, 280px)', aspectRatio: '9 / 16' }),
transformOrigin: 'center center',
transform: revealed
? `translate(-50%, -50%) rotate(${spec.rot || 0}deg) scale(${spec.scale || 1})`
: `translate(-50%, -50%) rotate(${(spec.rot || 0) * 0.4}deg) scale(${(spec.scale || 1) * 0.82})`,
opacity: revealed ? 1 : 0,
transition: 'opacity .7s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)',
zIndex: spec.z || 5,
pointerEvents: 'none',
});
return (
{visible && !collapsed && clipSpecs.map((c, i) => {
const revealed = revealedCount > i;
return (
);
})}
Krypton · 12 markets
{/* END SLATE — black plate with A2M logo + wordmark + tagline */}
Audience2Media
Brands, meet your audience.
{/* Replay intro pill — preserved, top-right, hidden during slate */}
{seenIntro && (
{ e.currentTarget.style.opacity = 1; e.currentTarget.style.borderColor = accent; }}
onMouseLeave={(e) => { e.currentTarget.style.opacity = slateVisible ? 0 : 0.7; e.currentTarget.style.borderColor = `${palette.fg}30`; }}
>
↺
Replay intro
)}
);
}
function Detail({ id, onBack, scrollRef }) {
const { accent, palette, tileRadius, isMobile } = useD3();
const c = CASES.find(x => x.id === id) || CASES[0];
const [t, setT] = useState(0);
const [lightboxIndex, setLightboxIndex] = useState(null);
useEffect(() => {
const el = scrollRef.current; if (!el) return;
el.scrollTo({ top: 0 });
const onScroll = () => setT(el.scrollTop);
el.addEventListener('scroll', onScroll, { passive: true });
return () => el.removeEventListener('scroll', onScroll);
}, [id]);
// Pick the 3 numbers for the Highlights band. Use curated topHighlights if present, else first 3 metrics.
const highlights = (c.topHighlights && c.topHighlights.length) ? c.topHighlights.slice(0, 3) : (c.metrics || []).slice(0, 3);
const headlineText = c.headline || c.title || c.shortTitle || '';
const objective = c.objective || '';
const solution = c.solution || '';
const campaignSuccess = c.campaignSuccess || '';
const hasStructuredStory = objective || solution || campaignSuccess;
const influencers = c.influencers || [];
const gallery = c.gallery || [];
const nextCase = CASES[(CASES.findIndex(x => x.id === id) + 1) % CASES.length];
const openLightbox = (i) => setLightboxIndex(i);
const closeLightbox = () => setLightboxIndex(null);
const prevLightbox = () => setLightboxIndex((i) => (i == null ? null : (i - 1 + gallery.length) % gallery.length));
const nextLightbox = () => setLightboxIndex((i) => (i == null ? null : (i + 1) % gallery.length));
// Scale hero title font-size to client name length so long titles
// (CHARTERHOUSE, Korea Tourism Organization, etc.) don't get cut by the hero image.
const titleWords = (c.client || '').trim().split(/\s+/).filter(Boolean);
const longestWord = titleWords.reduce((m, w) => Math.max(m, w.length), 0);
const titleLen = (c.client || '').length;
// Size by whichever is the tighter constraint: the longest single word (it
// can't wrap) or the overall length. Keeps long one-word names like
// CHARTERHOUSE on one line instead of breaking mid-word.
const sizeBasis = Math.max(longestWord, Math.ceil(titleLen * 0.55));
const titleFontSize =
sizeBasis <= 7 ? 'clamp(52px, 8vw, 150px)' :
sizeBasis <= 9 ? 'clamp(46px, 7vw, 124px)' :
sizeBasis <= 11 ? 'clamp(40px, 5.8vw, 104px)' :
sizeBasis <= 13 ? 'clamp(34px, 5vw, 84px)' :
sizeBasis <= 16 ? 'clamp(30px, 4.2vw, 72px)' :
'clamp(26px, 3.6vw, 60px)';
return (
{/* ── 1. HERO BAND — title left, hero image right ─────────────── */}
{c.client}
{headlineText}
{c.heroImage ? (
) : (
)}
{/* ── 2. HIGHLIGHTS BAND — black with accent metrics ──────────── */}
{highlights.length > 0 && (
{highlights.map((m, i) => {
const [on, setOn] = useState(false);
const r = useRef(null);
useEffect(() => {
const io = new IntersectionObserver(([e]) => e.isIntersecting && setOn(true), { threshold: 0.3 });
if (r.current) io.observe(r.current);
return () => io.disconnect();
}, []);
return (
);
})}
)}
{/* ── 3. STORY SECTION — Objective / Solution / Campaign Success ─ */}
Story
{hasStructuredStory ? (
<>
{objective &&
{/* ── 4. INFLUENCERS & BEHAVIOURAL APPROACH (conditional) ────── */}
{(influencers.length > 0 || (c.behaviourCategories && c.behaviourCategories.length >= 3) || c.graph) && (
{influencers.length > 0 && (
Influencers
{influencers.map((inf, i) =>
)}
{c.behaviourCategories && c.behaviourCategories.length >= 3 && (
Behavioural Approach
)}
{c.graph && (
)}
)}
{/* ── 5. ASSETS GALLERY ───────────────────────────────────────── */}
{gallery.length > 0 && (
Assets
{gallery.map((item, i) => (
openLightbox(i)}
data-d3-cursor="View"
style={{
breakInside: 'avoid',
WebkitColumnBreakInside: 'avoid',
pageBreakInside: 'avoid',
marginBottom: 14,
borderRadius: tileRadius,
overflow: 'hidden',
background: c.color || palette.soft,
cursor: 'pointer',
position: 'relative',
display: 'block',
transition: 'transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-3px)';
e.currentTarget.style.boxShadow = `0 24px 60px -20px ${accent}40`;
const hint = e.currentTarget.querySelector('[data-zoom-hint]');
if (hint) hint.style.opacity = '1';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = 'none';
const hint = e.currentTarget.querySelector('[data-zoom-hint]');
if (hint) hint.style.opacity = '0';
}}
>
{item.type === 'video' ? (
) : (
)}
{item.type === 'video' ? (
) : (
)}
))}
)}
{/* ── 6. CONTACT FOOTER ───────────────────────────────────────── */}
{/* ── Next case ──────────────────────────────────────────────── */}
onBack(nextCase.id)} data-d3-cursor="Next" style={{ padding: isMobile ? 'clamp(48px, 8vh, 72px) 7vw' : 'clamp(60px, 10vh, 140px) clamp(28px, 5vw, 80px)', borderTop: `1px solid ${palette.soft}`, cursor: 'pointer', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 40, alignItems: 'center', background: palette.bg, color: palette.fg }}>
{nextCase.heroImage ?
:
}
{inf.avatar ? (
) : (
)}
{inf.handle || inf.name || '—'}
{category}{sep}{reach}
);
}
function BehaviourRadar({ categories, accent, fg }) {
if (!categories || categories.length < 3) return null;
const n = categories.length;
const size = 360;
const pad = 108;
const cx = size / 2;
const cy = size / 2;
const maxR = size / 2 - pad;
const ringCount = 5;
const angleFor = (i) => -Math.PI / 2 + (i / n) * 2 * Math.PI;
const point = (i, r) => ({ x: cx + Math.cos(angleFor(i)) * r, y: cy + Math.sin(angleFor(i)) * r });
// Ring grid
const rings = [];
for (let r = 1; r <= ringCount; r++) {
const radius = (r / ringCount) * maxR;
const pts = Array.from({ length: n }, (_, i) => point(i, radius));
rings.push( `${p.x},${p.y}`).join(' ')} fill="none" stroke={fg} strokeOpacity={r === ringCount ? 0.25 : 0.12} strokeWidth="1" />);
}
// Spokes
const spokes = categories.map((_, i) => {
const outer = point(i, maxR);
return {cat.label}
);
});
return (
{rings}
{spokes}
);
}
function StoryBlock({ title, body }) {
const { accent, palette } = useD3();
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const io = new IntersectionObserver(([e]) => e.isIntersecting && setVisible(true), { threshold: 0.2 });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, []);
return (
);
}
// ─────────────────────────────────────────────────────────────
// EnquiryForm — Name / Company / Email / Request.
// Currently stubs the submit (logs to console). Wire to Firebase
// Function / Formspree / mailto when backend swap happens.
// ─────────────────────────────────────────────────────────────
function EnquiryForm() {
const { accent, isMobile } = useD3();
const [form, setForm] = useState({ firstName: '', lastName: '', company: '', email: '', request: '' });
const [submitting, setSubmitting] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState('');
const [attempted, setAttempted] = useState(false);
const honeypot = useRef('');
const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const emailOk = (v) => /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(String(v).trim());
const errors = {
firstName: !form.firstName.trim(),
lastName: !form.lastName.trim(),
company: !form.company.trim(),
email: !emailOk(form.email),
};
const hasErrors = errors.firstName || errors.lastName || errors.company || errors.email;
const onSubmit = async (e) => {
e.preventDefault();
if (submitting) return;
setAttempted(true);
setError('');
if (hasErrors) { setError('Please add your first name, last name, company and a valid email address.'); return; }
if (honeypot.current) { setSubmitted(true); return; } // bot trap — silently drop
setSubmitting(true);
try {
if (!window.firebase || !window.firebase.firestore) throw new Error('Firestore unavailable');
await window.firebase.firestore().collection('enquiries').add({
firstName: form.firstName.trim(),
lastName: form.lastName.trim(),
name: (form.firstName.trim() + ' ' + form.lastName.trim()).trim(),
company: form.company.trim(),
email: form.email.trim(),
message: form.request.trim(),
source: 'ourwork.audience2media.com',
page: (() => { try { return window.location.href; } catch (e) { return ''; } })(),
read: false,
createdAt: Date.now(),
});
setSubmitting(false);
setSubmitted(true);
setForm({ firstName: '', lastName: '', company: '', email: '', request: '' });
setAttempted(false);
setTimeout(() => setSubmitted(false), 6000);
} catch (err) {
setSubmitting(false);
setError('Sorry — that didn’t send. Please email info@audience2media.com directly.');
}
};
const baseField = {
width: '100%',
background: 'transparent',
border: 'none',
borderBottom: '1px solid rgba(244,241,235,0.18)',
color: '#F4F1EB',
fontFamily: 'inherit',
fontSize: 15,
fontWeight: 400,
padding: '14px 0 12px',
outline: 'none',
transition: 'border-color .25s ease',
};
return (
))}
