sites-ux-interaction

Sites UX Interaction — Padrões de Interação

Navegação

Header sticky

const [scrolled, setScrolled] = useState(false)
useEffect(() => {
  const handleScroll = () => setScrolled(window.scrollY > 20)
  window.addEventListener('scroll', handleScroll, { passive: true })
  return () => window.removeEventListener('scroll', handleScroll)
}, [])

<header className={cn(
  "fixed top-0 w-full z-50 transition-all duration-300",
  scrolled ? "bg-white/95 backdrop-blur shadow-sm" : "bg-transparent"
)}>

Astro nativo (sem hooks — <script> roda uma vez no client, escopado ao componente):

<header id="site-header">…</header>
<script>
  const header = document.getElementById('site-header')
  const onScroll = () => header?.classList.toggle('scrolled', window.scrollY > 20)
  window.addEventListener('scroll', onScroll, { passive: true })
</script>

Mobile nav (Sheet)

<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Menu">
      <Menu className="h-5 w-5" />
    </Button>
  </SheetTrigger>
  <SheetContent side="right">...</SheetContent>
</Sheet>

Em Astro, duas opções — escolher conforme o projeto já tiver React instalado ou não:

• Nativo, sem framework: <details>/<summary> com CSS, zero JS enviado ao navegador.
• Ilha React do Sheet acima, hidratada só no breakpoint mobile: <Sheet client:media="(max-width: 768px)">…</Sheet> — vale quando o projeto já usa React em outras ilhas e não compensa reescrever o componente em CSS puro.

Animações com Motion (motion/react, ex-Framer Motion)

Enter animations

// Fade in up (elemento)
<motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }}>

// Stagger em lista
<motion.div variants={{ animate: { transition: { staggerChildren: 0.1 } } }} initial="initial" animate="animate">
  {items.map(item => <motion.div key={item} variants={fadeInUp}>{item}</motion.div>)}
</motion.div>