Build a shrink-on-scroll navigation with Tailwind CSS: a tall header (h-20 or more) with generous padding and the logo at full size, which compacts to h-14 with a smaller logo and a shadow once the visitor scrolls past a threshold. Transition the height, padding and logo size together so it reads as one motion, keep the bar sticky throughout, and skip the animation entirely under prefers-reduced-motion.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。