LazyMotion

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

import { LazyMotion, domAnimations } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = ({ isVisible }) => (
  <LazyMotion features={domAnimations}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

// features.js
import { domAnimations } from "motion/react"
export default domAnimations
  
// index.js
const loadFeatures = import("./features.js")
  .then(res => res.default)

function Component() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div animate={{ scale: 1.5 }} />
    </LazyMotion>
  )
}

// This component will throw an error that explains using a motion component
// instead of the m component will break the benefits of code-splitting.
function Component() {
  return (
    <LazyMotion features={domAnimations} strict>
      <motion.div />
    </LazyMotion>
  )
}