Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una sección de portfolio a pantalla completa hecha con WebGL a mano. Ocho obras en formato 3:4 corren en una fila infinita; todo lo que queda fuera de la lente se ve en blanco y negro y solo lo que pasa por ella recupera el color, aumentado y deformado con dispersión cromática en el borde, ondulación líquida, halo y un anillo azul con brillo especular. Se arrastra con inercia, se mueve con rueda, teclado o botones y siempre se asienta centrada en un panel. Un clic enfoca la obra central: crece un 18 %, las demás caen y giran escalonadas y aparece una ficha técnica. Sin interacción, entra en modo escaparate y se mueve sola. Encaja en estudios creativos, galerías, arquitectura, interiorismo y marcas de producto. El color vivo es una variable: pásalo a rojo, naranja o verde ácido y cambia anillo, halo, cursor y botones a la vez.
Encaja bien en webs de
- Prompt
- ≈13.388 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,9 KB · ligero
- Prueba en frío
- pendiente
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Nombre del estudio
- Ciudad
- Titular, primera línea
- Titular, segunda línea
- Texto bajo el titular
- Color vivo (anillo, halo y botones)
- Color de fondo
- Color del texto
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 6.351 palabras · ≈13.388 tokens
- Lite
- 1.302 palabras · ≈2.668 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,9 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
- Alternativa sin WebGL
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
6.351 palabras en el Completo y 1.302 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
La prueba en frío
Aún sin publicar para esta pieza
En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Cambia el azul eléctrico por rojo y que el halo sea más intenso»
- «Haz la lente más grande y con más aumento en el centro»
- «Quita el modo escaparate para que solo se mueva al interactuar»
- «Pon tus propias fotos verticales y cambia las fichas de obra»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Qué fotos necesito?
Ocho imágenes verticales en proporción 3:4, de unos 800 px de ancho. El código las recorta a 512×683 dentro de un atlas. Cambia los nombres y textos del array OBRAS; si faltan fotos, el hueco se rellena con un degradado y la pieza sigue funcionando.
¿Por qué las imágenes tienen que cargar con crossOrigin?
WebGL no puede usar una imagen de otro dominio sin permiso CORS. Si las sirves desde tu propio dominio no hace falta nada; si usas un CDN, debe enviar la cabecera Access-Control-Allow-Origin.
¿Funciona en móvil?
Sí. Los paneles ocupan el 60 % del ancho, el arrastre horizontal mueve la fila, el toque corto enfoca la obra y el DPR se limita a 1,5. El cursor con etiqueta solo existe con ratón.
¿Qué pasa si el navegador no tiene WebGL o prefiere menos movimiento?
Sin WebGL aparece una fila con scroll-snap de las fotos en gris bajo una elipse azul fija. Con movimiento reducido no hay entrada ni inercia ni modo escaparate, y el enfoque es instantáneo.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13388 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2668 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
