Kinetic Type Site
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.
Canvas 2D0 deps1 file · 122 KB TSXreduced-motion aware
Props
"use client";
import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { ChangeEvent, CSSProperties, FormEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from "react";
/**
* KineticTypeSite — the site for a festival of type in motion, set in the
* Kinetic Type register: paper, ink and one variable face whose weight, width,
* slant and contrast axes are the interface. Display lines are set flush to
* their measure, and the pointer presses weight into the letters near it
* while the rest of the line condenses to make room, so a line moves but
* never breaks or overflows.
*
* - A nav set as one flush line: the active link is loud and wide, the others
* condense, and the width flows between them as you choose.
* - A hero poster: the festival's name in two flush lines at one cap height,
* dates and city flush beneath, all under the pointer's pressure, with a
* live readout of the axes under it.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The whole kit as one site for Weightfield, a fictional four-day festival of type in motion. A nav whose links are one flush line with the width flowing to the section in view; a hero set as a poster, the name in flush lines at one cap height that the pointer presses heavier and wider while the rest of each line makes room; a glyph wave field framing a manifesto that is written by the scroll; the programme as session cards whose titles are set by their kind; the line-up on the ink stage, every name flush at one height, with day filters and names that open; passes whose figures rebuild digit by digit; a pass badge that sets your name as you type it; and a footer where the name rises as the page ends. Every name, date and price lives in one typed content object, marked as placeholder, and the badge needs your handler.
Curator’s note
The Kinetic Type kit site (slot 12): every asset in the kit composed around one typed content object, KT_DEMO, for a fictional design festival. The assets above are cut from this file, byte for byte.
