clip-path + steps(): efectos CSS avanzados sin JavaScript

Hay un tipo de efecto visual en la web que parece hecho con WebGL o Canvas, pero en realidad son solo tres propiedades CSS trabajando juntas: clip-path, steps() y las custom properties. El artículo Make GIFs Into Letters with Clip Paths de Frontend Horse lo explica analizando un pen viral de Ryan Mulligan.

clip-path: recortar regiones en cualquier forma

La propiedad clip-path define qué parte de un elemento se muestra y qué parte se oculta. Podés usar círculos, elipses, rectángulos o polígonos arbitrarios. El resto del elemento sigue ocupando espacio en el layout, pero no se pinta.

.forma {
  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* triángulo */
}

Con polygon podés dibujar cualquier letra o figura. Herramientas como Clippy generan el código visualmente.

steps(): animaciones stop-motion

La función steps(n) divide la animación en n saltos discretos en vez de interpolar suavemente. Es lo que transforma una transición fluida en un efecto tipo spritesheet clásico — como un GIF cuadro a cuadro.

.personaje {
  animation: caminar 1s steps(8) infinite;
  /* salta entre 8 frames, no interpola */
}

Sin steps(), la animación sería una interpolación continua. Con steps(), parece hecha por un animador japonés de los 90.

Custom properties para escalonar

Las variables CSS (--i, --duration) permiten que cada elemento arranque la misma animación en un frame distinto. El truco es usar animation-delay con calc() y un valor negativo:

.letra {
  animation: colores 2s steps(6) infinite;
  animation-delay: calc(var(--i) * -0.2s);
}

El delay negativo hace que cada letra ya esté más avanzada en el loop al cargar. El resultado: un efecto de onda continua sin JavaScript.

Combinándolo todo

Así se ve el código final que replica el efecto del artículo de Frontend Horse:

/* Cada letra es un span con --i para escalonar */
.letra {
  --duration: 2s;
  position: relative;
  display: inline-block;
  background: url('mi-gif.gif') center / cover;
  animation: colores var(--duration) steps(6) infinite;
  animation-delay: calc(var(--i) * -0.2s);

  /* Forma de letra recortada con clip-path */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 70%);
}

@keyframes colores {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

Y el HTML, con --i como índice por letra:

<!-- HTML: escalonar via --i en cada letra -->
<h1 class="titulo">
  <span class="letra" style="--i: 0">C</span>
  <span class="letra" style="--i: 1">S</span>
  <span class="letra" style="--i: 2">S</span>
</h1>

Cuándo usar esta técnica

Ideal para — landings, portafolios, microsites, páginas de campaña. Cualquier lugar donde un efecto visual deje impresión.
Evitar en — apps de producto, dashboards, interfaces productivas. Las animaciones continuas consumen CPU y batería.
Accesibilidad — siempre respetá prefers-reduced-motion para pausar animaciones en usuarios sensibles al movimiento.

Conclusión

clip-path, steps() y custom properties existen desde hace años, pero combinarlas te da superpoderes visuales que parecen WebGL. La mejor parte: es CSS puro, sin build, sin dependencias, y funciona en todos los navegadores modernos desde 2020. Aprenderlo una tarde te deja la herramienta para toda la carrera.

📖 Versión extendida con más detalle: https://elsolitario.org/clip-path-steps-css-efectos-avanzados/