Documentación

Animaciones & Transiciones

Catálogo de movimiento del sistema Deiman: GSAP + ScrollTrigger para escenas hero, Tailwind transitions para micro-interacciones y keyframes propios para loops y marquesinas. Toda animación respeta el ritmo premium definido por las curvas cubic-bezier(0.22,1,0.36,1) y cubic-bezier(0.16,1,0.3,1).

Principios

Duración

Micro 200–500ms · contenidos 700–1200ms · scroll-scrub continuo.

Curvas

Premium: cubic-bezier(0.22,1,0.36,1). Suave/scroll: cubic-bezier(0.16,1,0.3,1). UI base: ease-out.

Stagger

Líneas tipográficas con 60–120ms; secciones grandes 200ms.

Hover lift

Traslado vertical entre -2px y -4px + incremento de sombra; nunca rotaciones.

GPU hints

will-change-[transform], will-change-[border-radius], will-change-[opacity,transform].

Reduced motion

Respetar prefers-reduced-motion: GSAP detect + fallback estático.

Entradas escénicas (GSAP)

Hero — entrada inicial

src/routes/ui.index.tsx · HeroCarousel

Trigger

Mount (animate-[hero-fade_900ms_ease-out])

Easing · duración

ease-out · 900ms

Comportamiento

Fade + translateY del bloque central. Textos con stagger 80ms entre líneas.

animate-[hero-fade_900ms_ease-out]

Hero — parallax & zoom de fondo

ui.index.tsx · gsap.to() + ScrollTrigger

Trigger

Scroll (scrub)

Easing · duración

power1.out · scrub

Comportamiento

Imagen de fondo escala de 1 → 1.18 mientras se hace scrub del scroll; recorta dentro del border-radius animado.

gsap.to(bg, { scale: 1.18, ease: 'power1.out', scrollTrigger: { scrub: true } })

Hero — border-radius dinámico

ui.index.tsx · onScroll listener

Trigger

window.scrollY > 40

Easing · duración

cubic-bezier(0.16,1,0.3,1) · 1100ms

Comportamiento

Las esquinas inferiores pasan de 120px a 0px al hacer scroll, fusionando el hero con la página.

transition-[border-radius] duration-[1100ms]

Hero — cambio de slide

HeroCarousel · setInterval 6500ms

Trigger

Auto-play / clic flechas / clic dots

Easing · duración

ease-out · 1400ms

Comportamiento

Cross-fade de imágenes (opacity 1400ms) + transición de colores tipográficos (1000ms) sincronizada con el slide activo.

Micro-interacciones

Botones primarios

Hero · banners CTA

Trigger

hover / active

Easing · duración

ease-out · 500ms

Comportamiento

translateY(-2px) + shadow-xl al hover; scale(0.95) al active. Color blanco/primario con curva uniforme.

hover:-translate-y-0.5 hover:shadow-xl transition-all duration-500

Flechas circulares (carrusel hero)

Hero · prev/next

Trigger

hover / active

Easing · duración

ease-out · 500ms

Comportamiento

Glass morphism (backdrop-blur + bg-white/15) con scale 1.10 al hover y 0.95 al active.

Cards de producto / receta

FeaturedProductCard, RecipeCard

Trigger

hover

Easing · duración

ease-out · 500ms / 1200ms

Comportamiento

Card sube -translate-y-1, sombra crece sm → xl, imagen interior hace zoom scale 1.04 durante 1200ms.

hover:-translate-y-1 hover:shadow-xl [&_img]:duration-[1200ms]

CTA banners (Distribuidores · Blog)

ui.index.tsx · banner cards

Trigger

hover

Easing · duración

ease-out · 500ms

Comportamiento

Lift -translate-y-1, sombra xl, icono circular crece a scale 1.10 y la flecha desplaza translate-x-1; padding del gap crece.

Links de navegación con flecha

Ver todos · CTA secciones

Trigger

hover

Easing · duración

ease-out · 500ms

Comportamiento

Icono ArrowRight desplaza 4px a la derecha con la curva del grupo.

group-hover:translate-x-1 transition-transform duration-500

Navegación y overlays

Header — colapso al hacer scroll

Header.tsx · atTop state

Trigger

window.scrollY < 20

Easing · duración

cubic-bezier(0.22,1,0.36,1) · 500ms

Comportamiento

Altura del header se reduce, el logo grande con caja roja colapsa al monograma, padding y gap entre links se ajustan.

transition-[height] duration-500

Logo dinámico

Header.tsx · centered logo

Trigger

scroll · atTop ↔ scrolled

Easing · duración

cubic-bezier(0.22,1,0.36,1) · 500ms

Comportamiento

Logo escala desde versión grande con fondo rojo a marca compacta; transición simultánea de tamaño, color y opacidad.

Overlay de búsqueda

Header.tsx · search dialog

Trigger

Click icono buscar

Easing · duración

cubic-bezier(0.22,1,0.36,1) · 200–500ms

Comportamiento

Slide-in-from-top-2 + fade-in (Radix data-state); contenedor pleno con duration 500ms. Cierre invertido.

animate-in fade-in slide-in-from-top-2

Mega-menú productos

Header.tsx · hover trigger

Trigger

hover sobre Productos

Easing · duración

ease-out · 200ms

Comportamiento

Aparece panel completo del ancho con sombra 0 24px 48px -12px rgba(20,20,15,0.18) y fade-in 200ms.

Loops y secundarias

Cert Marquee

ui.index.tsx · CertMarquee

Trigger

Mount continuo · pausa en hover

Easing · duración

linear · 30s

Comportamiento

Loop infinito de 30s desplazando el track. Pausa con group-hover:[animation-play-state:paused] y máscara lateral con gradient fade.

animate-[cert-scroll_30s_linear_infinite]

Imágenes interiores de card

FeaturedProductCard, RecipeCard

Trigger

hover en card padre

Easing · duración

ease-out · 1200ms

Comportamiento

Zoom suave de imagen scale 1.04 con 1200ms para evitar saltos visuales y reforzar el premium feel.

Dots de carrusel

Hero

Trigger

Cambio de slide

Easing · duración

ease-out · 700ms

Comportamiento

Dot activo crece a w-8 y adopta el color soft del slide; resto en blanco/40.

Keyframes registrados

@keyframes hero-fade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cert-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Utilidades adicionales */
.animate-fade-in   { animation: fade-in   .3s ease-out; }
.animate-scale-in  { animation: scale-in  .2s ease-out; }
.hover-scale       { transition: transform .2s; }
.hover-scale:hover { transform: scale(1.05); }