{isVideo ? (
) : (
)}
{link ?
{img} :
img}
);
}
// Shared phone — black bezel + screen. The recordings already include the iOS
// status bar + dynamic island, so we DON'T draw a notch (that produced a double
// notch). The poster still sits under the video; the video fades in on hover.
function CreativeScreen({ m, vidRef }) {
const isVideo = /\.(mp4|mov|webm)$/i.test(m);
const poster = isVideo ? `${m.replace(/\.(mp4|mov|webm)$/i, '-poster.png')}` : undefined;
return (
{isVideo ? (
) : (
)}
);
}
// Per-phone tilts for the casual "scatter" layout — varied rotateY (perspective),
// rotateZ (in-plane lean) and vertical offset, in mixed directions, so the four
// phones read as casually placed rather than a uniform row.
const CREATIVE_SCATTER = [
{ ry: 12, rz: -5, dy: 26 },
{ ry: -9, rz: 4, dy: -28 },
{ ry: 11, rz: -4, dy: 14 },
{ ry: -13, rz: 6, dy: -12 },
];
// Upright row (subtle perspective fan) and scatter (casual mixed tilts), project
// 07 default. Hover plays the video IN PLACE — the phone straightens and lifts a
// touch but never relocates, so the cursor stays on it (no "flying around").
function CreativesRow({ items, variant }) {
const vids = React.useRef([]);
const play = (i) => { const v = vids.current[i]; if (v && v.play) v.play().catch(() => {}); };
const pause = (i) => { const v = vids.current[i]; if (v && v.pause) { v.pause(); v.currentTime = 0; } };
const n = items.length;
return (
{items.map((m, i) => {
let vars;
if (variant === 'scatter') {
const s = CREATIVE_SCATTER[i % CREATIVE_SCATTER.length];
vars = { '--ry': s.ry + 'deg', '--rz': s.rz + 'deg', '--dy': s.dy + 'px' };
} else {
const t = i - (n - 1) / 2; // signed distance from centre
vars = { '--ry': (-t * 9) + 'deg', '--rz': '0deg', '--dy': '0px' };
}
return (
);
}
// Project 07 entry point — always the casual "scatter" layout. Shows the four
// feature clips: avatar-hook & VTON first (not used elsewhere), then
// logo-whisperer & de-template.
function CreativesMock({ media }) {
const items = Array.isArray(media) ? media : [media];
const ORDER = [4, 5, 2, 3];
const four = ORDER.every((i) => items[i]) ? ORDER.map((i) => items[i]) : items.slice(0, 4);
return play(i)}
onMouseLeave={() => pause(i)}>
vids.current[i] = el} />
);
})}
{type === 'phone' &&
);
}
Object.assign(window, { MeshBG, TopNav, Marquee, ProjectMock, GifMock, VideoMock, DuoMock, DiagramMock, CanvasMock, CreativesMock });