Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una rejilla de seis tarjetas separadas por líneas de 1 px, con cruces de agrimensor en cada vértice y un foco radial de un único azul vivo que sigue al puntero con suavizado de muelle. Bajo la luz aparece una malla de puntos de plano, el borde de la tarjeta se vuelve de color pleno y la luz cruza las líneas hasta las tarjetas vecinas. Cada tarjeta muestra unas coordenadas que cambian con la luz, el icono se redibuja al alcanzarla, la flecha del enlace se adelanta y una marca recorre la línea de cota de la cabecera. Sin puntero, la luz recorre la rejilla sola; en táctil se queda en el dedo y con teclado se centra en la tarjeta enfocada. Es HTML, CSS y JS sin librerías. Encaja en bloques de características, servicios o capacidades de webs de estudio, tecnología, arquitectura o comercio. Cambia el color vivo y el radio del foco con dos variables.

Prompt
≈11.716 tokens · con Lite
Librerías
ninguna
Demo
28,7 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
  • Color del foco y de los iconos (el único color vivo)
  • Radio del foco
  • Titular de la sección
  • Email de contacto
  • Teléfono

Í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.559 palabras · ≈11.716 tokens
Lite
1.768 palabras · ≈3.458 tokens
Librerías
ninguna
Peso de la demo
28,7 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.559 palabras en el Completo y 1.768 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 azul vivo a verde esmeralda»
    • «Haz el foco más pequeño, como una linterna de 120 px»
    • «Quita el autopiloto: que la luz solo aparezca con el puntero»
    • «Pasa la rejilla a cuatro columnas con ocho tarjetas»
  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

¿Por qué el foco no se queda dentro de la tarjeta que tiene debajo?
Porque el script calcula la distancia de la luz a cada tarjeta en cada fotograma, no usa :hover. Así el halo y el borde revelado atraviesan la línea de unión y las tarjetas vecinas se encienden de forma continua.
¿Cómo se ve en móvil, donde no hay puntero?
La luz recorre la rejilla sola con una trayectoria lenta; al tocar una tarjeta salta al dedo, lanza una onda y se queda 1,8 segundos. En una sola columna sigue funcionando igual.
¿Qué pasa con el teclado y con movimiento reducido?
Al tabular a un enlace «Ver alcance» la luz se centra en su tarjeta. Con prefers-reduced-motion no hay autopiloto, entradas ni suavizado: la luz sigue al puntero de forma inmediata y todo lo demás queda estático y legible.
¿Puedo poner más o menos de seis tarjetas?
Sí. El script mide todas las tarjetas que haya dentro de la rejilla; solo cambia el número de article y las columnas de la rejilla. Las cruces y las líneas se adaptan solas.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11716 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3458 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.