Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un contador numérico hecho a mano en el que cada dígito es un rodillo movido por un muelle físico: cuando el valor cambia, las cifras ruedan hacia arriba o hacia abajo según la tendencia, con una pequeña demora entre ellas, desenfoque de movimiento y un rebote al asentarse. El dígito que cambia se enciende en naranja y se apaga después. Si el número gana o pierde una cifra, la celda entra o sale con una animación de ancho y el separador de miles viaja con ella; el signo más y menos se voltea. La demo reúne tres usos sobre blanco y negro: un configurador de escapada con botones que aceleran al mantenerlos, unas cifras en directo y una cuenta atrás con segundos que ruedan. Encaja en precios, métricas, tarifas, reservas y subastas; cambia color, moneda y tarifas para tu marca.
Encaja bien en webs de
- Prompt
- ≈11.572 tokens · con Lite
- Librerías
- ninguna
- Demo
- 27,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 negocio
- Ciudad
- Teléfono
- Email de contacto
- Color de fondo
- Color del texto y las cifras
- Color vivo del dígito que cambia
Í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.263 palabras · ≈11.572 tokens
- Lite
- 1.489 palabras · ≈2.513 tokens
- Librerías
- ninguna
- Peso de la demo
- 27,9 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.263 palabras en el Completo y 1.489 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:- «Que los dígitos rebonten menos al asentarse»
- «Cambia el color vivo a azul eléctrico»
- «Pon los precios en dólares y las tarifas de un alquiler de coches»
- «Quita el desenfoque de movimiento y deja los rodillos más rápidos»
- 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
¿Necesito alguna librería de animación?
No. El muelle está escrito en unas pocas líneas de JavaScript y la tira de cifras se mueve con transform, así que la pieza pesa menos de 30 KB y funciona dentro de cualquier página o iframe.
¿Cómo conecto el contador a mis datos reales?
Crea un Roller sobre un div y llama a set(valor) cada vez que cambie tu dato: un precio, un stock o una métrica. Él decide qué dígitos ruedan, en qué sentido y con qué demora.
¿Qué pasa con los lectores de pantalla y el movimiento reducido?
Cada contador tiene un texto equivalente oculto que se actualiza sin saturar, los valores editables son spinbutton con teclado y, con movimiento reducido, las cifras se asientan al instante sin giros ni demostraciones automáticas.
¿Puedo usar otra moneda, decimales o un formato distinto?
Sí: cada contador admite prefijo, sufijo, número de decimales, cifras mínimas y signo. El separador de miles y la coma decimal entran y salen junto a su cifra.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11572 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2513 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
