Flush Lineup Poster
A line-up set as a type poster: every name flush across the measure at one cap height, pointing clenches a name into the accent, choosing opens it, and day filters collapse the rest to hairlines.
DOM + CSS0 deps1 file · 34 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* FlushLineupPoster — a line-up set as a type poster.
*
* Every name stands flush across the full measure at one cap height, however
* long it is: the width axis takes up the difference. Point at a name and it
* clenches into the accent while the others step back; choose it and it
* opens loud with its talk, time and room. Day filters collapse the other
* names to hairlines and close the gaps (420ms), and the rest re-set at the
* same height. Rows are buttons with aria-expanded; filters are pressed
* toggles.
*
* Part of the Kinetic Type kit: paper #f0ede2 and ink #131315 (an inverted
* ink stage for loud sections), one accent that letters take only under
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this section
The festival poster's oldest trick done properly: a line-up where every name runs flush across the full measure. Here they all stand at one cap height, however long they are, because the width axis takes up the difference, so a short name is set wide and a long one condensed, and the column reads as one block of type. Point at a name and it clenches, heavier and higher in contrast and in the accent, while the others step back; choose it and it opens loud with the talk, the time and the room beneath. The day filters collapse every name that isn't on that day to a hairline and close the gaps, and the remaining names re-set at the same height. It sits on the ink stage by default, and every row is a real button with a disclosure panel.
Curator’s note
The Kinetic Type kit's feature section (slot 7), cut from kinetic-type-site. Pro: a stateful system of flush lines sized as one group, per-row hover and open settings, day filters that collapse rows to hairlines, and disclosure panels.
