Cinematic Motion UI

Una página generada por un modelo suele verse como el promedio de todas las páginas que ha visto: una insignia centrada, un titular en Inter negrita, un brillo púrpura a rosa, dos botones, tres tarjetas de iconos, todo apareciendo con la misma velocidad. Nada está mal y nada fue decidido. La gente reconoce ese promedio al instante, y ese reconocimiento es lo que significa "parece hecho por IA".

Las páginas de nivel galería (las que se venden como prompts premium en motionsites.ai) se diferencian en cuatro aspectos, y este skill se construye alrededor de ellos:

Una idea visual fuerte lleva la página. Una imagen cinematográfica o un vídeo, una palabra gigante, un personaje, un campo generativo. La interfaz lo sirve en lugar de competir con él.
Tipografía con contraste y cuidado. Una decisión tipográfica que pertenece a esta marca (un mega logotipo, una grotesca condensada a gran escala, una serifa de alto contraste sola, mono como voz), tracking negativo que escala con el tamaño, interlineado inferior a 1.15 en tipografía de exhibición y, a veces, kerning ajustado letra por letra.
Movimiento coreografiado. Cada elemento tiene su propio tipo de entrada y su propio retardo, con una misma familia de easing, para que la página se ensamble en lugar de aparecer gradualmente. La página sigue completa y legible aunque nunca se ejecute animación alguna.
Valores específicos en todas partes. Hex exacto, px exacto, easing exacto, texto exacto. La vaguedad es cómo se filtran los valores por defecto (y el aspecto de IA). Los prompts de MotionSites tienen 15–40 KB de valores exactos para una sola pantalla. Esa precisión es el producto.

La ejecución

Trabaja estos pasos en orden. Los pasos 1–2 son pensamiento en papel y toman unos minutos; saltarlos es la razón más común por la que el resultado deriva hacia el promedio.

1. Ficha de dirección

Lee el proyecto (marca existente, fuentes, colores, textos, activos) y el resumen del usuario. Luego escribe una ficha de dirección corta en tu respuesta o en un archivo temporal, usando references/spec-template.md § Ficha de dirección:

Tema y audiencia: para quién es, en una frase, con los sustantivos propios del usuario.
Arquetipo: elige uno de los siete en references/archetypes.md. Lee ese archivo ahora; da la composición, tipo, paleta, materiales y movimiento característico de cada arquetipo. Si el usuario nombra una referencia (un sitio, una plantilla de MotionSites), asígnala al arquetipo más cercano.
Tres palabras de ambiente que no sean "moderno, limpio, elegante" (esas describen todas las páginas).
Paleta: fondo, tinta, tinta atenuada, como máximo un acento. Nombra valores hex.
Par tipográfico: de references/typography.md. Anota el rol de cada fuente.
Movimientos que no usaré: nombra al menos dos de los valores por defecto "de buen gusto IA" del apartado references/anti-ai-tells.md § Señales de segundo orden que esta página evitará, y qué los reemplaza. Los prompts de galería se han copiado tanto que su propia receta es ahora una señal.
Momento característico: lo que alguien describiría a un amigo ("las letras del título se elevan mientras finos anillos se dibujan alrededor de su cara"). Si no puedes nombrarlo, la página será olvidable.
Plan de medios: qué llena el héroe y de dónde viene (paso 3).

2. Especificación antes del código

Completa el resto de references/spec-template.md: tokens, pila de capas, orden de marcado, cada componente con sus estados, la tabla de movimiento (elemento → tipo de entrada → retardo → duración) y la tabla de puntos de ruptura. Mantenlo conciso. Es un documento de trabajo, no prosa. Este es el paso que hace preciso el resultado: una vez que los valores están escritos, implementas decisiones en lugar de recurrir a valores por defecto.

Si el usuario pidió un prompt o especificación (para pegar en otro constructor) en lugar de código, la especificación completa es el entregable. Sigue la estructura en references/spec-template.md § Forma de prompt.

3. Medios

La imagen o vídeo del héroe hace la mayor parte del trabajo emocional. Lee references/media.md, luego elige en este orden:

Activos que el usuario proporcionó o que existen en el proyecto.
Un fondo generativo de assets/backgrounds/ (ola de partículas canvas, campo de shaders WebGL, anillos SVG dibujados), ajustado a la paleta. Estos son movimiento real, no marcadores de posición.
Un espacio de medios diseñado: un fallback con estilo (campo degradado o capa generativa) más un prompt de generación listo para usar para la imagen o vídeo en un comentario y en tu informe, para que el usuario pueda colocar el archivo.

Nunca enlaces aleatorios de stock (picsum, source.unsplash.com, servicios de marcador de posición) y nunca dejes cajas grises. Ambas son la forma más rápida de verse inacabado.

4. Construcción

HTML de un solo archivo (por defecto cuando no hay proyecto): comienza desde assets/starter.src.html. Es la base (pila de capas, kit de movimiento, salvaguardas, manejo de movimiento reducido, menú móvil, grano), no un diseño. Reestiliza y recomponlo para el arquetipo elegido. Mantén los marcadores /*@@MOTION_KIT_CSS@@*/, /*@@MOTION_KIT_JS@@*/ y /*@@BG:nombre@@*/ en tu código fuente y genera el archivo final con python3 <skill>/scripts/inline_kit.py page.src.html index.html, que inserta el kit y los fondos exactamente en lugar de que los reescribas. (assets/starter.html es el mismo inicio ya insertado, para lectura). Las páginas examples/ muestran el listón de calidad. En evaluaciones ciegas obtuvieron una puntuación de menos aspecto IA que las plantillas de galería de las que aprendieron: cinematic-bay-hero.html (A: lamas de madera que se abren a una bahía brumosa), dark-code-review-hero.html (B: el propio diff del producto es la imagen, sin el tópico de la palabra acento), light-window-hero.html (híbrido A/C: sol matutino que se desplaza por una pared en tiempo real). Ojea la más cercana a tu resumen para ver el nivel de detalle y cómo un concepto une imagen, tipo y movimiento. No copies su composición, copia o paleta: cada resumen merece su propia idea.
React / Next / Tailwind / Framer Motion: lee references/react-port.md. Mantén las animaciones de entrada en keyframes CSS para que el HTML renderizado en servidor sea visible sin hidratación, y usa Framer Motion para el movimiento vinculado al scroll e interactivo.
Detalles de movimiento: references/motion.md. Superficies: references/materials.md. Responsivo: references/responsive.md.
SVG en línea para cada icono y la marca del logotipo, dibujados para esta marca. Las fuentes de iconos y conjuntos de iconos de stock en filas de características son una señal fuerte de plantilla.

5. Palabras

El texto es la mitad de por qué las páginas parecen IA. Reglas:

Usa los sustantivos y verbos concretos del tema ("Entrena agentes en tus propios runbooks", "Resorts dibujados desde la línea de marea") en lugar de abstracciones de categoría ("Descubre el poder de la IA").
Los titulares son de 4–9 palabras divididas en dos líneas a propósito; el salto de línea es parte del diseño.
Sin pruebas inventadas. Los logotipos de clientes, testimonios, valoraciones y estadísticas de negocio deben venir del usuario. Si la composición necesita una fila de estadísticas y no tienes números reales, usa hechos no reivindicativos (ubicación, año de fundación, número de servicios ofrecidos, horario de apertura) o márcalos claramente como marcadores de posición en comentarios de código y en tu informe.
Escribe en el idioma del usuario cuando la página sea para su mercado. El texto en vietnamita necesita una fuente con cobertura completa de glifos vietnamitas (consulta references/typography.md).
Evita las frases listadas en references/anti-ai-tells.md § Texto. scripts/audit.py las marca.

6. Verificar. Míralo, luego arréglalo.

Pasar las comprobaciones no es lo mismo que verse bien, pero fallarlas garantiza que no lo está.

Ejecuta la auditoría estática: python3 <skill>/scripts/audit.py <archivo-o-directorio>. Arregla cada HIGH; arregla o acepta conscientemente cada MEDIUM.
Abre la página en un navegador real (panel de navegador integrado, Playwright o Chrome, el que esté disponible). Espera ~3 segundos a que termine la entrada, luego ejecuta el fragmento de scripts/runtime_check.js a través de la evaluación JS del navegador. Informa de texto que permanece oculto, desbordamiento horizontal, texto cortado por un bloqueo de una pantalla, medios rotos, fuentes que no cargaron, objetivos táctiles pequeños y elementos que siguen ejecutando animaciones. También lee la consola en busca de errores. Una pestaña de navegador oculta o en segundo plano no renderiza fotogramas, por lo que las líneas de tiempo CSS/WAAPI y los bucles requestAnimationFrame se detienen y la página puede verse en blanco o medio construida en capturas de pantalla. Antes de juzgar, toma una o dos capturas (cada una renderiza fotogramas), o ejecuta document.getAnimations().forEach(a => { try { a.finish() } catch (e) {} }), luego vuelve a comprobarlo. También elimina todos los <script> de una copia de la página y cárgala una vez: todo el texto debe seguir siendo visible y el diseño intacto.
Captura de pantalla a 1440×900, 1280×720 (portátil pequeño: el lugar más común donde los héroes se rompen) y 375×812. Si la página tiene un menú móvil, ábrelo y captúralo también.
Mira cada captura de pantalla y hazte las preguntas de references/anti-ai-tells.md § La prueba de entrecerrar los ojos. Arregla lo que falla. Haz al menos una ronda de arreglar y mirar incluso si la primera pasada parece bien.
Si no puedes abrir un navegador en absoluto, dilo en el informe. No afirmes una verificación visual que no hiciste.

7. Informe

Cuéntale al usuario brevemente: la dirección (arquetipo, momento característico, par tipográfico), qué es marcador de posición (medios, estadísticas, enlaces) y exactamente cómo reemplazarlo, y qué verificaste a qué tamaños.

Leyes que se aplican en todos los arquetipos

Composición

El héroe es un viewport en escritorio (100dvh, sin scroll dentro del héroe) a menos que el resumen sea una landing page larga. El contenido se ancla a la parte inferior o a las esquinas, no al centro exacto. La parte superior pertenece al medio.
Pila de capas, de atrás a adelante: color de fondo → medio → capa de velo → contenido de página → grano. El velo está ajustado al medio (un oscurecimiento radial detrás del texto, un degradado superior detrás de la navegación), para que el texto sea legible sin encerrarlo en una tarjeta.
Como máximo dos llamadas a la acción en el héroe: una sólida, una fantasma o de vidrio. Nunca tres.
La "insignia píldora sobre el titular" y las "tres estadísticas en fila en la parte inferior" son ahora muebles de plantilla. Úsalos solo cuando el contenido sea realmente una etiqueta corta o tres números reales, e incluso entonces cambia la forma (un solo hecho, una tabla pequeña, texto en esquina, una línea de tiempo).
Usa un sistema de radio por arquetipo (afilado 0–7 px para tecnología y editorial, píldoras para suave y consumo) y mantente en él. rounded-2xl uniforme en todo es una firma de plantilla.

Tipografía

Tamaños de exhibición: tracking de −0.03em a −0.05em, interlineado 0.9–1.12. Versalitas y microtexto mono: tracking de +0.04em a +0.12em, mayúsculas, 11–14 px.
Como máximo un dispositivo de énfasis por titular, elegido del resumen. La palabra en serifa cursiva dentro de un titular sans ("Entrena agentes de IA en…") es el tic de "IA de buen gusto" más reconocible de 2025–26: los revisores ciegos lo marcan al verlo. No lo uses por defecto. Prefiere contraste de escala o peso, un salto de línea deliberado, color, una marca dibujada vinculada al concepto (la ondulación de un diacrítico, un garabato de bolígrafo rojo bajo un error), o ningún énfasis. Si una serifa cursiva es realmente la voz de la marca, pon toda la línea en ella en lugar de una sola palabra.

Movimiento

Una familia de easing (cubic-bezier(.16,1,.3,1) expo-out por defecto). Las entradas duran 0.6–1.35 s y están escalonadas desde aproximadamente 0.1 s hasta aproximadamente 1.5 s en total, en orden de lectura. Cada tipo de elemento tiene una entrada distinta (mask-rise para titulares, escala para píldoras de navegación, barrido para botones, elevación para estadísticas).
El contenido es visible en reposo. El estado oculto vive solo en el 0% del keyframe con animation-fill-mode: both, más un salvaguarda JS. Una página que permanece en blanco cuando falla JS o las animaciones está rota, por bien que se vea en el camino feliz.
El movimiento ambiental (vídeo, partículas, shader) vive en la capa de medios. La interfaz en primer plano está quieta después de su entrada, aparte de la retroalimentación hover (0.2–0.35 s) y los efectos opcionales vinculados al scroll.
Respeta prefers-reduced-motion: sin entrada, sin bucle ambiental (renderiza un solo fotograma fijo en su lugar).

Materiales

El vidrio y el metal son para uno o dos controles flotando sobre el medio, no para cada tarjeta. Las recetas están en references/materials.md.
Añade grano (6–10 % de opacidad) en páginas con mucho medio. Unifica la imaginería generada con la interfaz.

Archivos en este skill

Archivo	Leer cuando
`references/archetypes.md`	Paso 1, siempre
`references/typography.md`	Paso 1, elegir el par tipográfico
`references/spec-template.md`	Paso 2, siempre, más la forma de prompt cuando el usuario quiere un prompt
`references/media.md`	Paso 3
`references/motion.md`	Paso 4, detalles de movimiento, efectos de scroll, líneas de tiempo WAAPI
`references/materials.md`	Paso 4, botones, píldoras, vidrio, metal, texto degradado
`references/responsive.md`	Paso 4, tokens, puntos de ruptura incluyendo altura, escalado de mesa de trabajo, menú móvil
`references/react-port.md`	El proyecto es React, Next, Tailwind o Framer Motion
`references/anti-ai-tells.md`	Pasos 5–6
`assets/starter.html`	Construcciones de un solo archivo
`assets/motion-kit.css`, `assets/motion-kit.js`	Cualquier construcción (insertarlos o importarlos)
`assets/backgrounds/*.js`	Capa de medios generativa
`examples/*.html`	Para calibrar el listón de calidad (tres héroes)
`scripts/audit.py`	Auditoría estática de señales IA y robustez
`scripts/runtime_check.js`	Comprobaciones en el navegador después de cargar
`scripts/inline_kit.py`	Construir el archivo final único a partir de un origen con marcadores de kit/fondos

Cinematic Motion UI: landing pages que no parecen hechas por IA

¿Qué es Cinematic Motion UI: landing pages que no parecen hechas por IA?

Preguntar en tu IA favorita

Documentación