The spec sheet for web motion.

Live previews you can pick by eye. Motion tokens and AI-ready prompts your agent can build from. Vanilla HTML/CSS/JS, framework-neutral.

21 effects5 categoriesUpdated weekly
Component
Trigger
Tech
Target

Accordion expandWeb · App
List Press Pure CSS time-based
Button loading spinnerWeb · App
Button Press Pure CSS time-based
Card flipWeb · App
Card Press Pure CSS time-based
Card lift on hoverWeb only
Card Hover Pure CSS time-based
Curtain image revealWeb · App
Scroll Enter view Pure CSS time-based
Settings
Header condense on scrollWeb · App
Scroll Scroll progress CSS scroll-timeline scroll-progress
  • Alpha82
  • Bravo47
  • Charlie95
  • Delta63
List reorder (FLIP)Web · App
List Press Web Animations APIVanilla JS time-based
Magnetic buttonWeb only
Button Hover Vanilla JSGSAP time-based
Modal scale-inWeb · App
Transition Press Pure CSS time-based
Inbox
Message
Page slide transitionWeb · App
Transition Route change Pure CSS time-based
Parallax heroWeb · App
Scroll Scroll progress CSS scroll-timelineGSAP scroll-progress
Reading progress barWeb only
Scroll Scroll progress CSS scroll-timelineGSAP scroll-progress
Ripple pressApp · Web
Button Press Web Animations API time-based

Good motion explains what just happened, where things came from and where they went. It is a specification, not decoration, and every value in it should be a decision you can name.

Scroll text highlightWeb only
Scroll Scroll progress CSS scroll-timelineGSAP scroll-progress
Scroll zoom-out imageWeb · App
Scroll Scroll progress CSS scroll-timelineGSAP scroll-progress
Maya ChenPushed 3 commits
Ravi PatelOpened a pull request
Lena FischerCommented on #42
Skeleton shimmerWeb · App
List Load Pure CSS time-based
Sliding tab indicatorWeb · App
Button Press Pure CSSVanilla JS time-based
Spring press buttonWeb · App
Button Press Pure CSS time-based
Staggered reveal on enterWeb · App
Scroll Enter view Pure CSS time-based
Effects
0
Copies
0
Stars
0
Stats count-up on enterWeb · App
List Enter view Vanilla JSGSAP time-based
Toggle switchWeb · App
Button Press Pure CSS time-based
New effects every weekOne email, no noise. Unsubscribe anytime.