hyperframes-motion-polish

HyperFrames Motion Polish (Bewegungsfeinschliff)

Verwende dieses Skill, wenn das Video bereits existiert, aber sich hochwertiger und flüssiger anfühlen soll.

Segmentdiagnose

Teile den Zeitstrahl in 3- bis 5-Sekunden-Blöcke ein:

• Was soll der Betrachter in diesem Segment verstehen?
• Welches Element erhält den Fokus?
• Klickt der Cursor auf das richtige Ziel?
• Ist die Komponente bereits vor dem Klick erschienen?
• Gibt es eine lange Pause ohne Bewegung?
• Ist ein Text oder Bild abgeschnitten?

Hochwirksame Anpassungen

• Rückmeldung zum Klick näher an den Cursorkontakt verschieben.
• Pausen zwischen Vorteilen und Preis reduzieren.
• Für UI-Scrolls power3.inOut verwenden.
• Für Text- und Karteneingänge power2.out oder power3.out verwenden.
• Vermeiden, dass Kinderanimationen gegen den übergeordneten Container-Scroll kämpfen.
• Kleinen Fokus-Zoom auf das Klickziel anwenden, zwischen 1.015 und 1.035.
• Temporären Schatten verwenden, um den Blick zu führen.

Häufige Fehlerbehebungen

Cursor klickt auf leeren Raum

• Den Klick verzögern, bis die Komponente vollständig eingetreten ist.
• x/y aus dem DOM-Bounding-Box neu berechnen.
• Wenn der Container scrollt, die Position nach dem Scrollen validieren, nicht davor.

Überlappender Text

• Das Intervall zwischen den Eingängen erhöhen.
• Die Skalierung des Blocks reduzieren, nicht nur die Schriftgröße.
• Sichtbaren Text pro Frame reduzieren.
• Feste Höhen für Karten und Schaltflächen sicherstellen.

Lebloses Karussell

• Das Karussell mit y, opacity und leichtem scale erscheinen lassen.
• Die horizontale Achse mit einer Pause auf der zentralen Karte animieren.
• Subtile Vergrößerung auf die ausgewählte Karte anwenden.
• Rahmen oder Schatten entfernen, die auf der Originalseite nicht vorhanden sind.

Statisches Segment

• Pausen in Mikrobewegung umwandeln: leichte Parallaxe, subtiles Atmen, Cursor bereitet die nächste Aktion vor.
• Haltepunkte verkürzen, wo keine wichtige Lektüre stattfindet.
• Vorteile und Preis in einer kompakteren Abfolge zeigen.

CTR-Checkliste

• Produkt erscheint früh.
• Vorteil erscheint vor dem Preis.
• Preis erscheint auf einem sauberen Bildschirm.
• Handlungsaufforderung (CTA) erhält visuellen Fokus.
• Cursor zeigt den Weg, ohne willkürlich zu wirken.
• Übergang zur Kasse fühlt sich wie eine Folge des Klicks an.

Validierung

Verwende npx hyperframes inspect mit ausreichend Beispielen:

npx hyperframes inspect ./project --samples 18

Falls möglich, generiere Schnappschüsse zu den vom Kunden kritisierten Sekunden und überprüfe:

• erster Frame;
• erster Klick;
• Hauptprodukt;
• Vorteile;
• Preis;
• Kasse;
• Bestätigung.

Nimm chirurgische Änderungen vor: Passe Timings, Easings, Versätze, Skalierung und Deckkraft an, bevor du das HTML umstrukturierst.