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.
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.
Why a festival for moving type
For five centuries a letter was a shape you chose once. A variable face is a range you move through: weight, width, slant, contrast. Weightfield is four days on what that does to reading, to interfaces and to the people who draw letters.
Four days, three rooms
Keynotes are set loud, talks are set, workshops are quiet. Twenty-two sessions across four days and three rooms.
Line-up
8 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 2Specimens after print
What a type specimen is for when the face has no single size, weight or width to show.
Sat 16 · 15:00
Hall AAfter 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 AType that answers back
Interfaces where the letters are the controls: pressure, proximity and the line between play and noise.
Sun 17 · 13:00
The Long Room
Printed at the door
Passes are printed with your name in the festival face. Set it here; you can change it until 1 May.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
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.
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.
Axis Session Card
componentsA programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hover pushes it further into its own kind.