Skip to content

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.

ProKinetic Typeeditorialminimal

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.

Preview
Weightfield · Edition 04Type in motion

14—17 May 2027 · Lausanne · Four days of type in motion

Four days of talks, workshops and night sessions on type that moves, answers and rebuilds.

Props

Axis readout
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

The 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.

templatelanding pagefestival
NewPro

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.

sectionlineupspeakers
NewPro

A 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.

footerwordmarkvariable font