Index Overlay Menu

"use client";
/* eslint-disable @next/next/no-img-element -- Deliberate: a plain img keeps
   this component runnable outside Next, and the treatment (greyscale +
   multiply) is applied to the element itself. */

import { useEffect, useRef, useState, type KeyboardEvent } from "react";

/**
 * A full-screen menu set like the index of a printed book: numbered entries in
 * heavy type on the left, a treated photograph plate on the right that changes
 * with whichever entry is under the pointer or the keyboard.
 *
 * THE PLATE WIPES IN THE DIRECTION OF TRAVEL. Moving DOWN the list, the next
 * photograph rises from the bottom edge; moving UP, it drops from the top. The
 * image behaves like the next page of a stack rather than a slideshow frame,
 * which is most of why this reads as editorial instead of as a hover effect.
 * Each change mounts a NEW keyed layer whose CSS animation runs once on
 * mount, over the previous layers, so a fast sweep down the list never has to

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}