Index Overlay Menu
A full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.
DOM + CSS0 deps1 file · 18 KB TSXreduced-motion aware
Props
"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
// ---------------------------------------------------------------
}Details
About this component
Full-screen menus are where small-business sites most often look like templates: a black overlay, five centred links, a fade. This one is set like the index of a printed book instead — numbered entries in heavy uppercase type, a monospace detail against each, and a photograph plate that follows whichever entry the pointer or keyboard is on. The photograph is treated rather than dropped in: greyscale multiplied into a single saturated field, so any client photo, however it was shot, lands inside the palette. Two details carry most of the effect. The plate wipes in the direction of travel — rising when you move down the list, dropping when you move up — which makes the images behave like a stack of pages rather than a carousel. And each change mounts a fresh keyed layer whose animation runs once over the previous ones, so sweeping quickly down the list never has to cancel or re-time anything. The list is centred with auto margins rather than justify-center, which keeps every entry scrollable on a short screen. It is a proper dialog: focus moves in when opened, Tab is trapped, arrow keys browse, Escape returns focus to the trigger.
Curator’s note
The plate wipes up when you move down the list and down when you move up. It is one boolean, and it is the difference between a slideshow and a page turning.
