Contact Grid draws each letter with a grid of small shapes — circles, squares, hexagons, brush marks — that switch on in sequence, live for one cycle and fade, so the word is always assembling and dissolving.
It began with Cranny, Frontify's variable typeface: a custom version of Azurio, made by Narrow Type. For Frontify Futures, Cranny was stripped back to its skeleton — two reductions, Frame and Hairline — which act as hidden scaffolding and are never shown directly. Contact Grid runs on these bases.
The text is set in Frame on a hidden canvas, a grid is laid over it, and only the cells that make contact with the letterforms are drawn. Timing, easing, wave patterns and motion drivers decide when and how each cell appears. On the Futures website and social channels the typefaces exist only as sets of parameters, generated live by the plugin — so no headline is ever rendered the same way twice.
In use · Frontify Futures
Live on frontify.com/futures, every headline set by the plugin
The bases
Cranny Frame Base and Cranny Hairline Base are reductions of Cranny, the skeletons Contact Grid builds on. They’re never shown directly: the plugin sets the word in Frame on a hidden canvas and draws only the cells that touch it. Both cover the same 404 characters.
Facts
- Drivers
- Time, Cursor, Scroll, Audio, Wind Data
- Renders with
- Canvas 2D
- Commissioned
- Frontify Futures, 2025
Credits
- Identity, type system, Frame & Hairline bases, development
- Daniel Powell
- Cranny
- Frontify's typeface, a custom version of Azurio made by Narrow Type
- Frontify Futures concept
- James Fooks-BaleTim Noakes
- Social videos
- Eleonora BonorvaSamuel Lewek
Press
| Publication | Article | Date |
|---|
Behind the scenes
Type generator v2
The final phase: a fully working Futures tool where nodes can be added, wired and removed. It brings in camera and recording, so designers capture photographs and video and work them through the system, and it holds an archive of the original articles. More on danielpow.com ↗
A plugin and a tool
One engine, two front ends
Contact Grid lives on the web twice. The tool is where a look is found: a node editor for wiring text, bases, drivers and brushes together. The plugin is how it ships: a small script that sets each article's own headline live, in the reader's browser.
Both run the same engine, a set of plain functions for timing, drivers, patterns and effects with no page code in them. Whatever works in the editor works on the site. The hero at the top of this page is the plugin.
The tool
futures.danielpow.com
- Litegraph node editor
- 46 nodes
- Presets, recording, font export
- ≈ 1 MB of JavaScript
Shared engine
engine/
- timing
- drivers
- patterns
- effects
The plugin
effects.min.js
- frontify.com/futures
- Settings per article, from the CMS
- Live text, nothing pre-rendered
- 55 KB
<script>
window.shapeType = "circle";
window.cellScale = 1.4;
window.gridCount = 210;
window.bounceWidth = 1000;
window.speed = 100;
</script>
<script src="effects.min.js"></script>Step 3, up close
The contact test
Each cell counts the letter's pixels underneath it and lights once the count passes a threshold. The threshold grows with the cell, so anti-aliasing alone can't switch a cell on.
As the letter drifts, edge cells hover right on the line and strobe. Hysteresis stops it: a lit cell needs only half the coverage to stay lit. Turn it off to see the edges flicker.
Step 4, the order
Arrival patterns
The timer doesn't light cells at random; random is one choice. A pattern gives every cell a delay between 0 and 1, and as the timer runs, each cell whose delay has passed is drawn.
The engine has eleven. Contact Grid's presets use random, and the Echo Chambers article header uses vertical wave. The faint field behind each letter is the delay map itself.
What moves it
Drivers
Anything that moves comes from a driver: a small function ticked sixty times a second. Its output can be wired to any number in the system, such as grid count, brush scale or bounce.
These traces are the engine's own driver code, running live. The editor also has audio (bass and treble from the microphone), mouse, scroll, camera, clock, noise and stagger.
From motion to font
Font Export
Any moment of the animation can become a static font. For each character the Font Export node sets the letter, clears the grid, restarts the timer and waits a set number of frames (30 by default). Then it traces the canvas into vector outlines.
After the last character, it bundles the glyphs into an OTF and a WOFF.
- Set
- Clear
- Restart
- Wait 30 frames
- Trace