Text / React + Web APIs
Text Decode
Resolve a scrambled transmission into stable, readable typography.
Open experiment[ EXP-029 / PLAYGROUND MODE ]
Ransom Note Font Cycling / Playground
Keep the letters intact while each character independently switches typefaces.
EXP-029 / LIVE PREVIEW
AMIRUL HAQIMI
AMIRUL HAQIMI
REDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
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.
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.
03 / Implementation
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
| Parameter | Type | Range | Default |
|---|---|---|---|
| Minimum hold | Number | 1–5s | 1.2s |
| Random extra hold | Number | 0–3s | 2.4s |
| Typeface count | Number | 2–3 | 3 |
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.
Related experiments.
Text / React + Web APIs
Character Rise
Bring individual letters up into a readable line.
Open experiment