Accordion

About this accordion

A single-open accordion with spring-based layout and smooth expand/collapse. Active items get extra margin and rounded corners; borders and shadows update so expanded panels feel elevated. The chevron rotates 180° when open.

• Spring physics for margins and border radius
• AnimatePresence for height/opacity on content
• Corner logic so adjacent items share crisp edges when collapsed

Animation pattern

// 1. Item container: spring for margin & borderRadius
<motion.div
  animate={{
    marginTop: isActive ? 12 : 0,
    marginBottom: isActive ? 12 : 0,
    ...borderRadius,
  }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 30,
  }}
>

// 2. Expand/collapse content with AnimatePresence
<AnimatePresence>
  {isActive && (
    <motion.div
      initial={{ height: 0, opacity: 0 }}
      animate={{ height: "auto", opacity: 1 }}
      exit={{ height: 0, opacity: 0 }}
      transition={{
        duration: 0.3,
        ease: [0.04, 0.62, 0.23, 0.98],
      }}
    >
      {content}
    </motion.div>
  )}
</AnimatePresence>

// 3. Chevron rotation
<motion.div
  animate={{ rotate: isActive ? 180 : 0 }}
  transition={{ duration: 0.3 }}
>
  <ChevronDown />
</motion.div>