Micro-interactions

Animated Hamburger

A three-bar hamburger that morphs to an X, driven by a toggle prop.

Cook BookMorph Rotate Translate

Install

bun add motion

Props

Prop	Type	Default	Description
toggle	boolean	false	Toggle between the hamburger and the X.

What It Demonstrates

Morph: One shape smoothly turns into another shape, e.g. Dynamic Island.
Rotate: Spin an element around a point.
Translate: Move an element along the X or Y axis.

Related Components

Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
Approach
A tile whose overlay enters from the exact edge your cursor crossed, and leaves the way you go.
Aperture
A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.
Inline Edit
Text that becomes its own input with nothing moving — one padded box, two contents, sized in CSS.
Crossing
A gallery-to-detail crossing on the View Transitions API, where one element is the same object in both views.

Appears In

components/registry/animated-hamburger/animated-hamburger.tsx

'use client'

import { MotionConfig, motion as m } from 'motion/react'

const CLOSED_INSET = '30%'

const HAMBURGER_VARIANTS = {
  top: {
    open: {
      rotate: ['0deg', '0deg', '45deg'],
      top: [CLOSED_INSET, '50%', '50%'],
    },
    closed: {
      rotate: ['45deg', '0deg', '0deg'],
      top: ['50%', '50%', CLOSED_INSET],
    },
  },
  middle: {
    open: { rotate: ['0deg', '0deg', '-45deg'] },
    closed: { rotate: ['-45deg', '0deg', '0deg'] },
  },
  bottom: {
    open: {
      rotate: ['0deg', '0deg', '45deg'],
      bottom: [CLOSED_INSET, '50%', '50%'],
      left: '50%',
    },
    closed: {
      rotate: ['45deg', '0deg', '0deg'],
      bottom: ['50%', '50%', CLOSED_INSET],
      left: '50%',
    },
  },
}

export function AnimatedHamburger({ open }: { open: boolean }) {
  return (
    <MotionConfig transition={{ duration: 0.4, ease: 'easeInOut' }}>
      <m.span
        initial={false}
        animate={open ? 'open' : 'closed'}
        className="relative block size-6"
        aria-hidden
      >
        <m.span
          variants={HAMBURGER_VARIANTS.top}
          className="absolute h-0.5 w-4 rounded-full bg-current"
          style={{ y: '-50%', left: '50%', x: '-50%', top: CLOSED_INSET }}
        />
        <m.span
          variants={HAMBURGER_VARIANTS.middle}
          className="absolute h-0.5 w-4 rounded-full bg-current"
          style={{ left: '50%', x: '-50%', top: '50%', y: '-50%' }}
        />
        <m.span
          variants={HAMBURGER_VARIANTS.bottom}
          className="absolute h-0.5 w-4 rounded-full bg-current"
          style={{
            x: '-50%',
            y: '50%',
            bottom: CLOSED_INSET,
            left: '50%',
          }}
        />
      </m.span>
    </MotionConfig>
  )
}