empro-labs-animaciones

Animación Empro Labs

Diseña y construye una mecánica de animación nueva por página. Cada página es un demo local e independiente con contenido de marca ficticio, de modo que se pueda adaptar a cualquier negocio, incluyendo el inmobiliario.

Solicitud

La solicitud del usuario desde el comando de barra:

$ARGUMENTS

Si la solicitud anterior está vacía, haz una pregunta: ¿qué mecánica o sección debemos construir, o de qué referencia debemos aprender? Luego inicia el flujo de trabajo.

Base de conocimiento (léela, no adivines)

Archivo	Leer cuando
references/thinking-process.md	Siempre, antes de elegir una mecánica. Cómo inventar una y justificarla
references/used-designs.md	Siempre. Familias, fuentes y paletas ya usadas, para no repetirlas
references/mechanic-library.md	Siempre. 25 familias construidas y alrededor de 26 ideas probadas aún no construidas
references/design-language.md	Paso 3. Emparejamiento de tipos, paleta, reglas de diseño y copia, y qué evitar
references/technique-recipes.md	Paso 4. Componentes funcionales: inclinación, FLIP, partículas, física, WebGL, audio y más
references/real-estate-applications.md	Cuando el encargo sea para una sección inmobiliaria o de propiedades
references/premium-quality-bar.md	Paso 6. La lista de obligatorio y recomendado, y la plantilla del informe
references/build-and-test-process.md	Pasos 5 y 6. Reglas de nomenclatura, lista de verificación de pruebas, errores vistos antes
references/mechanics-catalogue.md	Cuando necesites los detalles de un ejemplo existente
references/layered-stack-hyperframe.md	La solicitud es un efecto hover 3D en capas o apilado

Reglas

1. Inventa, no repitas. Elige una familia de mecánicas que no esté en used-designs.md, o cambia la entrada y la idea visual lo suficiente para pasar la prueba de novedad en thinking-process.md.
2. Recrea, no copies. Cuando el usuario señale un sitio de referencia, estudia su comportamiento y técnica, luego escribe código, copia y diseño nuevos. Nunca copies el código, texto, logotipo, fuentes o imágenes de otro sitio.
3. Marca ficticia. Usa contenido de marca inventado a menos que el usuario proporcione una marca. No agregues correos electrónicos, números de teléfono, nombres de clientes o cifras reales. Etiqueta cada demo como un concepto.
4. Solo local. Sirve las páginas en localhost. No te conectes a GitHub, Vercel ni a ningún otro host a menos que el usuario lo solicite.
5. Un momento emblemático por página. Todo lo demás se mantiene tranquilo.
6. Prueba antes de informar. Sin errores en la consola, la interacción funciona, una pantalla de 375 px no tiene desplazamiento lateral, el movimiento reducido está gestionado y el contenido se lee sin movimiento. Di lo que no probaste.
7. Identificadores únicos y nombres de clase con prefijo. Nombres genéricos como .top o .unit span rompen las páginas.

Flujo de trabajo

1. Lee la base de conocimiento para la solicitud: thinking-process.md, used-designs.md, mechanic-library.md.
2. Bosqueja la página en la respuesta: visitante y objetivo, primitiva, entrada, momento emblemático, movimiento de apoyo, alternativas. Usa la sección 4 de thinking-process.md.
3. Elige el lenguaje de diseño: una fuente de visualización no utilizada en las últimas tres filas de used-designs.md, un color de acento, una paleta con contraste de texto 4.5:1. Usa design-language.md.
4. Crea la carpeta <mechanic>-site/. Copia templates/starter-site/ en ella, luego reemplaza la copia, la paleta, las fuentes y el momento emblemático. Construye la mecánica a partir de technique-recipes.md.
5. Sirve y prueba con python -m http.server <port> dentro de la carpeta. Usa el siguiente puerto libre a partir de 8000. Ejecuta la lista de verificación en build-and-test-process.md a 1440 px y 375 px.
6. Evalúa contra premium-quality-bar.md. Corrige cualquier elemento obligatorio fallido antes de informar.
7. Informa con la plantilla en premium-quality-bar.md.
8. Regístralo: si el usuario conserva la página, agrega una fila a used-designs.md y, si es una familia nueva, márcala como construida en mechanic-library.md.

Ejemplos

examples/ contiene 25 demos ejecutables, incluido el ejemplo neutral de capas apiladas. Para probarlos, ejecuta python -m http.server 8000 dentro de examples/, luego abre una carpeta, por ejemplo http://localhost:8000/layered-stack-hyperframe/.

Plantillas

Carpeta	Uso
templates/starter-site/	Punto de partida para cada nueva página. Diseño, tokens, revelaciones, inclinación y movimiento reducido ya integrados

Cadena de alternativas

• El usuario nombra una referencia pero no proporciona ninguna página para estudiar → pide la URL o una grabación de pantalla. No adivines la mecánica por el nombre.
• Una mecánica necesita una función que el navegador no tiene (WebGL, Web Audio, CSS impulsado por desplazamiento) → construye primero la alternativa, luego la función, y di qué navegadores se probaron.
• No hay ninguna solicitud → propón dos familias de mechanic-library.md que aún no estén construidas y pregunta cuál.
• La solicitud es para una propiedad real (listados reales, precios reales, fotos reales) → usa datos ficticios, indícalo y pide el contenido real antes de que se ponga en marcha.