Client-side verification logic
// All logic runs in the browser — no API key or server call needed.
// 1. Generate a 4×4 grid with 3-4 injected target symbols.
// 2. User clicks tiles; selected indices are tracked in state.
// 3. On submit, compare selected set against correct indices.
// 4. If sets match exactly → success; otherwise → reset with new grid.
const correct = new Set(
grid.map((s, i) => s === target ? i : -1).filter(i => i !== -1)
);
const ok =
[...correct].every(i => selected.has(i)) &&
[...selected].every(i => correct.has(i));
How it works
A 4x4 grid of 16 emoji symbols is generated with 3–4 target occurrences injected at random positions. The user must click every instance of the target and nothing else. Verification is purely client-side — no network round-trip required.
When to use this pattern
Client-side CAPTCHAs are suitable for low-stakes friction (comment spam, demo throttling). For account creation or payment flows, pair with a server-verified provider like Turnstile.