empro-labs-animations

Animation Empro Labs

Conçoit et construit une nouvelle mécanique d'animation par page. Chaque page est une démo locale et autonome avec un contenu de marque factice, afin de pouvoir être adaptée à toute entreprise, y compris l'immobilier.

Demande

La demande de l'utilisateur à partir de la commande slash :

$ARGUMENTS

Si la demande ci-dessus est vide, posez une question : quelle mécanique ou section devons-nous construire, ou de quelle référence devrions-nous nous inspirer ? Puis démarrez le flux de travail.

Base de connaissances (lisez-la, ne devinez pas)

Fichier	À lire quand
references/thinking-process.md	Toujours, avant de choisir une mécanique. Comment en inventer une et la justifier
references/used-designs.md	Toujours. Familles, polices et palettes déjà utilisées, pour ne pas les répéter
references/mechanic-library.md	Toujours. 25 familles construites et environ 26 idées testées non encore réalisées
references/design-language.md	Étape 3. Appariement des polices, palette, règles de mise en page et de texte, et ce qu'il faut éviter
references/technique-recipes.md	Étape 4. Blocs de construction fonctionnels : tilt, FLIP, particules, physique, WebGL, audio et plus
references/real-estate-applications.md	Lorsque le brief concerne une section immobilière ou de propriété
references/premium-quality-bar.md	Étape 6. La liste des impératifs et des recommandations, et le modèle de rapport
references/build-and-test-process.md	Étapes 5 et 6. Règles de nommage, liste de vérification des tests, bugs déjà rencontrés
references/mechanics-catalogue.md	Lorsque vous avez besoin des détails d'un exemple existant
references/layered-stack-hyperframe.md	Si la demande est un effet 3D calqué ou empilé

Règles

1. Inventez, ne répétez pas. Choisissez une famille de mécaniques qui n'est pas dans used-designs.md, ou modifiez suffisamment l'entrée et l'idée visuelle pour passer le test de nouveauté dans thinking-process.md.
2. Recréez, ne copiez pas. Lorsque l'utilisateur indique un site de référence, étudiez son comportement et sa technique, puis écrivez un nouveau code, copie et mise en page. Ne copiez jamais le code, le texte, le logo, les polices ou les images d'un autre site.
3. Marque factice. Utilisez un texte de marque inventé sauf si l'utilisateur fournit une marque. N'ajoutez pas d'e-mails, numéros de téléphone, noms de clients ou chiffres réels. Étiquetez chaque démo comme un concept.
4. Local uniquement. Servez les pages sur localhost. Ne vous connectez pas à GitHub, Vercel ou tout autre hébergeur sauf demande de l'utilisateur.
5. Un moment signature par page. Tout le reste reste sobre.
6. Testez avant de rapporter. Aucune erreur console, l'interaction fonctionne, un écran 375 px n'a pas de défilement latéral, le mouvement réduit est géré, et le contenu se lit sans mouvement. Dites ce que vous n'avez pas testé.
7. Identifiants uniques et noms de classes préfixés. Les noms génériques comme .top ou .unit span cassent les pages.

Flux de travail

1. Lisez la base de connaissances pour la demande : thinking-process.md, used-designs.md, mechanic-library.md.
2. Esquissez la page dans la réponse : visiteur et objectif, primitive, entrée, moment signature, mouvement de soutien, solutions de repli. Utilisez thinking-process.md section 4.
3. Choisissez le langage de conception : une police d'affichage non utilisée dans les trois dernières lignes de used-designs.md, une couleur d'accent, une palette avec un contraste de texte d'au moins 4,5:1. Utilisez design-language.md.
4. Créez le dossier <mechanic>-site/. Copiez templates/starter-site/ dedans, puis remplacez la copie, la palette, les polices et le moment signature. Construisez la mécanique à partir de technique-recipes.md.
5. Servez et testez avec python -m http.server <port> dans le dossier. Utilisez le port libre suivant à partir de 8000. Exécutez la liste de vérification dans build-and-test-process.md à 1440 px et 375 px.
6. Jugez selon premium-quality-bar.md. Corrigez tout impératif non satisfait avant de rapporter.
7. Rapportez avec le modèle dans premium-quality-bar.md.
8. Enregistrez : si l'utilisateur conserve la page, ajoutez une ligne à used-designs.md et, s'il s'agit d'une nouvelle famille, marquez-la comme construite dans mechanic-library.md.

Exemples

examples/ contient 25 démos exécutables, y compris l'exemple neutre layered-stack. Pour les essayer, exécutez python -m http.server 8000 dans examples/, puis ouvrez un dossier, par exemple http://localhost:8000/layered-stack-hyperframe/.

Modèles

Dossier	Utilisation
templates/starter-site/	Point de départ pour chaque nouvelle page. La mise en page, les jetons, les révélations, l'inclinaison et le mouvement réduit sont déjà câblés

Chaîne de repli

• L'utilisateur nomme une référence mais ne donne pas de page à étudier → demandez l'URL ou un enregistrement d'écran. Ne devinez pas la mécanique à partir du nom.
• Une mécanique nécessite une fonctionnalité que le navigateur ne possède pas (WebGL, Web Audio, CSS animé par défilement) → construisez d'abord la solution de repli, puis la fonctionnalité, et dites quels navigateurs ont été testés.
• Aucune demande du tout → proposez deux familles de mechanic-library.md qui ne sont pas encore construites, et demandez laquelle.
• La demande concerne une propriété réelle (annonces réelles, prix réels, photos réelles) → utilisez des données factices, dites-le, et demandez le contenu réel avant sa mise en ligne.