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.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Line-up
6 speakers · 4 days
Letters have mass
Setting type that behaves like a material: weight as mass, width as room, and what happens to reading when both can move.
Thu 14 · 10:00
Hall ADrawing width by hand
A workshop in pencil first: drawing the narrowest and widest masters of one letter, then finding every width between them.
Thu 14 · 14:30
Studio 2The grid is a rumour
Why the best layouts of the last decade kept a grid and broke it on purpose, and how to tell the two apart.
Fri 15 · 09:30
Hall AContrast as weather
Contrast axes that change with light, time and mood, and the few cases where letting a face drift is the right call.
Fri 15 · 16:00
The Long RoomType for screens that move
Timing, easing and stagger for letters on screens that scroll, swipe and never hold still.
Sat 16 · 11:00
Studio 2After the specimen
The closing keynote: designing faces as ranges rather than styles, and what that asks of the people who set them.
Sun 17 · 10:30
Hall A
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Flush Wordmark Footer
sectionsA footer that ends the page in the face: a band of the glyph wave field carries a closing line, and the name stands flush across the width, rising from hairlines to full weight as the footer comes into view.
Axis Pass Pricing
sectionsPasses as tickets named in their own registers, quiet to loud: choose a pass, the count or the student rate and every figure that changes rebuilds digit by digit through the accent.
Flush Pressure Hero
heroesA first screen set as a type poster: the name in flush lines at one cap height, and the pointer presses weight, width and contrast into the letters near it while the rest condense so every line stays flush.