Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Un párrafo enorme ocupa la pantalla en gris casi invisible y, mientras haces scroll, cada palabra sube y se enciende hasta el negro en una ola de seis palabras de ancho; las palabras clave pasan al color vivo y se subrayan al encenderse. El escenario queda fijo durante un recorrido de 460 svh y el progreso real se suaviza con un muelle exponencial, así que la rueda a saltos se convierte en un barrido continuo. Un cursor de color acompaña a la palabra que se está encendiendo, un contador de dígitos rodantes marca la lectura y una firma de marca aparece al terminar. Tras el recorrido, un cierre en negro con botón magnético invita a escribir. Con movimiento reducido el texto se muestra entero, estático y legible. Encaja como manifiesto de estudios creativos, marcas con voz propia, bodegas, arquitectura o cualquier web que quiera una frase de marca a pantalla completa. Funciona con cualquier color vivo.

Prompt
≈8.914 tokens · con Lite
Librerías
ninguna
Demo
17,1 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
  • Nombre corto (logotipo de la cabecera)
  • Ciudad
  • Coordenadas de la ciudad
  • Manifiesto (palabras clave entre asteriscos)
  • Qué hace el negocio (en la firma)
  • Año de fundación
  • Cierre: inicio de la frase
  • Cierre: palabra en color vivo
  • Cierre: final de la frase
  • Texto del botón
  • Dirección
  • Email
  • Teléfono
  • Color vivo (palabras clave y botón)
  • Color de la tinta (texto y cierre)
  • Color del papel (fondo)

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

  1. 01Qué es
  2. 02Librerías y esqueleto
  3. 03Tokens de diseño
  4. 04Estructura y contenido
  5. 05Movimiento
  6. 06Código clave
  7. 07Interacción
  8. 08Adaptación a móvil y tablet
  9. 09Accesibilidad y movimiento reducido
  10. 10Rendimiento
  11. 11Personalización
  12. 12Comprobación final
Completo
4.542 palabras · ≈8.914 tokens
Lite
1.571 palabras · ≈2.944 tokens
Librerías
ninguna
Peso de la demo
17,1 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

4.542 palabras en el Completo y 1.571 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

  1. 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.
  2. 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.
  3. 03

    Pega e itera

    Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:
    • «Cambia el color vivo a azul eléctrico»
    • «Haz que la ola de encendido sea más ancha, de doce palabras»
    • «Alarga el recorrido para que el texto se encienda más despacio»
    • «Quita el cursor y deja solo el cambio de opacidad»
  4. 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.

Guías por herramientaClaudeChatGPTGeminiCursorLovableBoltv0

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 un texto más largo?
Sí, pero el párrafo tiene que caber entero en la pantalla fija: el tamaño de letra ya se limita con la altura (7,4 svh), y con más de unas 90 palabras conviene bajar la fuente o alargar el recorrido. Con textos largos, aumenta la altura de la sección (460 svh) para que cada palabra tenga el mismo tiempo.
¿Cómo marco las palabras que cambian de color?
Escríbelas entre asteriscos en el manifiesto, por ejemplo «una marca que *respira*». La puntuación pegada a la palabra clave (coma, punto) se queda en tinta y no se subraya. Con cuatro o seis palabras clave el efecto se nota; con quince deja de ser un acento.
¿Qué ve alguien con movimiento reducido activado?
El manifiesto aparece entero, en negro con las palabras clave en color vivo, sin escenario fijo, sin cursor y sin animaciones; la página se lee como un texto normal. Lo mismo ocurre si el JavaScript no carga.
¿Sirve con otra tipografía?
Con cualquier sans de peso 600 y buena cobertura de tildes y ñ. El efecto depende del contraste entre el gris al 15 % y el negro, así que funciona mejor con pesos medios o altos; con un peso fino el texto apagado casi desaparece.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈8914 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2944 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 01-10-2026

Cópialo desde aquí

Tu navegador no nos deja escribir en el portapapeles. El texto ya está seleccionado: pulsa Ctrl + C (o ⌘ + C) o el botón.