Ransom Note Font Cycling.

01 / Overview

The portfolio name and section headings combine Cinzel, Cormorant Garamond and DM Serif Display. Each character changes independently after a randomized hold, while the wording stays readable. This archive study demonstrates the same font palette and timing idea with manual playback.

Naming & history

The older visual term is ransom-note typography, also described as typographic collage. Per-letter font cycling is a descriptive name for the animation, within the broader family of kinetic typography. Loki is a contemporary reference: Perception describes its opening logo flickering through different typographic sources. It is not evidence that Loki originated the technique. Jamie Reid's archive documents a ransom-note collage from 1976; that historical example is static, not this specific digital animation.

• Jamie Reid Archive — Call It Filthy Lucre (1976)
• Perception — Loki Season 1 opening title design
• Adobe — text animation and kinetic typography

02 / How it works

Split words into character cells and choose a different typeface whenever a character clock expires. Independent hold times avoid a repeating wave. All font layers share one grid cell so its maximum width is reserved. Pause freezes the clocks; Replay resets the composition. This is discrete font switching, rather than interpolating glyph outlines or scrambling the text.

Actual React demo source. Import this component with the archive stylesheet and pass variant (fontCycling), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.

Loading implementation…

04 / Parameters

05 / Usage & accessibility

Use Play to start independent font changes, Pause to freeze them and Replay to reset. Reduced motion retains a static mixed-font composition. A separate text label exposes the intact wording to assistive technology. Fonts load from Google Fonts with serif fallbacks; widest-glyph grid cells prevent each switch from shifting adjacent letters. The animation frame is cancelled on pause or unmount and hidden tabs do not advance character clocks.

Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.