fade-in-fade-outMotionTunable, copy-ready React motion primitives
slide-inMotionscale-inMotionrevealMotionstaggerMotionkeyframesPlaygrounddurationPlaygroundtranslatePlayground3d-tilt-flipMotionorigin-aware-animationMotioncrossfadeMotionmorphMotionaccordion-collapseMotiondirection-aware-transitionMotionscroll-revealMotionscroll-driven-animationPlaygroundparallaxMotionpage-transitionMotionhover-effectMotionpress-tap-feedbackMotionhold-to-confirmMotiondrag-to-reorderMotionswipe-to-dismissMotionshake-wiggleMotionrippleMotioneasingPlaygroundspringPlaygroundloopPlaygroundmarqueeMotionorbitMotionidle-animationMotionblurMotionbefore-after-sliderMotionline-drawingMotiontext-morphMotionskeleton-shimmerMotionnumber-tickerMotiontypewriterMotionguideReview path3 steps
- 1Record a frame
- 2Find long tasks
- 3Verify compositing
frame-rateGuidecompositingPlaygroundguideReview path3 steps
- 1Name the purpose
- 2Judge frequency
- 3Check spatial origin
purposeful-animationGuideanticipationPlaygroundguideReview path3 steps
- 1Respond now
- 2Show progress
- 3Signal completion
perceived-performanceGuideguideReview path3 steps
- 1Remove travel
- 2Preserve state
- 3Verify equal outcome
reduced-motionGuide