Experiments 04

Falling Code

Pretext measures and wraps the text. CSS animates the columns. Adjust the density or pause the animation below.

Pretext · CSS · TypographyView source 

pretext.rain

Notes on how it works

Notes

Engine

Layout runs through @chenglou/pretext, which measures and wraps the text.

Renderer

Columns are DOM nodes animated with CSS keyframes, costing one layout pass per resize.