Expertise, the specimen book

Six disciplines, all running on this site

A specimen book shows a typeface instead of describing it. This one does the same for a practice: every discipline comes with a working example you can try.

Specimen 01

Development

One engine moves you between every page of this site. It is shown here by doing it: each card opens a page with a different transition style.

01Detect the click
02Cover the page
03Swap out of sight
04Restore the scroll
05Reveal the new page

Typographic revealThe destination name is set huge, then its letters become windows that open onto the next page.Open The issue

Editorial wipeA printed panel with a running head slides across, like turning a page.Open About

Scale transformationThe card you choose grows to fill the screen and becomes the opening of the next page.Open My Subs

Layered revealThree sheets of color rise in sequence, then lift away in reverse.Open The laboratory

Color transformationA circle grows from your click in the old color and turns into the new one.Open Contact

Specimen 02

Digital design

A palette is only as good as what can be read on it. These are the real contrast ratios of the color pairs used in this edition, calculated with the WCAG formula.

Ink on Paper17.15:1AAA
Paper on Electric6.01:1AA
Paper on Violet5.11:1AA
Ink on Coral6.46:1AA
Ink on Tangerine8.26:1AAA
Ink on Lavender11.43:1AAA
Ink on Acid17.32:1AAA
Graphite on Paper4.60:1AA

Specimen 03

Motion design

Five easing curves carry every movement in this issue. The graph is the shape; the runner is the feeling.

Reveal
expo.out
Letters and lines arriving
Cut
expo.inOut
Page transitions and wipes
Glide
power3.inOut
Scrubbed scroll sequences
Settle
power4.out
Elements coming to rest
Lift
back.out(1.4)
Stamps with a small overshoot

Specimen 04

Interactive 3D

3D is used once in this issue, where it earns its place: the initials, extruded and lit as an object. Drag it to turn it.

Creative coding

A program used as a drawing instrument. A letter is sampled, nine hundred particles are released from it, and a seeded noise field decides where they travel.

Glyph Y · Seed 1907 · 0%

Specimen 06

Technology

The tools this edition is actually built with, and the chapters of the issue where each one can be seen working.

Technology	Used for	See it in
Next.js	Routes, static pages and the page shell	Every page
React	Every component on every page	Every page
TypeScript	The whole codebase, typed end to end	Every page
Tailwind CSS	Layout, tokens and the type scale	Every page
GSAP and ScrollTrigger	Scroll storytelling, pinned scenes and page transitions	01 02 05 10 17
Three.js and WebGL	The extruded monogram and its materials	22
GLSL	The fluid field shader	23
Canvas 2D	Generative art, the letter rose, the floor grid	03 24 29
CSS 3D transforms	The avenue of letters and the exploded layers	03 08
Variable fonts	Width and weight used as motion	02 09 26
SVG	Masks, letter anatomy and drawings	05 06 14
SQLite	The editable profile, the projects and your letters	11 16 35

Now see it appliedThe projects Or put it to workWrite a letter