--- title: "Interfaces, composición y microinteracciones web | Logic2b" description: "Experimentos de interfaz: composición bento, cristal líquido, medios sincronizados y microinteracciones. Solo CSS y JavaScript nativo, sin librerías." lang: es-ES source_url: html: https://logic2b.com/sistemas/interfaces-composicion/ md: https://logic2b.com/sistemas/interfaces-composicion/index.md --- Ruta: [Inicio](https://logic2b.com/) › [Sistemas de gestión](https://logic2b.com/sistemas) Función / 11 de 16/sistemas/interfaces-composicion # Interfaces, composición y microinteracciones El detalle que separa una web correcta de una que se recuerda: composición, cristal líquido, medios sincronizados y transiciones con criterio. **Demos navegables** 08 **Labs en el catálogo** 75 **Funciones de negocio** 16 01 / Catálogo 08 demos ## Demos de interfaces y composición que se pueden tocar. Paneles de control, generadores y visualizadores en vivo. Así de lejos podemos llevar un desarrollo a medida. Sistemas por función --- ¿Vuestro proceso no encaja en ninguna? [Contádnoslo](https://logic2b.com/contacto): la mayoría de sistemas que hacemos son casos que no estaban en la lista. **08** demos navegables [Ver todos los labs](https://logic2b.com/lab) [Ver Sumario](https://logic2b.com/lab/sumario) ### Sumario Interfaces y composición Los hechos en una cronología. Cada prueba, anclada a su folio. LegalTech Canvas Documentos Cronología [Ver lab](https://logic2b.com/lab/sumario) ![Vista previa de Pespunte]() [Ver Pespunte](https://logic2b.com/lab/pespunte) ### Pespunte Comercio / Configuradores de producto Configurador visual de equipaciones: patrones, nombre, número, logotipos, talla, color, giro y exportación en una sola pantalla. Comercio Configurador Personalización JavaScript [Ver lab](https://logic2b.com/lab/pespunte) [Ver Zaguán](https://logic2b.com/lab/zaguan) ### Zaguán Interfaces y composición La ficha de un piso flotando en cristal sobre el plano 3D del propio piso, en vídeo a pantalla completa. Inmobiliaria Cristal Vídeo Interfaz [Ver lab](https://logic2b.com/lab/zaguan) [Ver Damero](https://logic2b.com/lab/damero) ### Damero Composición / Cristal líquido Sección de capacidades en zigzag sobre negro, con dos miniaturas de web animadas a mano. Glassmorphism Container queries Animación CSS Scroll [Ver lab](https://logic2b.com/lab/damero) [Ver Ocaso](https://logic2b.com/lab/ocaso) ### Ocaso Composición / Medios sincronizados Tarjetas que cruzan de foto a vídeo al caer la noche, sobre un artboard de 660×836 escalado. Vídeo Modo oscuro Container queries Microinteracciones [Ver lab](https://logic2b.com/lab/ocaso) [Ver Zócalo](https://logic2b.com/lab/zocalo) ### Zócalo Cristal líquido / Composición Pie de cristal líquido sobre vídeo fijo, con el filete de 1,4 px desmontable en vivo. Glassmorphism Vídeo Máscaras CSS Microinteracciones [Ver lab](https://logic2b.com/lab/zocalo) [Ver Retablo](https://logic2b.com/lab/retablo) ### Retablo Composición bento / Portfolio Rejilla bento de portfolio: cristal líquido, tres vídeos en bucle y marquesinas de herramientas que se arrastran. Bento Vídeo Microinteracciones Glassmorphism [Ver lab](https://logic2b.com/lab/retablo) [Ver Tríptico](https://logic2b.com/lab/triptico) ### Tríptico Presentación interactiva / Mobile Tres pantallas de móvil sin marco, en escalera: hero de deportista, galería arrastrable y formulario que responde. Mobile Showcase SVG Microinteracciones [Ver lab](https://logic2b.com/lab/triptico) 02 / Guía de la función Apartado 1 de 3 ## La microinteracción no es decoración Una transición bien hecha explica qué acaba de pasar: de dónde viene el elemento que aparece, qué relación tiene con lo que había antes, si la acción se completó. Cuando falta, el usuario tiene que reconstruirlo mentalmente cada vez. El límite está en la utilidad. Una animación que informa merece los 300 milisegundos que cuesta; una que solo se luce los roba en cada interacción, y esas se acumulan. 03 / Guía de la función Apartado 2 de 3 ## Cristal líquido y composición: técnica, no filtro El efecto de cristal está en todas partes y casi siempre mal resuelto: desenfoques que matan el rendimiento, contrastes que rompen la accesibilidad y bordes que desaparecen según el fondo. En Zócalo desmontamos uno en vivo, incluido el filete de 1,4 píxeles, para enseñar de qué está hecho. Retablo, Damero y Ocaso aplican el mismo criterio a la composición: rejilla bento con vídeo, secciones en zigzag y tarjetas que cruzan de foto a vídeo al caer la noche. Todo con CSS, sin librerías de animación. 04 / Guía de la función Apartado 3 de 3 ## Cero dependencias, por decisión Ninguno de estos experimentos usa GSAP, Framer Motion ni ninguna librería de animación. No es purismo: es que cada dependencia añade peso, se queda obsoleta y acaba obligando a una migración que nadie pidió. Con CSS moderno, IntersectionObserver y requestAnimationFrame se llega mucho más lejos de lo que la mayoría supone, y lo que se construye así sigue funcionando dentro de cinco años sin tocarlo. 05 / Preguntas frecuentes 03 preguntas ## Preguntas frecuentes. **¿Estas animaciones ralentizan la web?** Bien hechas, no. Se animan solo propiedades que la GPU puede componer, se activan cuando el elemento entra en pantalla y se desactivan si el visitante pide movimiento reducido en su sistema. **¿Funcionan en móvil?** Sí, y se prueban ahí primero. Varios de estos labs están planteados directamente para pantalla táctil, con arrastre e inercia en lugar de hover. **¿Y la accesibilidad?** Se respeta la preferencia de movimiento reducido, se mantiene el contraste sobre fondos translúcidos y todo lo interactivo es alcanzable por teclado. Un efecto que rompe eso no llega a producción. 06 / Sectores Cruce con diseño web ## Sectores que lo piden junto a su web. Cada sector del catálogo de diseño web propone, al pie de su página, los sistemas que suele necesitar después de la web. Estos 5 incluyen sistemas de interfaces y composición. 1. [Abogados y despachos 5 temas](https://logic2b.com/diseno-web/abogados) 2. [Inmobiliarias 12 temas](https://logic2b.com/diseno-web/inmobiliarias) 3. [Fotógrafos y creativos 4 temas](https://logic2b.com/diseno-web/fotografos) 4. [Arquitectura e interiorismo 5 temas](https://logic2b.com/diseno-web/arquitectura) 5. [Coaches y entrenadores 3 temas](https://logic2b.com/diseno-web/coaches) 6. [Ver todos los sectores](https://logic2b.com/diseno-web) 07 / Otros sistemas Sistemas por función ## Otros tipos de sistema del catálogo. 1. [Comercio y buscadores 8 demos](https://logic2b.com/sistemas/comercio-buscadores) 2. [Generadores y presentación 8 demos](https://logic2b.com/sistemas/generadores-presentaciones) 3. [Despachos y gestión legal 7 demos](https://logic2b.com/sistemas/legal-despachos) 4. [Cuadros de mando y analítica 18 demos](https://logic2b.com/sistemas/cuadros-de-mando) 5. [Inventario y almacén 10 demos](https://logic2b.com/sistemas/inventario-almacen) 6. [Logística y transporte 7 demos](https://logic2b.com/sistemas/logistica-transporte) 7. [Finanzas y contabilidad 8 demos](https://logic2b.com/sistemas/finanzas-contabilidad) 8. [Industria, energía e IoT 7 demos](https://logic2b.com/sistemas/industria-energia) 9. [Ver todos los sistemas](https://logic2b.com/sistemas) --- Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)