Diseñar una sección de proyectos que combine animaciones por scroll, transiciones suaves y optimización de recursos es uno de los retos más interesantes del CSS avanzado. Aquí te muestro cómo construir una grilla de tarjetas animadas con view timeline, mix-blend-mode, content-visibility y color-mix, aplicando cada técnica sobre un proyecto real de portafolio.

¿Cómo configurar la animación por scroll en la sección de proyectos?

La base de toda la sección arranca con un contenedor que define el timeline del scroll. Le aplicamos un padding vertical grande y declaramos view-timeline-name: scroll-proyectos con view-timeline-axis: block, que equivale al eje vertical [00:30].

Recuerda que inline también funciona como vertical en este contexto, y puedes usar x o y cuando lo necesites. Este timeline es la referencia que después usarán los elementos hijos para sincronizarse con el desplazamiento.

¿Qué es view-timeline-name en CSS? Es una propiedad que asigna un nombre al timeline generado por el scroll de un contenedor, para que otros elementos puedan animarse en función de ese desplazamiento.

¿Cómo animar el título Mis proyectos al hacer scroll?

El H2 lleva un font-size extra grande, texto centrado y un margen inferior generoso. La parte interesante está en la animación: usamos animation-timeline con el nombre aparecer, tipo linear, vinculada a scroll-proyectos.

El rango se define para que el título empiece a aparecer cuando el contenedor llegue al 10% de visibilidad y termine de mostrarse al 20% [01:15]. Así, conforme bajas con el scroll, el título emerge de forma progresiva sin sentirse forzado.

¿Cómo construir la cuadrícula de tarjetas de proyectos?

La grilla usa display: grid con un gap controlado por la variable de espaciado grande. La clave está en grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), que adapta automáticamente el número de columnas según el ancho disponible.

Esto significa que los tres proyectos se reorganizan solos: en pantallas grandes se ven en fila, y en móviles se apilan respetando un mínimo de 280 píxeles por tarjeta.

¿Qué hace content-visibility auto en las tarjetas?

Cada tarjeta recibe border-radius, overflow: hidden, un background-color claro y un box-shadow sutil. Pero el detalle de rendimiento está en content-visibility: auto combinado con contain-intrinsic-size: 300px [02:45].

Esta combinación le dice al navegador que no renderice el contenido de la tarjeta hasta que aparezca en el viewport, reservando un espacio aproximado de 300 píxeles. Es una optimización enorme cuando hay imágenes y mucho contenido.

¿Para qué sirve content-visibility auto? Mejora el rendimiento al saltarse el renderizado de elementos fuera de pantalla, ideal para listas largas con imágenes.

¿Cómo aplicar el efecto hover en las tarjetas?

La tarjeta tiene una transition de 3 segundos sobre transform. En el estado :hover aplicamos transform: translateY(-5px) y aumentamos la sombra, generando esa sensación de que la tarjeta se eleva.

El resultado es un movimiento suave que comunica interactividad sin recargar visualmente la interfaz.

¿Cómo lograr el efecto de imagen en escala de grises que se ilumina al pasar el mouse?

Esta es la parte más vistosa. La imagen contenedora tiene max-height: 200px, position: relative y overflow: hidden. La imagen interna usa object-fit: cover y object-position: center para encajar perfecta sin deformarse.

Luego viene el truco visual: aplicamos mix-blend-mode: multiply y filter: grayscale(50%), lo que deja la imagen apagada, casi como deshabilitada. Sumamos una transition para animar el cambio.

En el :hover de la tarjeta, apuntamos a la imagen y le quitamos el filtro grayscale, además de cambiar el mix-blend-mode a normal [04:50]. La transición de 0.5 segundos hace que la imagen pase de gris a brillante y radiante. Es un detalle pequeño con un impacto visual enorme.

¿Cómo dar formato al contenido y las etiquetas de cada tarjeta?

Dentro del contenido aplicamos un padding intermedio para separar el texto de los bordes. El H3 lleva un font-size grande y un margen inferior pequeño que lo separa del párrafo. El párrafo usa el tamaño base con un espaciado mínimo.

Las etiquetas se organizan con display: flex, flex-wrap: wrap, un gap extra pequeño entre ellas y un margin-top que las distancia del texto.

¿Cómo usar color-mix para mantener la paleta coherente?

Cada etiqueta individual usa background-color: color-mix(in oklch, secundario, claro), que mezcla el color secundario con el claro dentro del espacio OKLCH [06:30]. Esto mantiene la armonía cromática sin salirse de la paleta.

El padding se calcula con calc(espaciado-xs / 2) y espaciado-xs, demostrando que puedes usar variables CSS dentro de calc(). Sumamos border-radius y un font-size pequeño para que se vean como pildoritas.

• view-timeline-name: define el nombre del scroll que sincroniza animaciones.
• content-visibility auto: difiere el renderizado de elementos fuera del viewport.
• mix-blend-mode multiply: mezcla la imagen con el fondo para efectos visuales.
• color-mix en OKLCH: combina dos colores manteniendo la paleta original.
• grid auto-fit con minmax: crea grillas responsivas sin media queries.

Con estas técnicas, la sección de proyectos no solo se ve profesional, también está optimizada para lazy loading nativo y rendimiento. ¿Qué efecto te animarías a sumar a tus tarjetas? Cuéntame en los comentarios.