HyperFrames Werbevideo (9:16)

HyperFrames Werbevideo

Verwende dieses Skill, nachdem du die Seite mit mobile-dom-fidelity inspiziert hast.

Videostruktur

1. Intro mit einer kurzen Überschrift.
2. Scrollen oder Eintritt ins Karussell.
3. Hauptprodukt-Highlight.
4. Simulierter Produktklick.
5. Hauptvorteile.
6. Preis.
7. Benutzerauswahlmöglichkeiten.
8. Warenkorb oder Checkout.
9. CTA oder finale Bestätigung.

Interaktive Reise

Das Video sollte sich wie eine echte Browsing-Sitzung anfühlen, nicht wie eine Diashow. Modelliere jede Aktion als Ursache und Wirkung:

• Scrollen deckt den Abschnitt auf;
• Karussell bewegt sich durch die Produkte;
• Hauptkarte kehrt in die Mitte zurück;
• Cursor klickt auf die Karte;
• Produktseite erscheint;
• Vorteile werden sichtbar;
• Preis und CTA erhalten Fokus;
• Klick führt zum Warenkorb oder Checkout;
• Finale zeigt Schlussfolgerung oder Zustimmung.

Kompositionsregeln

• Vertikales Format: 1080x1920.
• Verwende echten, aus dem DOM extrahierten Text.
• Verwende lokale Assets oder erlaubte URLs.
• Registriere angehaltene GSAP-Timelines in window.__timelines.
• Vermeide Fetch-Vorgänge zur Renderzeit.
• Vermeide nicht-deterministische Date.now() und Math.random().
• Jeder animierte Klick muss eine sichtbare Komponente treffen.

Animationsmuster

• Titel: sanftes Eintippen, ohne aggressive Geschwindigkeit.
• Karten: Eintritt mit y, opacity und leichtem scale.
• Karussell: horizontale Bewegung mit einer Pause auf der Hauptkarte.
• Klick: Cursor, Welle, Mikro-Zoom und Fokus-Schatten.
• Bildschirmwechsel: lateraler Übergang von rechts nach links.
• Produkt: leichter Zoom auf das Hauptbild und gestaffelter Vorteilseintritt.

Klick-Zuordnung

Bevor du einen Klick animierst, registriere:

Zielselektor:
sichtbar ab:
Klickzeit:
Zielrechteck:
Klick x/y:
Szene nach dem Klick:

Lehne den Klick ab, wenn:

• das Ziel noch unsichtbar ist;
• das Ziel außerhalb des Viewports liegt;
• eine andere Überlagerung das Ziel abdeckt;
• der Cursor vor dem Ende der Eintrittsanimation ankommt.

Erforderliche Validierung

Vor der Auslieferung:

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

Bei simulierten Klicks zusätzlich validieren:

• Ziel existiert;
• Ziel ist zum Klickzeitpunkt sichtbar;
• Klickmittelpunkt liegt innerhalb des Begrenzungsrahmens;
• keine defekten Bilder;
• keine überlappenden Texte in Schlüsselbildern.

Erwartete Ausgabe

• Komposition index.html;
• gerendertes MP4-Video;
• Validierungszusammenfassung;
• ggf. bereinigter Übergabeordner.