Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un panel de cifras en directo sobre negro puro. Cada dígito es un rodillo: al cambiar el valor, su columna gira hacia el nuevo número con un muelle que rebota un poco, las unidades dan más vueltas que las decenas y un desenfoque vertical sigue la velocidad. Detrás del dígito que cambia se enciende un marcador verde ácido que se apaga en un segundo. El número principal se arrastra con el ratón o el dedo, responde a la rueda y a las flechas del teclado, y tiene botones con repetición acelerada, atajos y modo aleatorio. Debajo, una banda de papel con tres cifras más (ingresos, conversión y tiempo medio) que se actualizan solas. Sin librerías ni imágenes: CSS, filtros SVG y unas 250 líneas de JS. Encaja en paneles de analítica, contadores de ventas, precios y resultados de landings de producto; cambia el acento a rojo, naranja o azul eléctrico.
Encaja bien en webs de
- Prompt
- ≈11.244 tokens · con Lite
- Librerías
- ninguna
- Demo
- 23,8 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 de la marca
- Nombre de la cifra principal
- Valor inicial de la cifra principal
- Color vivo del marcador
- Color del negro
- Color del papel
Í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.018 palabras · ≈11.244 tokens
- Lite
- 1.414 palabras · ≈2.411 tokens
- Librerías
- ninguna
- Peso de la demo
- 23,8 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.018 palabras en el Completo y 1.414 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 verde ácido por azul eléctrico»
- «Haz que el muelle rebote más»
- «Pon la banda de papel en negro y el héroe en blanco»
- «Que solo ruede la cifra principal y quita la banda»
- 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 conectar el contador a datos reales?
Sí. Basta con llamar a la función que actualiza el rodillo (set) con el nuevo valor cada vez que llegue un dato de tu API o de un websocket; el rodillo calcula solo qué columnas giran y cuántas vueltas dan. Desactiva los incrementos automáticos de la demo.
¿Funciona con decimales, porcentajes o horas?
Sí. Cada rodillo recibe un formateador que devuelve la cadena a mostrar: la demo trae uno para miles con punto, otro para centésimas con coma y otro para mm:ss. Mientras el formateador mantenga la misma disposición de dígitos y separadores por posición contando desde la derecha, funciona.
¿Y si la persona tiene el movimiento reducido activado?
Las cifras aparecen ya en su valor final, sin muelle ni desenfoque, y no arrancan los incrementos automáticos. Los botones y el arrastre siguen funcionando, pero el cambio es instantáneo.
¿Pesa o gasta CPU?
No usa librerías ni canvas. Hay un único bucle de animación que solo corre mientras alguna columna se mueve, y se detiene cuando la pieza sale de pantalla o la pestaña se oculta. El desenfoque solo se aplica a las columnas que van rápido.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11244 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2411 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
