npm install framer-motion

import { motion } from 'framer-motion'

export function AnimatedBox() {
  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 2 }}
      className="w-20 h-20 bg-blue-600"
    />
  )
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2
    }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

export function List() {
  return (
    <motion.div variants={containerVariants} initial="hidden" animate="visible">
      {[1, 2, 3].map(i => (
        <motion.div key={i} variants={itemVariants}>
          Item {i}
        </motion.div>
      ))}
    </motion.div>
  )
}

export function HoverCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="bg-white p-6 rounded-lg shadow-lg cursor-pointer"
    >
      Click me!
    </motion.div>
  )
}

export function Page() {
  return (
    <motion.div
      initial={{ opacity: 0, x: 100 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -100 }}
      transition={{ duration: 0.3 }}
    >
      Page content
    </motion.div>
  )
}

import { useScroll, useMotionValueEvent } from 'framer-motion'

export function ScrollElement() {
  const { scrollY } = useScroll()

  useMotionValueEvent(scrollY, 'change', (latest) => {
    console.log('Page scrolled:', latest)
  })

  return <div>Content</div>
}