Data Display
Carousel
Carrossel 'marquee' — rolagem horizontal infinita e suave para logos, depoimentos ou cards. Itens duplicados para loop perfeito, bordas em fade, pausa no hover e respeito a prefers-reduced-motion.
npx shadcn add @studio/carousel Logos — loop infinito (pausa no hover)
Núcleo
Sorrir Bem
VitalCare
Movimento
Clareza
Equilíbrio
Núcleo
Sorrir Bem
VitalCare
Movimento
Clareza
Equilíbrio
Cards — direção invertida, mais lento
“Os agendamentos aumentaram no primeiro mês.”
“Transmite confiança antes da consulta.”
“Superou tudo o que eu esperava.”
“Finalmente uma presença à altura.”
“Os agendamentos aumentaram no primeiro mês.”
“Transmite confiança antes da consulta.”
“Superou tudo o que eu esperava.”
“Finalmente uma presença à altura.”
Movimento contínuo via animate-marquee; bordas em fade com marquee-mask. Pausa no hover e respeita prefers-reduced-motion.
Props
| Prop | Tipo | Descrição |
|---|---|---|
children | ReactNode | Itens exibidos em loop (obrigatório) |
gap | number | Espaço entre itens, em px |
speed | number | Duração de um ciclo, em s (menor = mais rápido) |
pauseOnHover | boolean | Pausa o movimento ao passar o mouse |
reverse | boolean | Inverte a direção do movimento |
className | string | Classes adicionais no container |