Skip to content

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.

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.

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.

KeynoteThu 14 · 10:00Letters Have MassInes ValcourtHall AWorkshopThu 14 · 14:30Drawing Width by HandTomas EkwuemeStudio 2TalkFri 15 · 09:30The Grid Is a RumourMira TessendorfHall ATalkFri 15 · 16:00Contrast as WeatherYuki ArendsenThe Long RoomWorkshopSat 16 · 11:00Type for Screens That MoveNoor El-HaddadStudio 2KeynoteSun 17 · 10:30After the SpecimenSaoirse LindqvistHall A

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 A

  • Drawing 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 2

  • The 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 A

  • Contrast 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 Room

  • Type for screens that move

    Timing, easing and stagger for letters on screens that scroll, swipe and never hold still.

    Sat 16 · 11:00
    Studio 2

  • Specimens 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 A

  • After 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 A

  • Type 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

Passes

One day, all four, or all four with the workshops. Student passes are 40% less with a valid card at the door.

1 × pass
1 × FestivalTotal CHF 390Placeholder prices. Replace before shipping.
CHF390

Printed at the door

Passes are printed with your name in the festival face. Set it here; you can change it until 1 May.

0/28

Props

Scroll inside
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

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

Featured
NewPro

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.

herovariable fontkinetic type
NewPro

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

pricingticketspasses
New

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

cardvariable fontkinetic type