hyperframes-commercial-video

HyperFrames Commercial Video

Utilisez ce skill après avoir inspecté le site avec mobile-dom-fidelity.

Structure de la vidéo

1. Introduction avec un court titre.
2. Défilement ou entrée dans le carrousel.
3. Mise en avant du produit principal.
4. Clic simulé sur le produit.
5. Principaux avantages.
6. Prix.
7. Choix de l'utilisateur.
8. Panier ou passage en caisse.
9. Appel à l'action ou confirmation finale.

Parcours interactif

La vidéo doit donner l'impression d'une vraie session de navigation, et non d'une séquence de diapositives. Modélisez chaque action comme une cause et un effet :

• le défilement révèle la section ;
• le carrousel parcourt les produits ;
• la carte principale revient au centre ;
• le curseur clique sur la carte ;
• la page produit s'affiche ;
• les avantages apparaissent ;
• le prix et l'appel à l'action reçoivent le focus ;
• un clic mène au panier ou au passage en caisse ;
• la fin montre la conclusion ou l'approbation.

Règles de composition

• Format vertical : 1080x1920.
• Utilisez le texte réel extrait du DOM.
• Utilisez des ressources locales ou des URL autorisées.
• Enregistrez les timelines GSAP en pause dans window.__timelines.
• Évitez les appels réseau au moment du rendu.
• Évitez les appels non déterministes Date.now() et Math.random().
• Chaque clic animé doit atteindre un composant visible.

Schémas d'animation

• Titres : saisie en douceur, sans vitesse agressive.
• Cartes : entrée avec y, opacity et un léger scale.
• Carrousel : mouvement horizontal avec une pause sur la carte principale.
• Clic : curseur, ondulation, micro-zoom et ombre de focus.
• Changement d'écran : transition latérale de droite à gauche.
• Produit : léger zoom sur l'image principale et entrée échelonnée des avantages.

Mappage des clics

Avant d'animer un clic, enregistrez :

cible sélecteur :
visible à partir de :
moment du clic :
rectangle cible :
clic x/y :
scène après clic :

N'acceptez pas le clic si :

• la cible est encore invisible ;
• la cible est en dehors de la fenêtre d'affichage ;
• un autre calque recouvre la cible ;
• le curseur arrive avant la fin de l'animation d'entrée.

Validation requise

Avant la livraison :

npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18

S'il y a des clics simulés, validez également :

• la cible existe ;
• la cible est visible au moment du clic ;
• le centre du clic se trouve à l'intérieur du cadre englobant ;
• il n'y a pas d'images cassées ;
• il n'y a pas de texte qui se chevauche dans les images clés.

Résultat attendu

• composition index.html ;
• vidéo MP4 rendue ;
• résumé de validation ;
• dossier de livraison propre, si nécessaire.