Section 8 · Motion

Motion

Living marks: small, quiet animations for the site and decks.

All demos plus the keyframes11 files, one .zip

Motion says the same thing the brand says: unhurried, deliberate, warm. Each demo page shows one living mark with its timing, plus its own share button (copy the CSS, download the demo); the keyframes file underneath is the source of truth.

Demos

listening-ringsthe signature ripple, listen first

breathecalm scale on the shell

swimthe turtle crosses quietly

walkstep by steady step

pulsesoft emphasis for keys and CTAs

growththe seedling rise

sparka single celebratory glint

assemblethe mark draws itself

moves-compasswayfinding turn

header-railthe site header treatment

The keyframes

att-motion-keyframes.csscss · 1 KB