Este artículo explica cómo recrear el efecto estilo macOS Dock con una pila de tarjetas animadas usando Stimulus y Tailwind CSS, con un enfoque en lograr la mayor parte del comportamiento con CSS y mínimo JavaScript para el estado.
Fundación y modelo de datos: en lugar de un modelo Active Record tradicional se puede usar un modelo ligero basado en ActiveModel para representar cada tarjeta con atributos como asunto y descripción. La vista itera sobre una colección de tarjetas y renderiza una parcial por cada una para mantener el código limpio y reutilizable.
Diseño del lienzo: para lograr el aspecto se coloca la lista de tarjetas fijada en la parte inferior de la pantalla sobre un fondo con degradado. Con Tailwind CSS se consigue fácilmente un fondo llamativo, y se usan utilidades de espaciado, contenedor y posicionamiento para centrar la pila y limitar su ancho.
Estilo de las tarjetas: cada tarjeta se diseña con fondo semitransparente, desenfoque de fondo, bordes sutiles, radio para esquinas y sombra. Al colapsar la pila las tarjetas se posicionan de forma absoluta unas sobre otras y se aplican transformaciones escaladas, translaciones y cambios de opacidad para simular profundidad y orden en la pila.
Posicionamiento dinámico con class names: la ayuda de renderizado de Rails permite conocer el orden de cada parcial y con un helper de construcción de clases se asignan clases condicionales según la posición en la pila. De ese modo la tarjeta superior está a escala 100 y las siguientes son ligeramente más pequeñas y más translúcidas, creando el efecto apilado.
Control minimalista con Stimulus: para gestionar la apertura y cierre de la pila se añade un controlador Stimulus con un value booleano open. Métodos show y hide activan y desactivan ese valor. Con los data values de Stimulus y los modificadores de grupo de Tailwind se aplican variantes CSS basadas en el estado abierto o cerrado sin necesidad de manipular directamente las transformaciones con JavaScript.
Detectar clic fuera de la pila: para cerrar la pila al clicar fuera se puede usar la librería stimulus fx que aporta un modificador whenOutside. Con una configuración sencilla se registra la extensión y se añade una acción global que llama al método hide cuando el clic ocurre fuera del elemento controlado, evitando escribir lógica compleja de escucha de eventos.
Solución para enlaces en las tarjetas: si cada tarjeta es un enlace y al mismo tiempo debe abrir la pila al clicar, se puede usar la propiedad CSS pointer events con la utilidad pointer events none cuando la pila está cerrada. De este modo el clic pasa al elemento contenedor que abre la pila y no navega inmediatamente, lo que evita JavaScript adicional e incrementa la usabilidad.
Resumen técnico: la mayor parte del efecto se consigue con utilidades de Tailwind aplicadas condicionalmente mediante variantes de grupo y valores de Stimulus. Stimulus se usa únicamente para controlar el state open y para cerrar la pila al detectar clics fuera. Esta aproximación mantiene la interfaz accesible, performante y fácil de mantener.
Cómo aplicar esto en proyectos reales: este patrón es ideal en paneles de notificaciones, accesos rápidos y menús contextuales. Si necesitas adaptar la solución a una aplicación concreta se pueden parametrizar transformaciones, duraciones y puntos de origen para que coincidan con el lenguaje visual de tu producto.
Sobre Q2BSTUDIO: en Q2BSTUDIO somos una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida. Diseñamos e implementamos soluciones que integran inteligencia artificial e ia para empresas para optimizar procesos, mejorar la experiencia de usuario y generar insights accionables. Nuestro equipo también ofrece servicios de ciberseguridad para proteger aplicaciones y datos, así como servicios cloud aws y azure para desplegar infraestructuras seguras y escalables. Además brindamos servicios inteligencia de negocio y soluciones con power bi para visualizar datos y tomar decisiones informadas. Trabajamos con agentes ia y arquitecturas de IA para empresas que requieren automatización avanzada y modelos personalizados.
Si quieres que implementemos una versión a medida de esta interfaz, o que la integremos con soluciones más amplias de inteligencia artificial, ciberseguridad, servicios cloud aws y azure o servicios inteligencia de negocio, contacta con Q2BSTUDIO para una consultoría inicial y un plan de implementación que se ajuste a tus objetivos.
Palabras clave integradas para SEO: aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, power bi.
Contacto y siguiente paso: solicita un prototipo funcional y un presupuesto orientativo con Q2BSTUDIO y transforma esta idea de interfaz en una característica real y alineada con tu arquitectura de software y objetivos de negocio.