Skip to content
Yazan Nasser

The laboratory

8 experiments, all working

Where the ideas of this issue are tested before they become chapters. Every piece below runs live in your browser.

  1. 01Dimensional type
  2. 02Fluid field
  3. 03Flow-field typography
  4. 04Material study
  5. 05Letters with physics
  6. 06Axis playground
  7. 07Letter rose
  8. 08Infinite frames

Experiment 01

Dimensional type

Two letter outlines are extruded with a bevel and rendered with physically based materials, lit by a virtual room.

Built with
Three.js, WebGL
Try
Drag the letters to spin them, then switch the material.

Experiment 02

Fluid field

Noise folded into itself three times, computed for every pixel by a fragment shader and mapped onto a five color palette.

Built with
WebGL, GLSL
Try
Move through the field to stir it, and change the palette.

Experiment 03

Flow-field typography

Particles are born inside a letter and follow a seeded noise field. The same seed always draws the same piece.

Built with
Canvas 2D, seeded noise
Try
Ask for a new composition, pause it halfway, or save it as a PNG.

Glyph Y · Seed 1907 · 0%

Experiment 04

Material study

Chrome, glass, foil and paper made only of gradients and shadows that recalculate as the light moves.

Built with
CSS custom properties
Try
Move across the tiles, or drag a finger over them.
01
ChromeA metal gradient bent around the light, with a hot spot where it lands.
02
GlassA clear letter over color: an edge, a highlight and a shadow, and nothing else.
03
Holographic foilA conic spectrum anchored to the light, so the color travels as you move.
04
Pressed paperThe letter has no color of its own. Light and shadow press it into the sheet.

Experiment 05

Letters with physics

Every letter is a small spring with its own position and velocity, pushed by the pointer and pulled back home.

Built with
DOM, a spring per letter
Try
Run the pointer through the sentence.

Every letter here is a spring. Push them around, they always find their way home.

Experiment 06

Axis playground

The variable typeface of this edition, with its width and weight axes exposed as sliders.

Built with
Variable fonts
Try
Type your own line and pull the axes.

Every letter is a decision

62
900
9 vw
-0.03 em

Archivo variable: width 62 to 125, weight 100 to 900. Same font file, every setting.

Experiment 07

Letter rose

A rose curve walked step by step, with one letter of the name placed at every step. One number sets the petals.

Built with
Canvas 2D, trigonometry
Try
Slide the petals from two to nine.
5, 5 petals

Experiment 08

Infinite frames

Fourteen frames, each 72 percent of the last. Zoom through two of them and the picture repeats exactly.

Built with
CSS transforms
Try
Pull the depth slider all the way and watch it loop.
Frame 1
Made with Modulify