quiczz/motionsite

¿Qué hace motionsite?

Construye el aspecto de "sitio con movimiento": un video hero a pantalla completa en bucle, una superposición de degradado oscuro para texto legible, tarjetas con efecto vidrio, palabras que se animan al entrar, botones que reaccionan y secciones que se revelan al hacer scroll. La diferencia entre uno bueno y uno lento e inaccesible está en la lista de verificación a continuación, por lo que este skill construye la página y luego la audita.

No está afiliado a motionsites.ai. Este skill no contiene prompts ni assets de terceros.

Se ejecuta por sí solo: cuando pides una página de inicio, hero o sitio animado, Claude selecciona este skill, construye a partir de la plantilla y ejecuta la auditoría antes de informar.

Procedimiento

1. Obtén el brief de una sola vez. Nombre de la marca, promesa en una línea, llamada a la acción principal, de 3 a 6 secciones (características, pruebas, precios, FAQ), tono (tranquilo, audaz, divertido, lujoso) y cualquier logotipo, color o fuente que ya tengan. Si el usuario no proporcionó ninguno, elige una dirección tú mismo y di cuál.
2. Elige el stack según el proyecto. Proyecto existente de React/Next/Vue/Svelte: construye componentes en ese stack. Carpeta vacía sin preferencia: usa el archivo único templates/site.html (sin paso de compilación, se abre con doble clic). Si piden React, Vite, TypeScript y Tailwind, usa templates/Hero.tsx y templates/useReveal.ts.
3. Consigue el video honesto y ligero. Consulta references/assets.md. Usa el metraje propio del usuario o un clip generado o con licencia, nunca enlaces directamente al CDN de otro. Hasta que exista metraje real, envía el fondo animado con degradado CSS que incluye la plantilla para que la página ya se vea terminada. El metraje real se activa completando tres atributos data- en .hero-media (data-video-mp4, data-video-webm, data-poster). Crea versiones web con scripts/make_video_assets.sh (mp4 + webm + poster).
4. Construye la página a partir de la plantilla. Mantén estas partes: hero (video + superposición + titular + CTA), una barra de navegación de vidrio, de 3 a 6 secciones de contenido con animaciones de revelado, pie de página. Aplica las recetas de diseño en references/design-recipes.md (escala tipográfica, espaciado, paleta, tarjetas de vidrio, estados de botones, temporización).
5. Implementa las reglas de rendimiento y accesibilidad (a continuación). No son extras opcionales; son lo que hace que la página sea utilizable en un teléfono.
6. Audita. Ejecuta python3 <skill-dir>/scripts/check_motion.py <carpeta-del-sitio> y corrige cada ERROR. Luego míralo en un navegador: ancho de escritorio y de móvil, movimiento reducido activado, JavaScript desactivado para la primera pintura. Detalles en references/performance-accessibility.md.
7. Informa los archivos creados, cómo reemplazar el video de marcador de posición, qué dijo la auditoría y una cosa que revisar.

Reglas que determinan la calidad

• Video: muted, loop, playsinline (sin estos los navegadores móviles se niegan a reproducirlo en la página), poster establecido, preload="metadata", sin pista de audio. Inicia la reproducción desde el script después de verificar el movimiento reducido y el ahorro de datos, como hace la plantilla, para que esos visitantes nunca descarguen el video. Apunta a 2 a 4 MB para el clip hero, 1080p como máximo, de 6 a 12 segundos que hagan bucle limpio.
• El póster es la primera pintura. La imagen de póster (o el degradado) es lo que ve el visitante y lo que mide Largest Contentful Paint. Dale fetchpriority="high" y dimensiones exactas.
• Respeta al visitante. En prefers-reduced-motion: reduce, o cuando el ahorro de datos está activado, muestra el póster en lugar de reproducir el video y desactiva las animaciones. Pausa el video cuando se desplaza fuera de la pantalla.
• Anima solo transform y opacity. Nunca animes top, left, width, height o margin; fuerzan el layout y causan tirones en los teléfonos.
• El texto se mantiene legible sobre el video. Coloca una superposición de degradado entre el video y el texto, mantén el texto del cuerpo con al menos un contraste 4.5:1 contra el fotograma más oscuro y el más claro, y nunca coloques texto pequeño directamente sobre metraje en movimiento.
• Una idea por sección, un movimiento por elemento. Escalona con pasos de 60 a 100 ms, duraciones de 400 a 800 ms, ease-out. Si todo se mueve, nada guía la mirada.
• Móvil primero. El hero usa 100svh, no 100vh. Prueba a 375 px de ancho; sin desplazamiento horizontal. Considera un hero más ligero o estático en pantallas pequeñas.
• Estructura de contenido real. Un h1, puntos de referencia (header, main, footer), los botones son <button> o <a>, los enlaces tienen texto, las imágenes tienen alt.
• Tus propios assets. Sin video de CDN de terceros, fuentes autoalojadas o de un proveedor de fuentes, licencias registradas en assets/README.md.

Archivos

Archivo	Propósito
templates/site.html	Página de inicio completa en un solo archivo: video hero (activado con atributos data-) con fallback de degradado CSS, navegación de vidrio, titular animado, revelado al hacer scroll, tarjetas, CTA, pie de página
templates/Hero.tsx, templates/useReveal.ts	Versiones React del hero y el hook de revelado al hacer scroll
references/design-recipes.md	Tipo, color, espaciado, vidrio, botones, temporización de movimiento, patrones de sección
references/performance-accessibility.md	Presupuestos, movimiento reducido, comportamiento del video, pasos de prueba
references/assets.md	De dónde viene el video, licencias, generación de un clip, codificación
scripts/make_video_assets.sh	ffmpeg: clip de entrada a web mp4, webm, póster
scripts/check_motion.py	Audita una carpeta de sitio para detectar los problemas anteriores