);
}
// 3D rotating KING — real WebGL via Three.js (LatheGeometry + cross finial)
// Tumbles on X and Y like a planet. Crisp at any angle.
function AKnight3D() {
const mountRef = useRef(null);
const [hovered, setHovered] = useState(false);
const hoverRef = useRef(false);
const targetRef = useRef({ x: 0, y: 0 });
useEffect(() => {
const THREE = window.THREE;
if (!THREE) return;
const mount = mountRef.current;
if (!mount) return;
const W = 420, H = 520;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, W / H, 0.1, 1000);
camera.position.set(0, 1.0, 9);
camera.lookAt(0, 0.3, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(W, H);
renderer.setClearColor(0x000000, 0);
mount.appendChild(renderer.domElement);
// Lights
scene.add(new THREE.AmbientLight(0xffffff, 0.55));
const key = new THREE.DirectionalLight(0xffffff, 1.2);
key.position.set(3, 5, 4); scene.add(key);
const rim = new THREE.DirectionalLight(0x3A6BFF, 0.7);
rim.position.set(-4, 2, -3); scene.add(rim);
const fill = new THREE.DirectionalLight(0xffffff, 0.3);
fill.position.set(-2, 1, 4); scene.add(fill);
// King silhouette profile — (x = radius, y = height) points for LatheGeometry
// Centered around y=0; total height ~3.6 units
const profile = [
[0.001, -1.8],
[0.85, -1.8],
[0.85, -1.72],
[0.78, -1.66],
[0.55, -1.58],
[0.5, -1.5],
[0.4, -1.35],
[0.32, -1.15],
[0.3, -0.9],
[0.38, -0.78],
[0.4, -0.7],
[0.36, -0.62],
[0.32, -0.4],
[0.32, -0.15],
[0.45, 0.0],
[0.6, 0.18],
[0.68, 0.4],
[0.68, 0.62],
[0.62, 0.78],
[0.7, 0.85],
[0.74, 0.92],
[0.7, 0.98],
[0.34, 1.05],
[0.3, 1.15],
[0.4, 1.22],
[0.4, 1.3],
[0.001, 1.3],
];
const points = profile.map(p => new THREE.Vector2(p[0], p[1]));
const lathe = new THREE.LatheGeometry(points, 96);
lathe.computeVertexNormals();
const mat = new THREE.MeshStandardMaterial({
color: 0x0a0a0a,
metalness: 0.35,
roughness: 0.42,
});
const king = new THREE.Mesh(lathe, mat);
scene.add(king);
// Cross finial: vertical bar + horizontal bar
const crossMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0a, metalness: 0.4, roughness: 0.4 });
const vBar = new THREE.Mesh(new THREE.BoxGeometry(0.16, 0.52, 0.16), crossMat);
vBar.position.y = 1.55;
scene.add(vBar);
const hBar = new THREE.Mesh(new THREE.BoxGeometry(0.42, 0.16, 0.16), crossMat);
hBar.position.y = 1.62;
scene.add(hBar);
// Group everything so we can rotate as one
const group = new THREE.Group();
group.add(king); group.add(vBar); group.add(hBar);
// re-parent
scene.remove(king); scene.remove(vBar); scene.remove(hBar);
group.add(king); group.add(vBar); group.add(hBar);
scene.add(group);
// Floor shadow plane (subtle)
const shadowGeo = new THREE.CircleGeometry(1.2, 32);
const shadowMat = new THREE.MeshBasicMaterial({ color: 0x0a0a0a, transparent: true, opacity: 0.18 });
const shadow = new THREE.Mesh(shadowGeo, shadowMat);
shadow.rotation.x = -Math.PI / 2;
shadow.position.y = -1.81;
scene.add(shadow);
// Animate
let rx = 0, ry = 0;
const onMove = (e) => {
const rect = renderer.domElement.getBoundingClientRect();
const px = (e.clientX - rect.left) / rect.width - 0.5;
const py = (e.clientY - rect.top) / rect.height - 0.5;
targetRef.current = { x: py * 1.2, y: px * 2.0 };
};
const onEnter = () => { hoverRef.current = true; setHovered(true); };
const onLeave = () => { hoverRef.current = false; setHovered(false); targetRef.current = { x: 0, y: 0 }; };
mount.addEventListener('mousemove', onMove);
mount.addEventListener('mouseenter', onEnter);
mount.addEventListener('mouseleave', onLeave);
let raf;
const clock = new THREE.Clock();
const tick = () => {
const dt = clock.getDelta();
if (hoverRef.current) {
// Hover: ease toward cursor target on top of slow tumble
rx += (targetRef.current.x - rx) * 0.08;
ry += (targetRef.current.y - ry) * 0.08;
group.rotation.x = rx;
group.rotation.y += dt * 0.5 + (ry - group.rotation.y) * 0.05;
} else {
// Idle: tumble like a planet — both axes drift
group.rotation.y += dt * 0.6;
group.rotation.x += dt * 0.18;
// gently ease back x toward natural cycle if it accumulates
}
renderer.render(scene, camera);
raf = requestAnimationFrame(tick);
};
tick();
return () => {
cancelAnimationFrame(raf);
mount.removeEventListener('mousemove', onMove);
mount.removeEventListener('mouseenter', onEnter);
mount.removeEventListener('mouseleave', onLeave);
renderer.dispose();
lathe.dispose();
mat.dispose();
crossMat.dispose();
if (mount.contains(renderer.domElement)) mount.removeChild(renderer.domElement);
};
}, []);
return (
◐ Hover to spin · The King
);
}
function AHero() {
return (
(001) — Performance marketing, London
High-intent, high-net-worth leads — ready to close.
AI-powered lead generation for alternative investment firms and wealth managers. Performance-built funnels, conversion-first creative, predictable pipeline. If we don't deliver, you don't pay.
);
}
function AProcess() {
const steps = [
{ n: '01', t: 'Strategy Call', d: 'Free strategy session worth £1,000. We diagnose your funnel, identify the biggest leverage points and map the opportunity — no sales pitch, no obligation.' },
{ n: '02', t: 'Build', d: 'Account architecture, tracking, creative and landing systems. Performance-built funnels and conversion-first creative — the plumbing before the campaigns.' },
{ n: '03', t: 'Deploy', d: 'Live campaigns across Meta, Google and LinkedIn. AI-powered targeting, weekly creative iteration, transparent reporting straight to your inbox.' },
{ n: '04', t: 'Scale', d: 'Once we hit your CPL targets, we compound. Lower CAC, higher LTV, predictable pipeline — and if we don\u2019t deliver, you don\u2019t pay.' },
];
return (
(005) — How we work4 phases / 90 days to compound
A system, not a guess.
{steps.map((s, i) => (
{s.n}
{s.t}
{s.d}
))}
);
}
function ATestimonial() {
return (
(006) — Verified on Trustpilot★★★★★ · Industry-leading
“Professional from start to finish, outperformed what we expected. A reliable lead source — consistent, easy to work with, and we’d definitely use them again.”
★
Verified Checkmate clients
Trustpilot · Reviews aggregated
);
}
function ATeam() {
const team = [
{ initials: 'AR', name: 'Alfie Rowland', role: 'CEO & Founder', bio: 'Sets the playbook for every Checkmate engagement. Built the agency from a single laptop into a six-vertical performance studio for alternative investments.' },
{ initials: 'AG', name: 'Ash Greaves', role: 'Creative Director', bio: 'Concepts, scripts and the scroll-stopping creative that earns the click in the first second. Owns the brand language across every channel we run.' },
{ initials: 'CB', name: 'Cam Bennett', role: 'Sales Director', bio: 'Your first conversation and last line of accountability. Closes the gap between what the funnel promises and what the boardroom needs.' },
];
return (
);
}
function ANews() {
const items = [
{ date: 'Apr 2026', tag: 'Case Study', title: 'How a cask whisky operator hit 4× ROAS in 60 days', read: '6 min read' },
{ date: 'Mar 2026', tag: 'Insight', title: 'The death of the broad-match keyword (and what replaces it)', read: '4 min read' },
{ date: 'Feb 2026', tag: 'Playbook', title: 'A Meta Ads creative system for high-ticket investments', read: '8 min read' },
];
return (
