Lab

Type

Headline treatments, reveals, variable-font tricks. Type carries most of the personality of a page, and most of it is done with three or four properties.

Shimmer headline

A gradient sliding behind the letters, clipped to the glyphs. Three CSS properties do the whole thing; the interesting decisions are the timing function and where the gradient loops.

  • Gradient 100deg, 6 stops, first = last
  • background-size 320% 100%
  • Duration 8s linear infinite

Staggered character reveal

Every glyph rises out of its own mask, 26ms apart. The interesting decisions are all in the splitting: per word so the text still wraps, and one aria-label so a screen reader does not read it letter by letter.

  • Stagger 26ms per character
  • Duration 620ms
  • Easing cubic-bezier(0.16, 1, 0.3, 1)
All categories