Uniforms y shaders: cómo crear reveal y distorsión sin perder mantenibilidad
Aprende a usar uniforms en shaders para construir efectos de reveal, máscara y distorsión controlados por GSAP o por interacción. La meta no es escribir un shader enorme, sino entender el puente entre tiempo, GPU y dirección visual.
Hay un punto en el que los materiales estándar se quedan cortos. No porque sean malos, sino porque ciertos efectos de reveal, distorsión o máscara necesitan lógica propia en GPU. Ahí entran los shaders y, dentro de ellos, los uniforms como puente entre tu aplicación y el material.
Un uniform es una variable global que la CPU puede enviar a la GPU. Si GSAP anima ese valor, el shader recibe una secuencia temporal continua y puede traducirla en expansión de una máscara, mezcla de texturas o deformación controlada.
La clave de esta lección es no caer en el hype. No necesitas un shader gigantesco para conseguir valor real. A menudo basta con uno o dos uniforms bien elegidos y una lógica clara para pasar de un simple fade a un reveal mucho más expresivo.
Cuando termines deberías entender qué parte gestiona GSAP, qué parte resuelve el shader y cómo mantener el efecto bajo control sin crear una pieza imposible de depurar.
- GSAP no anima píxeles; anima valores que el shader interpreta.
- Cuando animas `uniforms.uProgress.value`, no estás diciendo directamente cómo se dibuja cada fragmento. Estás moviendo una variable que el shader usa para decidir qué mostrar, mezclar o deformar. Esa separación es importante porque mantiene el rol de cada capa: GSAP dirige el tiempo; el shader ejecuta la visualización.
- Este patrón es muy potente porque te permite construir una gramática visual compleja sin delegar la lógica temporal a `useFrame` para todo.
- Una máscara simple ya puede mejorar mucho la entrada de un producto o de una textura.
- Un patrón muy común consiste en usar `uProgress` para expandir una máscara circular o lineal sobre unas coordenadas UV. Así el contenido no aparece simplemente con opacidad, sino que se revela con una lógica espacial más interesante.
Uniforms: el puente entre la lógica temporal y la GPU
GSAP no anima píxeles; anima valores que el shader interpreta.
Cuando animas `uniforms.uProgress.value`, no estás diciendo directamente cómo se dibuja cada fragmento. Estás moviendo una variable que el shader usa para decidir qué mostrar, mezclar o deformar. Esa separación es importante porque mantiene el rol de cada capa: GSAP dirige el tiempo; el shader ejecuta la visualización.
Este patrón es muy potente porque te permite construir una gramática visual compleja sin delegar la lógica temporal a `useFrame` para todo.
Reveal con máscara: uno de los usos más rentables
Una máscara simple ya puede mejorar mucho la entrada de un producto o de una textura.
Un patrón muy común consiste en usar `uProgress` para expandir una máscara circular o lineal sobre unas coordenadas UV. Así el contenido no aparece simplemente con opacidad, sino que se revela con una lógica espacial más interesante.
Esto funciona especialmente bien en transiciones de producto, pantallas, texturas o superficies donde quieres que la aparición tenga dirección.
Distorsión: úsala como énfasis, no como castigo visual
Una pequeña deformación suele ser más elegante que un efecto agresivo permanente.
GSAP puede animar un uniform de ruido, fuerza o amplitud para que el shader distorsione temporalmente una textura o una superficie. El valor está en el momento: entrada, hover, scroll concreto o cambio de estado.
Si la distorsión vive siempre en pantalla, desgasta rápido y suele perjudicar la lectura del producto. En cambio, como gesto puntual puede dar muchísima personalidad.
Cómo evitar que el shader se convierta en una caja negra
La mejor defensa es limitar variables y nombrarlas con intención.
Un shader se vuelve difícil de mantener cuando acumula uniforms ambiguos y lógica sin propósito visible. Conviene empezar por efectos pequeños, con nombres explícitos como `uProgress`, `uRadius`, `uDistortion` o `uMouse`.
Si el efecto no puede explicarse en una frase clara, probablemente todavía no conviene meterlo en producción.
Debug común: el uniform cambia, pero el efecto no se entiende
El problema suele ser conceptual, no de sintaxis.
Si el reveal apenas se percibe, revisa rango, contraste y punto de referencia en UV. Si la distorsión rompe demasiado la textura, baja amplitud antes de tocar el tiempo. Y si el efecto parece arbitrario, quizá el shader no está respondiendo a una necesidad de la narrativa, sino a una tentación técnica.
No confundas complejidad de GPU con calidad visual. En producto, la legibilidad sigue mandando.
