Flush Pressure Hero
A 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.
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.
Props
"use client";
import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* FlushPressureHero — a first screen set as a type poster that answers the hand.
*
* The name stands in flush lines at one cap height, each exactly as wide as
* the page; a quiet flush line of dates and place sits beneath. The pointer
* presses weight, width and contrast into the letters near it and leans them
* into a fast sweep, and the rest of each line condenses to make room, so
* every line stays flush while it moves (the width axis is solved live, one
* layout a frame). Letters rebuild from hairlines on arrival, a mono readout
* reports the axes under the pointer, and the name packs down, heavier and
* condensed, as the hero scrolls away. The calls to action are the kit's
* AxisPressButton. Reduced motion shows it set and still.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The first screen of a festival or a type launch, set the way a poster is set rather than laid out like a page. The name stands in flush lines that share one size, so they meet both edges at one cap height and differ only in width, with a quiet flush line of dates and place beneath. Move the pointer across it and the letters near it gain weight, width and contrast and take the accent, while every other letter in the line condenses to give them room: the line moves but never breaks or overflows, because the width axis is solved live for each line, a small correction every frame. A fast sweep leans the letters it crosses. The letters rebuild from hairlines as the hero arrives, a mono readout names the axes under the pointer, and as the hero scrolls away the name packs down, heavier and condensed. Nothing moves on a timer.
Curator’s note
The Kinetic Type kit's hero (slot 1, Featured), cut from kinetic-type-site. Pro: a full-width poster composing the kit's flush-type engine (a live width-axis solve per line), pointer pressure with a sweep lean, a hairline entrance, a scroll pack-down, a live axis readout and the kit's press buttons.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Kinetic Type Site
templatesThe whole Kinetic Type kit as one festival site: a flush nav, a pressure poster hero, a glyph wave field, a scrolled manifesto, the programme, a flush line-up, rebuilding passes, a name badge and a rising footer.
Flush Lineup Poster
sectionsA 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.
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.