[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"article-2026-02-28-motion-v":3},{"title":4,"description":5,"date":6,"tags":7,"author":14,"thumbnail":18,"path":21,"body":22},"Animating UI with motion-v + AOS","Combine motion-v and AOS to create smooth entrance animations, scroll effects, and view transitions.","2026-02-28",[8,11],{"name":9,"slug":10},"Animations","animations",{"name":12,"slug":13},"UX","ux",{"name":15,"avatar":16},"0x00webs",{"src":17,"alt":15},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F178827097",{"src":19,"alt":20},"\u002Fdefault-og-image.png","motion-v animations","\u002Farticles\u002F2026-02-28-motion-v",{"type":23,"value":24,"toc":66},"minimark",[25,29,34,37,41,59],[26,27,28],"p",{},"Motion can make interfaces feel alive, but it should never get in the way.",[30,31,33],"h3",{"id":32},"quick-tip","Quick tip",[26,35,36],{},"Use small, purposeful motion—like slight elevation on hover and gentle fade-ins—to guide attention without overwhelming.",[30,38,40],{"id":39},"setup","Setup",[42,43,44,53],"ul",{},[45,46,47,48,52],"li",{},"Use ",[49,50,51],"code",{},"motion-v"," for component-based animations.",[45,54,47,55,58],{},[49,56,57],{},"aos"," for scroll-based entry animations.",[26,60,61,62,65],{},"Keep your motions consistent and respect ",[49,63,64],{},"prefers-reduced-motion",".",{"title":67,"searchDepth":68,"depth":68,"links":69},"",3,[70,71],{"id":32,"depth":68,"text":33},{"id":39,"depth":68,"text":40},1773510780870]