Glyph Wave Field
A field of letters on canvas that behaves like water: drag the pointer and a wake of weight follows, tap and rings travel out, crests swelling to 900 in the accent and troughs thinning to hairlines.
Canvas 2D0 deps1 file · 15 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode, RefObject } from "react";
/**
* GlyphWaveField — a field of letters that behaves like water.
*
* A grid of letters on canvas over a 2D wave: drag the pointer and a wake of
* weight follows, tap and a stone's rings travel out. Crests swell to 900,
* expand and take the accent; troughs thin to hairlines and condense. Drawn
* from a glyph atlas of the face at nine weights and three widths, at up to
* 30fps and only on screen, idling at 10fps with a slow 34s swell when still.
* The letters follow your text in reading order. Content goes on top as
* children; reduced motion draws one still frame.
*
* Part of the Kinetic Type kit: paper #f0ede2 and ink #131315 (an inverted
* ink stage for loud sections), one accent that letters take only under
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A background made of type that moves like water. The letters of your text fill a grid in reading order, so the words stay legible, and under them runs a real 2D wave. Drag the pointer through it and a wake follows: letters on the crest swell to full weight, expand and take the accent, letters in the trough thin to hairlines and condense, and the rings spread, cross and fade over a couple of seconds. A tap drops a stone. When nobody touches it a slow swell on 34 and 41 second cycles keeps it breathing. It is drawn on canvas from an atlas of the face pre-set at nine weights and three widths, so hundreds of letters change weight every frame at almost no cost, at up to 30fps and only on screen, idling at 10fps when the water is still. Content goes on top as children.
Curator’s note
The Kinetic Type kit's surface (slot 2), cut from kinetic-type-site. Pro: a 2D wave simulation drawn from a canvas glyph atlas of the variable face at nine weights and three widths; the footer and the site reprise it.
