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.
DOM + CSS0 deps1 file · 38 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.


