Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Sección de testimonios editorial sobre papel crema con grano. Arriba, un titular serif enorme y una nota media gigante que cuenta hasta su valor, con estrellas SVG que se rellenan hasta el decimal exacto y un reparto de valoraciones en barras finas. Debajo, dos filas de tarjetas a sangre avanzan en sentido contrario; al pasar el ratón, la fila frena poco a poco hasta pararse (no en seco), la tarjeta se eleva y las demás se atenúan. Al hacer scroll, las filas se aceleran un instante. Los avatares son iniciales generadas por hash del nombre, con color y forma propios, sin fotos. Incluye botón de pausa, versión táctil (mantener pulsado) y carrusel con snap para movimiento reducido. Encaja en restaurantes, hoteles, clínicas, gimnasios o asesorías; cambia a verde oliva, azul pizarra o fondo oscuro con tres colores.
Encaja bien en webs de
- Prompt
- ≈13.392 tokens · con Lite
- Librerías
- ninguna
- Demo
- 27,5 KB · ligero
- Prueba en frío
- 9,7/10 · 30-09-2026
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 negocio
- Ciudad
- Nota media (con coma decimal)
- Número total de reseñas
- Teléfono
- Color de fondo
- Color del texto y tarjetas destacadas
- Color de acento
Í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
- 5.634 palabras · ≈13.392 tokens
- Lite
- 1.823 palabras · ≈3.141 tokens
- Librerías
- ninguna
- Peso de la demo
- 27,5 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- 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
5.634 palabras en el Completo y 1.823 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
Lo que salió al pegarlo en frío
Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.
Prompt CompletoFiel a la demo9,7/10
Reproducción prácticamente exacta: mismo código, mismas 16 reseñas, mismos colores, freno suave con playbackRate, estrellas que se rellenan y contador de la nota. Las capturas solo difieren en la posición del desfile en el instante de la foto.
Prompt LiteFiel a la demo8,2/10
Conserva el layout, la paleta, las reseñas y toda la mecánica (doble marquesina, frenado suave, impulso con el scroll, estrellas y barras animadas). Cambia el acabado tipográfico: la Fraunces sin su tamaño óptico se ve más ancha, sobre todo en móvil, las tarjetas quedan algo más altas y la nota media está alineada de otra forma.
Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.
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:- «Pon tres filas en vez de dos, alternando el sentido»
- «Que las filas vayan más despacio y frenen antes»
- «Cambia el acento a verde oliva y el fondo a blanco roto»
- «Adáptalo a una clínica dental con botón «Pedir cita»»
- 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
¿Puedo poner mis reseñas reales de Google?
Sí. Copia los textos, nombres y fechas en el array RESENAS del script (dos filas de 6 a 10 reseñas) y actualiza la nota media, el total y el reparto para que cuadren.
¿Se puede leer bien una reseña si no para de moverse?
Al pasar el ratón la fila frena hasta pararse, en móvil basta con mantener el dedo encima y además hay un botón para pausar las dos filas. Con movimiento reducido las filas no se mueven y se desplazan a mano.
¿Necesito fotos de los clientes?
No. Los avatares se generan solos con las iniciales del nombre, un color de la paleta y una forma (círculo, arco u hoja), siempre los mismos para cada nombre.
¿Funciona en fondo oscuro?
Sí: cambia el color de fondo por uno oscuro y el de tinta por uno claro; papel, líneas y acentos se derivan solos. Revisa después los grises de texto secundario para mantener el contraste.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13392 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3141 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
