const{Fragment:l,jsx:n,jsxs:e}=arguments[0];function _createMdxContent(r){const c={a:"a",blockquote:"blockquote",code:"code",em:"em",figure:"figure",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...r.components},{Example:a,motion:o}=c;return a||_missingMdxReference("Example",!0),o||_missingMdxReference("motion",!1),o.button||_missingMdxReference("motion.button",!0),o.div||_missingMdxReference("motion.div",!0),o.li||_missingMdxReference("motion.li",!0),o.ul||_missingMdxReference("motion.ul",!0),e(l,{children:[e(c.p,{children:["Animation can be the difference between a good UI and an ",n(c.strong,{children:"unforgettable"})," one. ",n(c.strong,{children:"Framer Motion"})," is the go-to animation library for React — it gives you production-ready animations with remarkably little code. This guide walks you from zero to confident, covering every concept you'll actually use on the job."]}),"\n",e(c.blockquote,{children:["\n",e(c.p,{children:["Hit the ",n(c.strong,{children:"Replay"})," button on any example below to re-run the animation."]}),"\n"]}),"\n",n(c.h2,{id:"installation",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:"Installation"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"bash","data-theme":"catppuccin-macchiato",children:n(c.code,{"data-language":"bash","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:"npm"}),n(c.span,{style:{color:"#A6DA95"},children:" install"}),n(c.span,{style:{color:"#A6DA95"},children:" framer-motion"})]})})})}),"\n",n(c.p,{children:"No additional configuration needed — it works out of the box with Next.js, Vite, and Create React App."}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"1-the-motion-component",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#1-the-motion-component",children:["1. The ",n(c.code,{children:"motion"})," Component"]})}),"\n",e(c.p,{children:["Every HTML element has a ",n(c.code,{children:"motion"})," equivalent. Swap ",n(c.code,{children:"

"})," for ",n(c.code,{children:""})," and you unlock the full animation API."]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"import"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" motion "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#C6A0F6"},children:" from"}),n(c.span,{style:{color:"#A6DA95"},children:' "framer-motion"'}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Before"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#8AADF4"},children:"div"}),n(c.span,{style:{color:"#EED49F"},children:" className"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"box"'}),n(c.span,{style:{color:"#8BD5CA"},children:" />"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// After — now animatable ✨"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"}),n(c.span,{style:{color:"#EED49F"},children:" className"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"box"'}),n(c.span,{style:{color:"#8BD5CA"},children:" />"})]})]})})}),"\n",e(c.p,{children:["Available for every HTML tag: ",n(c.code,{children:"motion.p"}),", ",n(c.code,{children:"motion.button"}),", ",n(c.code,{children:"motion.img"}),", ",n(c.code,{children:"motion.ul"}),", ",n(c.code,{children:"motion.li"}),", and so on."]}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"2-initial-animate-and-transition",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#2-initial-animate-and-transition",children:["2. ",n(c.code,{children:"initial"}),", ",n(c.code,{children:"animate"}),", and ",n(c.code,{children:"transition"})]})}),"\n",n(c.p,{children:"These three props are the foundation of every Framer Motion animation."}),"\n",e(c.table,{children:[n(c.thead,{children:e(c.tr,{children:[n(c.th,{children:"Prop"}),n(c.th,{children:"Purpose"})]})}),e(c.tbody,{children:[e(c.tr,{children:[n(c.td,{children:n(c.code,{children:"initial"})}),n(c.td,{children:"The starting state"})]}),e(c.tr,{children:[n(c.td,{children:n(c.code,{children:"animate"})}),n(c.td,{children:"The target state to animate toward"})]}),e(c.tr,{children:[n(c.td,{children:n(c.code,{children:"transition"})}),e(c.td,{children:["Controls ",n(c.em,{children:"how"})," the animation plays"]})]})]})]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 24"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" duration"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.5"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ease"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "easeOut"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:">"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CAD3F5"},children:" I fade in from below ✨"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:""})]})]})})}),"\n",n(a,{children:e(o.div,{initial:{opacity:0,y:32,scale:.95},animate:{opacity:1,y:0,scale:1},transition:{duration:.5,ease:[.22,1,.36,1]},style:{background:"linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",borderRadius:"16px",padding:"18px 22px",display:"flex",alignItems:"flex-start",gap:"14px",boxShadow:"0 20px 60px -10px rgba(99,102,241,0.45), 0 4px 16px rgba(0,0,0,0.08)",maxWidth:"340px",width:"100%"},children:[n("div",{style:{fontSize:"26px",lineHeight:1,flexShrink:0},children:"✨"}),e("div",{children:[n("div",{style:{color:"white",fontWeight:700,fontSize:"15px",marginBottom:"5px"},children:"Animation Complete!"}),n("div",{style:{color:"rgba(255,255,255,0.72)",fontSize:"13px",lineHeight:"1.6"},children:e(c.p,{children:["Faded in using ",n("code",{style:{background:"rgba(255,255,255,0.18)",padding:"1px 7px",borderRadius:"5px",fontSize:"12px"},children:"easeOut"})," with a subtle scale effect."]})})]})]})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"3-transitions--control-the-feel",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#3-transitions--control-the-feel",children:"3. Transitions — Control the Feel"})}),"\n",n(c.p,{children:"Framer Motion supports several transition types, each with a distinct character."}),"\n",n(c.h3,{id:"tween--duration-based",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tween--duration-based",children:[n(c.code,{children:"tween"})," — Duration-based"]})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:n(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "tween"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" duration"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.4"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ease"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "easeInOut"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]})})})}),"\n",n(c.h3,{id:"spring--physics-based-most-natural",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#spring--physics-based-most-natural",children:[n(c.code,{children:"spring"})," — Physics-based (most natural)"]})}),"\n",e(c.p,{children:["The most satisfying feel. Controlled by ",n(c.code,{children:"stiffness"})," (how fast) and ",n(c.code,{children:"damping"})," (how bouncy)."]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.button"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 400"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 10"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:">"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CAD3F5"},children:" Spring! 🌱"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:""})]})]})})}),"\n",n(a,{children:n("div",{style:{display:"flex",gap:"10px",flexWrap:"wrap"},children:[{icon:"⚡",label:"Spring",meta:"stiffness: 400",bg:"linear-gradient(135deg,#6366f1,#4f46e5)",shadow:"#6366f170",delay:0},{icon:"🌊",label:"Staggered",meta:"delay: 0.12s",bg:"linear-gradient(135deg,#8b5cf6,#7c3aed)",shadow:"#8b5cf670",delay:.12},{icon:"🚀",label:"Launched",meta:"damping: 10",bg:"linear-gradient(135deg,#a78bfa,#8b5cf6)",shadow:"#a78bfa70",delay:.24}].map(({icon:l,label:r,meta:c,bg:a,shadow:s,delay:i})=>e(o.div,{initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},transition:{type:"spring",stiffness:400,damping:10,delay:i},style:{background:a,color:"white",borderRadius:"14px",padding:"16px 20px",display:"flex",flexDirection:"column",gap:"6px",minWidth:"118px",boxShadow:`0 10px 28px -4px ${s}`,cursor:"default"},children:[n("span",{style:{fontSize:"24px",lineHeight:1},children:l}),n("span",{style:{fontWeight:700,fontSize:"14px"},children:r}),n("span",{style:{fontSize:"11px",opacity:.75,fontFamily:"monospace"},children:c})]},r))})}),"\n",n(c.h3,{id:"stiffness--damping-comparison",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#stiffness--damping-comparison",children:"Stiffness & Damping Comparison"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Stiff spring — snappy"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 600"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 30"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Soft spring — floaty"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 80"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 12"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Bouncy spring — playful"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 300"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 8"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]})]})})}),"\n",n(a,{children:n("div",{style:{display:"flex",flexDirection:"column",gap:"8px",width:"100%",maxWidth:"380px"},children:[{label:"Snappy",meta:"stiffness: 600 · damping: 30",accent:"#6366f1",spring:{stiffness:600,damping:30}},{label:"Floaty",meta:"stiffness: 80 · damping: 12",accent:"#8b5cf6",spring:{stiffness:80,damping:12}},{label:"Bouncy 🏀",meta:"stiffness: 300 · damping: 8",accent:"#a78bfa",spring:{stiffness:300,damping:8}}].map(({label:l,meta:r,accent:c,spring:a})=>e(o.div,{initial:{x:-80,opacity:0},animate:{x:0,opacity:1},transition:{type:"spring",...a},style:{display:"flex",alignItems:"center",justifyContent:"space-between",background:"hsl(var(--muted))",borderRadius:"10px",padding:"12px 16px",borderLeft:`4px solid ${c}`,gap:"12px"},children:[n("span",{style:{fontWeight:700,fontSize:"14px"},children:l}),n("code",{style:{fontSize:"11px",color:c,fontFamily:"monospace",whiteSpace:"nowrap"},children:r})]},l))})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"4-variants--scalable-animation-state",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#4-variants--scalable-animation-state",children:"4. Variants — Scalable Animation State"})}),"\n",e(c.p,{children:["Once you animate more than two elements, hardcoding props everywhere becomes messy. ",n(c.strong,{children:"Variants"})," let you define named animation states and share them across a component tree."]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"const"}),n(c.span,{style:{color:"#CAD3F5"},children:" containerVariants "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" hidden"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" visible"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" staggerChildren"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.1"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:" },"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"};"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"const"}),n(c.span,{style:{color:"#CAD3F5"},children:" itemVariants "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" hidden"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" x"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"20"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" visible"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" x"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"};"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" AnimatedList"}),n(c.span,{style:{color:"#939AB7"},children:"({"}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" items"}),n(c.span,{style:{color:"#939AB7"},children:" })"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.ul"}),n(c.span,{style:{color:"#EED49F"},children:" variants"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"containerVariants"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"hidden"'}),n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"visible"'}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"items"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:"map"}),n(c.span,{style:{color:"#CAD3F5"},children:"("}),n(c.span,{style:{color:"#939AB7"},children:"("}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:"item"}),n(c.span,{style:{color:"#939AB7"},children:")"}),n(c.span,{style:{color:"#C6A0F6"},children:" =>"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.li"}),n(c.span,{style:{color:"#EED49F"},children:" key"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"item"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"id"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#EED49F"},children:" variants"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"itemVariants"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"item"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"label"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" ))"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",e(c.p,{children:["The magic: children ",n(c.strong,{children:"inherit"})," ",n(c.code,{children:"initial"})," and ",n(c.code,{children:"animate"})," from the parent automatically. The ",n(c.code,{children:"staggerChildren"})," cascades through every child."]}),"\n",n(a,{children:e("div",{style:{background:"hsl(var(--muted)/0.6)",borderRadius:"14px",padding:"10px",width:"100%",maxWidth:"260px"},children:[n("div",{style:{fontSize:"10px",fontWeight:700,color:"hsl(var(--muted-foreground))",padding:"4px 10px 10px",letterSpacing:"0.1em",textTransform:"uppercase"},children:n(c.p,{children:"Navigation"})}),n(o.ul,{initial:"hidden",animate:"visible",variants:{hidden:{},visible:{transition:{staggerChildren:.1}}},style:{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:"3px"},children:[{icon:"🏠",label:"Dashboard",active:!0},{icon:"📊",label:"Analytics",active:!1},{icon:"🗂️",label:"Projects",active:!1},{icon:"⚙️",label:"Settings",active:!1}].map(({icon:l,label:r,active:c})=>e(o.li,{variants:{hidden:{opacity:0,x:-18},visible:{opacity:1,x:0,transition:{type:"spring",stiffness:300,damping:24}}},style:{background:c?"#6366f1":"transparent",color:c?"white":"inherit",borderRadius:"9px",padding:"9px 12px",fontWeight:c?700:500,fontSize:"13.5px",display:"flex",alignItems:"center",gap:"10px",cursor:"pointer"},children:[n("span",{style:{fontSize:"16px"},children:l}),n("span",{style:{flex:1},children:r}),c&&n("span",{style:{fontSize:"10px",background:"rgba(255,255,255,0.22)",padding:"2px 8px",borderRadius:"999px",fontWeight:600},children:"Active"})]},r))})]})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"5-gesture-animations",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#5-gesture-animations",children:"5. Gesture Animations"})}),"\n",n(c.p,{children:"Framer Motion makes interactive animations trivial with dedicated gesture props."}),"\n",n(c.h3,{id:"whilehover-and-whiletap",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#whilehover-and-whiletap",children:[n(c.code,{children:"whileHover"})," and ",n(c.code,{children:"whileTap"})]})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.button"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileHover"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1.05"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileTap"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.95"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 400"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 17"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:">"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CAD3F5"},children:" Hover & click me"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:""})]})]})})}),"\n",n(a,{children:e("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[n(o.button,{whileHover:{scale:1.05,boxShadow:"0 16px 40px -6px rgba(99,102,241,0.55)"},whileTap:{scale:.95},transition:{type:"spring",stiffness:400,damping:17},style:{background:"linear-gradient(135deg,#6366f1,#8b5cf6)",color:"white",border:"none",borderRadius:"12px",padding:"12px 24px",fontWeight:700,cursor:"pointer",fontSize:"14px",boxShadow:"0 6px 20px -4px rgba(99,102,241,0.45)",display:"flex",alignItems:"center",gap:"7px"},children:n(c.p,{children:"✨ Get Started"})}),n(o.button,{whileHover:{scale:1.05,borderColor:"#6366f1",color:"#6366f1"},whileTap:{scale:.95},transition:{type:"spring",stiffness:400,damping:17},style:{background:"transparent",color:"hsl(var(--foreground))",border:"2px solid hsl(var(--border))",borderRadius:"12px",padding:"12px 24px",fontWeight:700,cursor:"pointer",fontSize:"14px"},children:n(c.p,{children:"Learn More →"})})]})}),"\n",n(c.h3,{id:"drag",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#drag",children:n(c.code,{children:"drag"})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" drag"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"x"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" dragConstraints"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" left"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"120"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" right"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 120"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileDrag"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1.1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" rotate"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 4"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:">"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CAD3F5"},children:" Drag me ← →"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:""})]})]})})}),"\n",n(a,{children:e("div",{style:{position:"relative",height:"110px",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:[e("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",gap:"6px",fontSize:"12px",color:"hsl(var(--muted-foreground))",pointerEvents:"none",userSelect:"none"},children:[n("span",{style:{opacity:.5},children:"←"}),n("span",{children:"drag anywhere"}),n("span",{style:{opacity:.5},children:"→"})]}),e(o.div,{drag:"x",dragConstraints:{left:-130,right:130},whileDrag:{scale:1.08,rotate:5,boxShadow:"0 28px 60px -8px rgba(99,102,241,0.6)"},transition:{type:"spring",stiffness:300,damping:22},style:{background:"linear-gradient(135deg,#6366f1,#8b5cf6)",color:"white",borderRadius:"14px",padding:"14px 22px",fontWeight:700,cursor:"grab",userSelect:"none",fontSize:"14px",boxShadow:"0 8px 28px -4px rgba(99,102,241,0.5)",display:"flex",alignItems:"center",gap:"10px",position:"relative",zIndex:1},children:[n("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",style:{opacity:.8},children:n("path",{d:"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18",stroke:"currentColor",strokeWidth:"2",fill:"none",strokeLinecap:"round"})}),n(c.p,{children:"Drag me!"})]})]})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"6-animatepresence--animate-on-enter--exit",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#6-animatepresence--animate-on-enter--exit",children:["6. ",n(c.code,{children:"AnimatePresence"})," — Animate on Enter & Exit"]})}),"\n",e(c.p,{children:["React removes elements from the DOM instantly. ",n(c.code,{children:"AnimatePresence"})," intercepts that removal and plays an ",n(c.code,{children:"exit"})," animation first."]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"import"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" motion"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" AnimatePresence "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#C6A0F6"},children:" from"}),n(c.span,{style:{color:"#A6DA95"},children:' "framer-motion"'}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" Notification"}),n(c.span,{style:{color:"#939AB7"},children:"({"}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" show"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" message"}),n(c.span,{style:{color:"#939AB7"},children:" })"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"AnimatePresence"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"show "}),n(c.span,{style:{color:"#8BD5CA"},children:"&&"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" key"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"notification"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"16"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.95"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" exit"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"16"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.95"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 300"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 24"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"message"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",e(c.blockquote,{children:["\n",e(c.p,{children:[n(c.strong,{children:"Key rule:"})," Always give the ",n(c.code,{children:"motion"})," element inside ",n(c.code,{children:"AnimatePresence"})," a stable ",n(c.code,{children:"key"})," prop — it's how Framer Motion tracks which element to animate out."]}),"\n"]}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"7-scroll-animations-with-usescroll-and-usetransform",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#7-scroll-animations-with-usescroll-and-usetransform",children:["7. Scroll Animations with ",n(c.code,{children:"useScroll"})," and ",n(c.code,{children:"useTransform"})]})}),"\n",n(c.p,{children:"Create scroll-driven progress bars, parallax effects, and elements that react to scroll position."}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"import"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" useScroll"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" useTransform"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" motion "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#C6A0F6"},children:" from"}),n(c.span,{style:{color:"#A6DA95"},children:' "framer-motion"'}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" ParallaxHero"}),n(c.span,{style:{color:"#939AB7"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" scrollY "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:" ="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useScroll"}),n(c.span,{style:{color:"#CAD3F5"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // opacity goes 1 → 0 as user scrolls 0 → 300px"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useTransform"}),n(c.span,{style:{color:"#CAD3F5"},children:"(scrollY"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ["}),n(c.span,{style:{color:"#F5A97F"},children:"0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#F5A97F"},children:" 300"}),n(c.span,{style:{color:"#CAD3F5"},children:"]"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ["}),n(c.span,{style:{color:"#F5A97F"},children:"1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#CAD3F5"},children:"])"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // background moves at 40% scroll speed (parallax)"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#CAD3F5"},children:" y "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useTransform"}),n(c.span,{style:{color:"#CAD3F5"},children:"(scrollY"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ["}),n(c.span,{style:{color:"#F5A97F"},children:"0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#F5A97F"},children:" 300"}),n(c.span,{style:{color:"#CAD3F5"},children:"]"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ["}),n(c.span,{style:{color:"#F5A97F"},children:"0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#F5A97F"},children:" 120"}),n(c.span,{style:{color:"#CAD3F5"},children:"])"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.section"}),n(c.span,{style:{color:"#EED49F"},children:" style"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y "}),n(c.span,{style:{color:"#939AB7"},children:"}}"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#8AADF4"},children:"h1"}),n(c.span,{style:{color:"#8BD5CA"},children:">"}),n(c.span,{style:{color:"#CAD3F5"},children:"Scroll to fade me"}),n(c.span,{style:{color:"#8BD5CA"},children:""})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.h3,{id:"reading-progress-bar",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#reading-progress-bar",children:"Reading Progress Bar"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" ReadingProgressBar"}),n(c.span,{style:{color:"#939AB7"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" scrollYProgress "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:" ="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useScroll"}),n(c.span,{style:{color:"#CAD3F5"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" className"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"fixed top-0 left-0 h-1 bg-primary origin-left"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" style"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scaleX"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#CAD3F5"},children:" scrollYProgress "}),n(c.span,{style:{color:"#939AB7"},children:"}}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" />"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"8-layout-animations",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#8-layout-animations",children:"8. Layout Animations"})}),"\n",n(c.p,{children:"One of Framer Motion's most impressive features — animate layout changes automatically."}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Reordering items? just add `layout`"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"}),n(c.span,{style:{color:"#EED49F"},children:" layout"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"item"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"name"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:""})]})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// Shared element transitions between states"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.img"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" layoutId"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#A6DA95"},children:"`product-image-"}),n(c.span,{style:{color:"#939AB7"},children:"${"}),n(c.span,{style:{color:"#CAD3F5"},children:"product"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"id"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#A6DA95"},children:"`"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" src"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"product"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"image"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:"/>"})})]})})}),"\n",n(a,{children:n(o.div,{layout:!0,style:{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:"10px",width:"100%"},children:[{icon:"🎨",title:"Design",tag:"UI/UX",accent:"#6366f1"},{icon:"⚙️",title:"Backend",tag:"Node.js",accent:"#8b5cf6"},{icon:"📱",title:"Mobile",tag:"React Native",accent:"#a78bfa"}].map(({icon:l,title:r,tag:c,accent:a},s)=>e(o.div,{layout:!0,initial:{opacity:0,y:20,scale:.88},animate:{opacity:1,y:0,scale:1},transition:{type:"spring",stiffness:280,damping:22,delay:.1*s},style:{background:"hsl(var(--muted))",borderRadius:"12px",padding:"14px",display:"flex",flexDirection:"column",gap:"8px",borderTop:`3px solid ${a}`},children:[n("span",{style:{fontSize:"22px",lineHeight:1},children:l}),n("div",{style:{fontWeight:700,fontSize:"13px"},children:r}),n("span",{style:{fontSize:"11px",background:a+"22",color:a,padding:"2px 9px",borderRadius:"999px",alignSelf:"flex-start",fontWeight:600},children:c})]},r))})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"9-real-world-patterns",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#9-real-world-patterns",children:"9. Real-World Patterns"})}),"\n",n(c.h3,{id:"page-transition-wrapper",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#page-transition-wrapper",children:"Page Transition Wrapper"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"export"}),n(c.span,{style:{color:"#C6A0F6"},children:" function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" PageTransition"}),n(c.span,{style:{color:"#939AB7"},children:"({"}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" children"}),n(c.span,{style:{color:"#939AB7"},children:" })"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.main"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 12"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" exit"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"12"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" duration"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.25"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ease"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "easeInOut"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"children"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.h3,{id:"staggered-card-grid",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#staggered-card-grid",children:"Staggered Card Grid"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"const"}),n(c.span,{style:{color:"#CAD3F5"},children:" gridVariants "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" hidden"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {},"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" visible"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" staggerChildren"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.08"}),n(c.span,{style:{color:"#939AB7"},children:" }"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"};"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"const"}),n(c.span,{style:{color:"#CAD3F5"},children:" cardVariants "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" hidden"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.92"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 16"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" visible"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 260"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 20"}),n(c.span,{style:{color:"#939AB7"},children:" },"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:" },"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"};"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" ProjectGrid"}),n(c.span,{style:{color:"#939AB7"},children:"({"}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" projects"}),n(c.span,{style:{color:"#939AB7"},children:" })"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" className"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"grid grid-cols-3 gap-6"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" variants"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"gridVariants"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"hidden"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"visible"'})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"projects"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:"map"}),n(c.span,{style:{color:"#CAD3F5"},children:"("}),n(c.span,{style:{color:"#939AB7"},children:"("}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:"project"}),n(c.span,{style:{color:"#939AB7"},children:")"}),n(c.span,{style:{color:"#C6A0F6"},children:" =>"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"}),n(c.span,{style:{color:"#EED49F"},children:" key"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"project"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"id"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#EED49F"},children:" variants"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"cardVariants"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#8AADF4"},children:"h3"}),n(c.span,{style:{color:"#8BD5CA"},children:">"}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"project"}),n(c.span,{style:{color:"#8BD5CA"},children:"."}),n(c.span,{style:{color:"#CAD3F5"},children:"name"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:""})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" ))"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.h3,{id:"animated-accordion-item",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#animated-accordion-item",children:"Animated Accordion Item"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" AccordionItem"}),n(c.span,{style:{color:"#939AB7"},children:"({"}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" title"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#EE99A0",fontStyle:"italic"},children:" content"}),n(c.span,{style:{color:"#939AB7"},children:" })"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#939AB7"},children:" ["}),n(c.span,{style:{color:"#CAD3F5"},children:"isOpen"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" setIsOpen"}),n(c.span,{style:{color:"#939AB7"},children:"]"}),n(c.span,{style:{color:"#8BD5CA"},children:" ="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useState"}),n(c.span,{style:{color:"#CAD3F5"},children:"("}),n(c.span,{style:{color:"#F5A97F"},children:"false"}),n(c.span,{style:{color:"#CAD3F5"},children:")"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#8AADF4"},children:"div"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.button"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" onClick"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{()"}),n(c.span,{style:{color:"#C6A0F6"},children:" =>"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" setIsOpen"}),n(c.span,{style:{color:"#CAD3F5"},children:"("}),n(c.span,{style:{color:"#8BD5CA"},children:"!"}),n(c.span,{style:{color:"#CAD3F5"},children:"isOpen)"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileTap"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.98"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"title"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.span"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" rotate"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#CAD3F5"},children:" isOpen "}),n(c.span,{style:{color:"#8BD5CA"},children:"?"}),n(c.span,{style:{color:"#F5A97F"},children:" 180"}),n(c.span,{style:{color:"#8BD5CA"},children:" :"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 300"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 24"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CAD3F5"},children:" ▼"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"AnimatePresence"}),n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#F5A97F"},children:"false"}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#8BD5CA"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"isOpen "}),n(c.span,{style:{color:"#8BD5CA"},children:"&&"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" key"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"content"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" height"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" height"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "auto"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" exit"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" height"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" duration"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.25"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" ease"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "easeInOut"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" style"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" overflow"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "hidden"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" >"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:"content"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"10-performance-tips",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#10-performance-tips",children:"10. Performance Tips"})}),"\n",e(c.p,{children:[n(c.strong,{children:"Animate only GPU-accelerated properties."})," Stick to ",n(c.code,{children:"transform"})," and ",n(c.code,{children:"opacity"})," — these never trigger layout recalculations."]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// ✅ GPU-accelerated — smooth at 60fps"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" x"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 100"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 50"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1.1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" rotate"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 5"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.8"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// ❌ Triggers layout paint — avoid"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:"animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" width"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 200"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" height"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 100"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" top"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 50"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" marginLeft"}),n(c.span,{style:{color:"#939AB7"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 20"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]})]})})}),"\n",n(c.p,{children:n(c.strong,{children:"Respect user accessibility preferences:"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"import"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" useReducedMotion "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#C6A0F6"},children:" from"}),n(c.span,{style:{color:"#A6DA95"},children:' "framer-motion"'}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"function"}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" HeroCard"}),n(c.span,{style:{color:"#939AB7"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" const"}),n(c.span,{style:{color:"#CAD3F5"},children:" shouldReduce "}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#8AADF4",fontStyle:"italic"},children:" useReducedMotion"}),n(c.span,{style:{color:"#CAD3F5"},children:"()"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:" return"}),n(c.span,{style:{color:"#CAD3F5"},children:" ("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:" <"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"shouldReduce "}),n(c.span,{style:{color:"#8BD5CA"},children:"?"}),n(c.span,{style:{color:"#939AB7"},children:" {}"}),n(c.span,{style:{color:"#8BD5CA"},children:" :"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 20"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" y"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"shouldReduce "}),n(c.span,{style:{color:"#8BD5CA"},children:"?"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" duration"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }"}),n(c.span,{style:{color:"#8BD5CA"},children:" :"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:" />"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CAD3F5"},children:" )"}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#939AB7"},children:"}"})})]})})}),"\n",n(c.hr,{}),"\n",n(c.h2,{id:"quick-reference",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#quick-reference",children:"Quick Reference"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#24273a",color:"#cad3f5"},tabIndex:"0","data-language":"jsx","data-theme":"catppuccin-macchiato",children:e(c.code,{"data-language":"jsx","data-theme":"catppuccin-macchiato",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#C6A0F6"},children:"import"}),n(c.span,{style:{color:"#939AB7"},children:" {"}),n(c.span,{style:{color:"#CAD3F5"},children:" motion"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" AnimatePresence"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" useScroll"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" useTransform "}),n(c.span,{style:{color:"#939AB7"},children:"}"}),n(c.span,{style:{color:"#C6A0F6"},children:" from"}),n(c.span,{style:{color:"#A6DA95"},children:' "framer-motion"'}),n(c.span,{style:{color:"#939AB7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:"// All core props at a glance"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8BD5CA"},children:"<"}),n(c.span,{style:{color:"#F5BDE6"},children:"motion.div"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // Entry & exit states"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" initial"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.9"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" x"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"20"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" animate"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" x"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" exit"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" opacity"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.9"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // Transition"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" transition"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" type"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#A6DA95"},children:' "spring"'}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" stiffness"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 260"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" damping"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 20"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" delay"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.1"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // Gestures"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileHover"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 1.04"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" whileTap"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" scale"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 0.96"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" drag"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"x"'})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" dragConstraints"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{{"}),n(c.span,{style:{color:"#CAD3F5"},children:" left"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#8BD5CA"},children:" -"}),n(c.span,{style:{color:"#F5A97F"},children:"100"}),n(c.span,{style:{color:"#939AB7"},children:","}),n(c.span,{style:{color:"#CAD3F5"},children:" right"}),n(c.span,{style:{color:"#8BD5CA"},children:":"}),n(c.span,{style:{color:"#F5A97F"},children:" 100"}),n(c.span,{style:{color:"#939AB7"},children:" }}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // Variants"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" variants"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#939AB7"},children:"{"}),n(c.span,{style:{color:"#CAD3F5"},children:"myVariants"}),n(c.span,{style:{color:"#939AB7"},children:"}"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6E738D",fontStyle:"italic"},children:" // Layout"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#EED49F"},children:" layout"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#EED49F"},children:" layoutId"}),n(c.span,{style:{color:"#8BD5CA"},children:"="}),n(c.span,{style:{color:"#A6DA95"},children:'"unique-shared-id"'})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#8BD5CA"},children:"/>"})})]})})}),"\n",n(c.hr,{}),"\n",e(c.p,{children:["Framer Motion rewards you quickly — a few lines produce animations that would take hundreds of lines of raw CSS. Start with ",n(c.code,{children:"initial"})," and ",n(c.code,{children:"animate"}),", reach for ",n(c.strong,{children:"variants"})," when logic repeats, then let ",n(c.code,{children:"AnimatePresence"})," and ",n(c.code,{children:"useScroll"})," handle the polish."]}),"\n",n(c.p,{children:"Happy animating. 🎬"})]})}return{default:function(l={}){const{wrapper:e}=l.components||{};return e?n(e,{...l,children:n(_createMdxContent,{...l})}):_createMdxContent(l)}};function _missingMdxReference(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}

Bagas Blog

Mastering Framer Motion — Smooth Animations in React