Kinetic Type
in Motion

A demonstration of CSS scroll-driven choreography and GSAP micro-particles.

"Typography is the craft of endowing human language with a durable visual form."

Typography in Space

As you scroll, notice how the headline moves along a path defined purely in CSS. No JavaScript timeline drives this motion. The scroll position becomes the clock.

Offset Paths

The offset-path property ties the headline to an SVG path. Combined with animation-timeline: view(), the page creates a dual-layer rhythm.

Color as Signal

Each section derives its palette from semantic tags via color-mix(). The values shift as the reader moves through the article.

Particle Memory

Beneath this headline, GSAP emits fleeting letter fragments. They are tied to character and word maps but live in a separate layer.