← Back to/

UI Experiments

Experiments, demos, and things I'm learning in public.

  • 01. Morphing Floating Menu

    A header that morphs from inline hero content into a fixed navbar as you scroll. Uses shared layout animations so the logo and brand text animate smoothly between states.

    MotionlayoutIduseInViewTailwind
  • 02. Stacked Cards

    Coffee stamp cards that expand on click. Layout animations with AnimatePresence and LayoutGroup for shared element transitions between stacked and selected states.

    MotionAnimatePresenceLayoutGroupTailwind
  • 03. Steps

    A steps component that highlights the current step.

    MotionTailwindlayoutIdanimateuseMotionValue
  • 04. Option Group

    A group of options that can be selected. Uses Motion shared layout transitions and react-use-measure to track option bounds dynamically.

    MotionTailwindlayoutIduseMeasure