Under the hood

Each illusion is built from divs/grids: offset black-and-white rows with grey mortar (café wall), and white/black cells on a contrasting field (Hermann + scintillating grids).

'use client';

import * as React from 'react';

function CafeWall() {
  return (
    <div className="overflow-hidden rounded-md" style={{ width: 280 }}>
      {Array.from({ length: 8 }, (_, row) => (
        <div key={row} className="flex" style={{ marginLeft: (row % 2) * 17, height: 22 }}>
          {Array.from({ length: 9 }, (_, c) => (
            <div
              key={c}
              style={{ width: 34, height: 22, background: c % 2 === 0 ? '#14110b' : '#faf7ef', borderTop: '2px solid #888', borderBottom: '2px solid #888' }}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

function HermannGrid({ scintillating = false }: { scintillating?: boolean }) {
  const gap = 8;
  const cell = 34;
  return (
    <div
      className="grid rounded-md p-2"
      style={{
        gridTemplateColumns: `repeat(6, ${cell}px)`,
        gap,
        background: scintillating ? '#9aa' : '#14110b',
      }}
    >
      {Array.from({ length: 36 }, (_, i) => (
        <div
          key={i}
          style={{
            width: cell,
            height: cell,
            background: scintillating ? '#14110b' : '#faf7ef',
          }}
        />
      ))}
    </div>
  );
}

const ITEMS = [
  { node: <CafeWall />, title: 'Café Wall', note: 'The horizontal mortar lines are perfectly parallel — the offset rows make them look wedged.' },
  { node: <HermannGrid />, title: 'Hermann Grid', note: 'Ghostly grey blobs flicker at the intersections you are not looking at.' },
  { node: <HermannGrid scintillating />, title: 'Scintillating Grid', note: 'Dark dots appear and vanish at the crossings as your eyes move.' },
];

export function IllusionsGallery() {
  return (
    <div className="grid w-full max-w-3xl grid-cols-1 gap-x-10 gap-y-16 sm:grid-cols-2">
      {ITEMS.map((it) => (
        <figure key={it.title} className="flex flex-col items-center">
          <div className="flex min-h-[260px] items-center justify-center">{it.node}</div>
          <figcaption className="mt-8 text-center">
            <div className="font-bold">{it.title}</div>
            <p className="mx-auto max-w-[34ch] text-sm leading-snug opacity-70">{it.note}</p>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}