sep 4, 2025
my take on split-to-edit interaction. built using Next.js + Framer Motion.
allow smooth transition wrapped within LayoutGroup + shared layoutId on the three segments i.e animates the position/size between "together" and "separated" layouts.
use contentEditable instead of inputs to maintain pixel perfect UI, settleBordersAfter() delays switching inner corners from rounded to sharp, so borders don't snap immediately after saving.