Motion Design & Digital Experiences

A public library where each motion technique runs live in the browser, next to its timing, its exact HEX colors and a copy-ready snippet. I built it to see which techniques I could actually reuse in tour campaigns, reels and landing pages.

Analysis of the reference videos, design of the library, and all code.

• CSS and SVG animation
• JavaScript for the player, search and detail views
• Demos written as pure functions of time, so any frame can be reproduced
• A small Python build step that turns the data files into the page

Showing dozens of live animations at once without making a phone struggle.

Demos load only when they approach the screen and unload when far away, the number of live demos is capped, and heavy visual effects are removed on touch devices. Each tile shows a still poster first, so nothing appears blank while a demo loads.

Category reels play a group of techniques in sequence, so a whole category can be judged in about half a minute.

Not yet documented. Screens or diagrams that can be shown publicly.

• 71 techniques, 10 reference videos and 131 exact colors at the time of this build.
• Public, with its own repository and deployment.

Live and growing.