Motion (lazy)

LazyMotion + domAnimation pattern with strict mode. Motion code is in a separate lazy chunk.

stable client:visible

Source: src/components/islands/MotionDemo.tsx

Rendered example — light + dark

Light

Dark

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

import { LazyMotion, domAnimation, m } from 'motion/react';

// LazyMotion + domAnimation keeps the motion runtime in a lazy chunk.
export default function FadeIn() {
  return (
    <LazyMotion features={domAnimation} strict>
      <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        Hello, motion
      </m.div>
    </LazyMotion>
  );
}