Morph

import { AnimatePresence, motion, MotionConfig } from 'motion/react';

const SIZE = { idle: 'h-9 w-30', timer: 'h-9 w-60', music: 'h-35 w-80' };
const RADIUS = { idle: 18, timer: 18, music: 32 };
type Activity = keyof typeof SIZE;

export function StatusIsland({ activity }: { activity: Activity }) {
  return (
    // reducedMotion='user' makes the size change instant for people who prefer less motion.
    <MotionConfig
      reducedMotion='user'
      transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}
    >
      {/* layout animates the new size; animating borderRadius keeps the corners round while it scales. */}
      <motion.div
        layout
        initial={false}
        animate={{ borderRadius: RADIUS[activity] }}
        className={`relative overflow-hidden bg-black text-white ${SIZE[activity]}`}
      >
        {/* The content fades separately, so text never stretches with the shape. */}
        <AnimatePresence mode='popLayout' initial={false}>
          <motion.div
            key={activity}
            layout
            initial={{ opacity: 0 }}
            animate={{ opacity: 1, transition: { delay: 0.1 } }}
            exit={{ opacity: 0, transition: { duration: 0.1 } }}
            className='flex size-full items-center gap-3 px-4 text-sm'
          >
            {activity === 'timer' && (
              <>
                <span>Focus</span>
                <span className='ml-auto text-orange-400 tabular-nums'>
                  24:59
                </span>
              </>
            )}
            {activity === 'music' && (
              <>
                <span className='size-16 shrink-0 rounded-xl bg-linear-to-br from-fuchsia-500 to-orange-400' />
                <span>
                  <span className='block font-medium'>Midnight City</span>
                  <span className='block text-white/60'>M83</span>
                </span>
              </>
            )}
          </motion.div>
        </AnimatePresence>
      </motion.div>
    </MotionConfig>
  );
}