Vibeset

Pintura metálica

Un logo o un titular que parece mercurio: superficie cromada con bandas que fluyen, reflejos que se mueven con la luz (la mueve el puntero) y un borde ligeramente irisado. Se consigue sin un modelo 3D: la forma sale de dibujar el texto, o un trazo SVG como el logo de Vibeset, en un lienzo 2D y subirlo como textura; el relieve se inventa desde esa máscara, desenfocándola con nueve muestras para tener una colina suave y sacando de la pendiente una normal falsa, como un bajorrelieve redondeado (la suavidad es cuánto se desenfoca: poca da un bisel estrecho, mucha una colina blanda); y el metal son tres cosas encima: una banda que fluye siguiendo el relieve, un reflejo especular que depende de la luz y un desfase distinto por canal de color (la dispersión) que irisa el borde. La salida es transparente fuera de la forma, con alfa premultiplicado. El contenedor es una imagen con el texto (o el nombre del logo) por nombre, porque al dibujarlo en un lienzo deja de ser texto para el navegador; sin WebGL queda el texto normal o el trazo en plano.

Y el original de React Bits: Metallic Paint

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Metallic Paint, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para el logo grande de una portada de marca, que es lo único que hace falta que luzca. Con una forma simple y de mucho contraste, no con un logotipo lleno de detalle.

Ojo con

Con imageSrc descarga la imagen con fetch: que sea propia y esté en tu dominio. Y el logo deja de ser texto o imagen para el navegador: necesita su alternativa por fuera del canvas.

Accesibilidad

Respeta el movimiento reducido del sistema. No lleva ningún atributo aria: el texto alternativo del logo lo pones tú, en el elemento que lo envuelva.