fadeup.lovable.app
Diseño que convierte
Construye landing pages premium con UX moderno.
Fade Up Reveal
Los elementos aparecen desde abajo con opacidad progresiva.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
InicioNivel 4 · Motion
Animaciones scroll-driven que convierten
Galería interactiva + manual completo: tokens de motion, easing, storyboards, recomendaciones por nicho y accesibilidad.
Galería
14 animaciones en vivo
Cada card es un mockup con la animación corriendo. Pasá el mouse para repetir.
Galería · Scroll-Driven
Animaciones impulsadas por scroll.
Una galería visual para explorar efectos modernos de movimiento, profundidad y narrativa digital aplicados a sitios web de alto impacto.
Estas animaciones ayudan a guiar la mirada, mejorar la experiencia del usuario, destacar información clave y crear una percepción premium sin perder claridad ni rendimiento.
Ver efecto
demo.preview/fade-up
Entrada
Fade Up Reveal
Los elementos aparecen desde abajo con suavidad al entrar en pantalla.
Impacto visual
Conversión
Cuándo usarlo: Hero, textos, secciones informativas, CTA.
Recomendación: Cualquier sección que necesite jerarquía clara.
Ver efecto
demo.preview/stagger
Cards
Stagger Cards
Las tarjetas entran una tras otra con micro retrasos.
Impacto visual
Conversión
Cuándo usarlo: Beneficios, servicios, testimonios, pasos.
Recomendación: Listas de 3 a 9 elementos visuales.
Ver efecto
demo.preview/parallax
Profundidad
Parallax Suave
Las capas se mueven a distinta velocidad para crear profundidad.
Impacto visual
Conversión
Cuándo usarlo: Hero, secciones visuales, productos premium.
Recomendación: Ideal cuando hay imágenes grandes o brand sections.
Ver efecto
demo.preview/sticky
01
02
03
04
Storytelling
Sticky Scroll Section
Una sección queda fija mientras los pasos cambian al avanzar.
Impacto visual
Conversión
Cuándo usarlo: Métodos, procesos, recorridos comerciales.
Recomendación: Explicar sistemas con 3-6 etapas.
Ver efecto
demo.preview/mask
Imágenes
Image Mask Reveal
Una imagen se revela progresivamente con una máscara.
Impacto visual
Conversión
Cuándo usarlo: Fotografía editorial, marca personal, inmobiliaria.
Recomendación: Cuando la imagen es la protagonista.
Ver efecto
demo.preview/scale
Entrada
Scale Reveal
El elemento crece levemente al entrar al viewport.
Impacto visual
Conversión
Cuándo usarlo: Mockups, productos digitales, IA, software.
Recomendación: Cards de producto o pantallas hero.
Ver efecto
demo.preview/horizontal
Storytelling
Horizontal Scroll Gallery
Una galería se mueve horizontal mientras el usuario baja vertical.
Impacto visual
Conversión
Cuándo usarlo: Portafolios, casos de éxito, servicios.
Recomendación: Mostrar 4-8 piezas con jerarquía visual.
Ver efecto
demo.preview/kinetic
Diseño
Conversión
IA
Experiencia
Storytelling
Kinetic Typography
Palabras grandes cambian con movimiento elegante.
Impacto visual
Conversión
Cuándo usarlo: Hero, manifiestos, campañas.
Recomendación: Cuando el mensaje es la pieza principal.
Ver efecto
demo.preview/progress
Conversión
Progress Scroll Bar
Una barra indica el avance de lectura del usuario.
Impacto visual
Conversión
Cuándo usarlo: Manuales, artículos largos, landings extensas.
Recomendación: Reduce la fricción en contenidos largos.
Ver efecto
demo.preview/floating
Núcleo
AI Core
Profundidad
Floating Elements
Elementos flotan suavemente para crear atmósfera.
Impacto visual
Conversión
Cuándo usarlo: IA, SaaS, tecnología, comunidades.
Recomendación: Hero o secciones de marca tecnológica.
Ver efecto
demo.preview/pin
01Conexión
02Procesando
03Optimizado
Storytelling
Pin and Change
Un bloque queda fijo y su contenido interno cambia.
Impacto visual
Conversión
Cuándo usarlo: Dashboards, demos de producto, automatizaciones.
Recomendación: Mostrar evolución de un mismo elemento.
Ver efecto
demo.preview/before-after
Imágenes
Before / After Scroll
Una interfaz se transforma al avanzar el scroll.
Impacto visual
Conversión
Cuándo usarlo: Rediseños web, casos de éxito, branding.
Recomendación: Mostrar transformación visual antes/después.
Ver efecto
demo.preview/stack
Cards
Card Stack Animation
Tarjetas se apilan o desplazan en secuencia.
Impacto visual
Conversión
Cuándo usarlo: Procesos, servicios, beneficios, planes.
Recomendación: Cuando hay 3-5 ítems narrativos.
Ver efecto
demo.preview/cta
Agendar ahora
Conversión
Smooth CTA Reveal
El CTA aparece de forma clara al final de la sección.
Impacto visual
Conversión
Cuándo usarlo: Cierre de landing, venta, reserva.
Recomendación: Refuerza el siguiente paso del usuario.
“Las animaciones no son decoración. Son una herramienta para guiar la atención, explicar mejor una idea y elevar la percepción de valor de una experiencia digital.”
Manual
Sistema avanzado de motion UX
Tokens, easing, storyboards, recomendaciones por nicho y motion responsable.
Manual de Motion UX
Sistema Avanzado de Animaciones UX por Scroll
Una biblioteca visual para explorar, comparar y aplicar animaciones modernas que guían la atención, elevan la experiencia y mejoran la conversión.
Las animaciones no son decoración. Son una herramienta de diseño estratégico para ordenar la lectura, destacar información clave, explicar procesos, generar confianza visual y llevar al usuario hacia una acción.
Motion Tokens: reglas base del movimiento
Reglas reutilizables para mantener coherencia en todas las animaciones del sitio.
Duración rápida
0.2s – 0.3s
Hover, botones, iconos, microinteracciones.
Duración media
0.4s – 0.8s
Textos, cards, imágenes, bloques.
Duración lenta
1s – 1.5s
Hero, storytelling, transiciones expresivas.
Movimiento corto
12px – 24px
Entradas discretas y elegantes.
Movimiento medio
32px – 60px
Cards, bloques, imágenes.
Movimiento amplio
80px – 120px
Parallax, secciones narrativas.
Delay en cascada
0.08s – 0.15s
Animaciones secuenciales.
Easing premium
cubic-bezier(.22,1,.36,1)
Suave, natural, sin cortes.
Galería de animaciones
17 efectos modernos listos para inspirarte.
stagger.lovable.app
Stagger Cards
Tarjetas aparecen en secuencia.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
parallax.lovable.app
Urban Living
Departamentos premium en zona central
Desde $1,200 USD
Parallax Suave
Capas a distinta velocidad para crear profundidad.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
sticky.lovable.app
Sticky Scroll Section
Sección fija mientras el contenido avanza.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
mask.lovable.app
Image Mask Reveal
Imagen revelada por una máscara elegante.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
scale.lovable.app
Scale Reveal
Elemento aparece creciendo suavemente.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
hscroll.lovable.app
Horizontal Scroll Gallery
Galería que se desplaza al avanzar vertical.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
kinetic.lovable.app
Diseño
Conversión
IA
Experiencia
Kinetic Typography
Tipografía con escala y movimiento.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
progress.lovable.app
Progress Scroll Bar
Barra de avance de lectura.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
floating.lovable.app
Floating Elements
Elementos que flotan creando profundidad.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
pin.lovable.app
Dashboard
Pin and Change
Bloque fijo con elementos que cambian.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
before.lovable.app
Antes / Después
Before / After Scroll
Transformación al avanzar el scroll.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
stack.lovable.app
Servicio 1
Descripción breve
Servicio 2
Descripción breve
Servicio 3
Descripción breve
Card Stack Animation
Tarjetas apiladas en secuencia.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
ctareveal.lovable.app
¿Listo para empezar?
Agenda una llamada gratuita de descubrimiento.
Smooth CTA Reveal
Cierre con CTA que aparece progresivamente.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
scrub.lovable.app
Scroll Scrub Visual
Animación sincronizada con scroll.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
video.lovable.app
Cinematic Story
Video Scroll Experience
Escena cinematográfica controlada por scroll.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
stickycta.lovable.app
Solo quedan 3 cuposReservar
Sticky CTA Inteligente
CTA persistente tras cierto avance.
Impacto
Conversión
Rendimiento
Riesgo
Mobile
Antes y después del motion UX
El mismo bloque, dos sensaciones distintas.
Beneficios
Stagger ordena la lectura y guía la atención.
Impacto: MedioPersuasiva
Sin animación
estático
Con animación
animado
Hero
Fade up + flotantes elevan la percepción premium.
Impacto: AltoComercial
Sin animación
estático
Diseño que convierte
Construye landings premium.
Con animación
animado
Diseño que convierte
Construye landing pages premium con UX moderno.
Proceso
Sticky scroll explica métodos sin saturar.
Impacto: AltoPersuasiva
Sin animación
estático
Descubrimiento
Estrategia
Diseño
Entrega
Con animación
animado
Imagen
Mask reveal eleva fotografía editorial.
Impacto: MedioInformativa
Sin animación
estático
Con animación
animado
Control de animación
Cambia velocidad, parallax, dispositivo y movimiento reducido en vivo.
control.lovable.app
Plataforma Inteligente
Optimizada para conversión y experiencia.
Anatomía de una animación
Cada efecto en tres momentos: inicial, durante, final.
Fade Up Reveal
Inicial
Título
Durante
Título
Final
Título
Stagger Cards
Inicial
Durante
Final
Image Mask Reveal
Inicial
Durante
Final
Smooth CTA Reveal
Inicial
CTA
Durante
CTA
Final
Agendar →
Qué animación usar según el objetivo
Captar atención
Kinetic Typography, Parallax Suave, Hero Reveal
Ordenar información
Stagger Cards, Fade Up, Accordion Reveal
Explicar un proceso
Sticky Scroll, Pin and Change, Scrollytelling
Mostrar transformación
Before / After Scroll, Image Mask Reveal
Percepción premium
Parallax, Floating Elements, Smooth Reveal
Impulsar conversión
Smooth CTA Reveal, Sticky CTA, Progress Journey
Educar al usuario
Progress Scroll Bar, Storyboard, Scrollytelling
Mostrar tecnología
Floating Dashboards, Pin and Change, Scroll Scrub
Aplicación por nicho
IA / SaaS
- • Floating Elements
- • Parallax Suave
- • Pin and Change
- • Scroll Scrub
- • Dark Premium Motion
Innovación, sistema, autoridad.
Inmobiliaria
- • Image Mask Reveal
- • Parallax de paisajes
- • Sticky proceso
- • Before / After
Confianza, recorrido, patrimonio.
Restaurante
- • Mask Reveal
- • Galería horizontal
- • Fade Up
- • Smooth CTA
Platos, ambiente, reserva.
Clínica / Salud
- • Fade Up
- • Stagger
- • Proceso paso a paso
- • Testimonios suaves
Calma, claridad, seguridad.
Marca personal
- • Editorial Reveal
- • Scroll Storytelling
- • Citas animadas
- • Monochrome Motion
Autoridad, narrativa, diferenciación.
Masterclass / Reto
- • Kinetic Typography
- • Countdown
- • Sticky CTA
- • Smooth Reveal
Urgencia, acción, conversión.
Microinteracciones que elevan la experiencia
Botón hover premium
Botón magnético
Card elevación
Icono animado
Input feedback
Checkmark
WA
WhatsApp pulso
Reservar
Sticky CTA
InfoTooltip
Tooltip
Modal entrada
AB
Tabs transición
Menú mobile
Page Transitions
Transiciones que mantienen continuidad y reducen cortes bruscos.
Fade entre páginas
Fade entre páginas
Imagen que se expande
Imagen que se expande
Card → página
Card → página
Modal premium
Modal premium
Tabs continuidad
Tabs continuidad
Galería → detalle
Galería → detalle
Lo que no se debe hacer
Errores comunes y cómo solucionarlos.
Animar todo al mismo tiempo
Consecuencia: Confusión visual
Solución: Usa stagger y prioriza jerarquía.
Parallax demasiado fuerte
Consecuencia: Mareo y desorientación
Solución: Limita a 80–120px máximo.
Texto que aparece tarde
Consecuencia: Lectura interrumpida
Solución: Máximo 0.4s de delay en texto.
CTA oculto tras animación
Consecuencia: Pérdida de conversión
Solución: CTA siempre visible o sticky.
Mezclar muchos estilos
Consecuencia: Inconsistencia
Solución: Usa motion tokens unificados.
Scroll-jacking agresivo
Consecuencia: Frustración
Solución: Respeta el control del usuario.
No optimizar mobile
Consecuencia: Performance pobre
Solución: Reduce o desactiva en mobile.
Ignorar reduced-motion
Consecuencia: Accesibilidad rota
Solución: Implementa prefers-reduced-motion.
Blur y glow excesivo
Consecuencia: GPU saturada
Solución: Limita capas con filter.
Motion responsable
Una experiencia premium también debe ser accesible. El movimiento debe acompañar al usuario, no obligarlo a adaptarse al efecto.
Animación completa
Diseño que convierte
Construye landing pages premium con UX moderno.
Movimiento reducido
Diseño que convierte
Misma información, sin movimiento.
- Respetar prefers-reduced-motion
- Reducir intensidad en mobile
- Evitar efectos invasivos
- Mantener control del usuario
- No bloquear contenido importante
- Ofrecer alternativa estática
Rendimiento del motion design
| Efecto | Carga | Mobile |
|---|---|---|
| Fade Up | Ligero | ✅ |
| Stagger Cards | Ligero | ✅ |
| Image Mask | Ligero a medio | ✅ |
| Parallax | Medio | ⚠️ reducir |
| Sticky Scroll | Medio | ⚠️ |
| Horizontal Scroll | Medio a alto | ⚠️ |
| Scroll Scrub | Medio a alto | ⚠️ |
| Video Scroll | Pesado | ❌ no recomendado |
| Floating Elements | Medio | ✅ |
| CTA Reveal | Ligero | ✅ |
Animar solo opacity y transform
Evitar width/height/top/left si afectan rendimiento
Optimizar imágenes y formatos
Reducir efectos en mobile
No sobrecargar el hero
Mantener carga rápida (< 2.5s LCP)
Comprimir videos al máximo
Usar will-change con moderación
Vista previa + lógica de implementación
Estructura de código útil para los efectos principales.
fadeup
@keyframes fadeup { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: none; } }
.fade-up { animation: fadeup .9s cubic-bezier(.22,1,.36,1) both; } stagger
.stagger > * { animation: fadeup .6s both; }
.stagger > *:nth-child(1){ animation-delay:.08s }
.stagger > *:nth-child(2){ animation-delay:.16s } parallax
.parallax { will-change: transform; transform: translate3d(0, var(--py,0), 0); } sticky
.sticky-section { position: sticky; top: 0; height: 100vh; } progress
.bar { position: fixed; top:0; left:0; right:0; height:3px; transform-origin:left; transform: scaleX(var(--scroll-progress,0)); } ctareveal
.cta { opacity:0; transform: translateY(20px); transition: all .8s cubic-bezier(.22,1,.36,1); }
.cta.in { opacity:1; transform:none; } reduced
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}Checklist antes de publicar
- ¿La animación ayuda a entender mejor el contenido?
- ¿El CTA sigue visible?
- ¿Funciona bien en mobile?
- ¿Carga rápido?
- ¿Respeta reducción de movimiento?
- ¿No retrasa la lectura?
- ¿Tiene sentido para el tipo de marca?
- ¿Mantiene coherencia visual?
- ¿No compite con el mensaje principal?
- ¿La animación tiene un objetivo claro?
- ¿La experiencia sigue siendo fácil de navegar?
- ¿El usuario puede actuar sin obstáculos?
El movimiento correcto no distrae.
Guía, ordena, emociona y convierte.
Un buen sistema de animaciones transforma una página estática en una experiencia digital memorable, siempre que esté al servicio del mensaje y la acción.
Da el siguiente paso
Continúa con el sistema completo
Accede a recursos avanzados, plantillas, prompts premium, laboratorios guiados y acompañamiento para aplicar estos sistemas en proyectos reales.