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