heygen-com/hyperframes

Übergroßer Cursor – der Augenträger

Ein bewusst übergroßer macOS-artiger Zeiger, der als sichtbarer Protagonist durch das Bild reist: Er kommt von außerhalb des Bildschirms herein, führt das Auge des Betrachters zum nächsten Punkt, klickt, um das Nächste auszulösen, und verlässt die Szene wieder. Produktionserprobt in mehreren Launch-Filmen.

Warum es das gibt. Große Cursorbewegungen sind eine der günstigsten, aber ergiebigsten Bewegungsquellen in einem Launch-Video: ein Element, reine Transform-Tweens, und es (1) führt das Auge über Szenen, die sonst tot wirken würden, (2) gibt Morphs/Übergängen einen kausalen Auslöser („Der Klick hat das gemacht“) und (3) befreit das Auge aus einem statischen Zustand, wenn eine neue Szene oder eine komplexe Animation startet. Größer ist besser – ein Cursor in Originalgröße verschwindet im Video-Maßstab.

Größe & Aussehen (Hauskonvention)

• Vollbild-Szenen: 7cqw (≈134px bei 1920). In-Mock-/Kleinbildvarianten: 4,6–5,5cqw. Niemals kleiner.
• Eine SVG-Pfeilgeometrie überall. Zwei bewährte Füllungen – weißer Körper + schwarzer Strich oder schwarzer Körper (#1c1c1c) + weißer Strich (1,4px). Pro Szene nach Kontrast wählen, innerhalb eines Films konstant halten.
• Marken-Motiv-Cursor (der Trumpf). Der macOS-Pfeil ist der STANDARD, kein Muss. Wenn die Marke des Themas eine erkennbare Cursor-Identität hat – ein farbiger Mehrspielerpfeil mit Namensschild (Figma-Stil), ein Präzisions-Fadenkreuz einer Kreativsuite, ein unverwechselbarer Produktzeiger – dann verwende DIESEN Cursor stattdessen: sofort verständliche Markensprache für jeden, der das Produkt kennt. Dieselben Regeln gelten unverändert (übergroßer Maßstab, physischer Ein-/Austritt, Zielspitzenausrichtung, Klickzündung), und eine Variante mit Namensschild bewegt sich als eine starre Einheit (das Schild folgt dem Pfeil). Greife nur dann darauf zurück, wenn das Motiv wirklich wiedererkennbar ist; ein Cursor, den niemand erkennt, ist nur ein seltsamer Pfeil – falle auf macOS zurück.
• filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)), pointer-events: none, z-index über allem Szeneninhalt, will-change: transform.

#root .cursor {
  position: absolute;
  left: 48%;
  top: 115%; /* außerhalb des Bildschirms unten – die Ruheposition IST außerhalb des Bildschirms */
  width: 7cqw;
  height: 7cqw;
  z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  will-change: transform;
}

Eintrittsgesetz – physisch, niemals eingeblendet

Der Cursor tritt immer von außerhalb des Bildschirms ein (kanonisch: von unten, top:115–120%) und gleitet in einer einzigen, verlangsamenden Bewegung zu seinem ersten Ziel. Es muss sich anfühlen, als sei er in den Raum gekommen. Blende ihn niemals opak an einer Ruheposition ein, enthülle ihn niemals per Maskierung – das wirkt wie ein Glitch (ein realer, wiederholt beobachteter Fehlermodus).

• Standardpfad: senkrecht die y-Achse hoch zum Ziel – keine fragmentierten Diagonalen. Eine Diagonale ist in Ordnung, wenn sie ZUR GESCHICHTE gehört (Eintritt zu einem außermittigen Ziel), aber es ist in beiden Fällen ein einziger kontinuierlicher Vektor.
• duration: 0,4–0,92s, ease: power3.out, immediateRender: false beim fromTo.

tl.fromTo(
  cursor,
  { left: "48,6%", top: "115%" },
  { left: "48,6%", top: "55%", duration: 0,85, ease: "power3.out", immediateRender: false },
  0,25,
);

Zielspitzenausrichtung & der Klick-Tap

Der Hotspot ist die PFEILSPITZE, nicht die Boxmitte. Setze die Spitze auf die Mitte des Ziels und richte alle Druck-Skalierungen auf die Spitze aus: transformOrigin: '21% 14%' (für den Haus-Pfeilpfad in einem 24-Einheiten-ViewBox).

Klick = asymmetrisches Stauchen/Strecken (Verhältnis 1:2 wirkt wie ein echter Tap):

tl.to(cursor, { scale: 0,84, duration: 0,1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
  cursor,
  { scale: 1, duration: 0,22, ease: "power2.out", transformOrigin: "21% 14%" },
  t + 0,1,
);

Die Reaktion des Ziels ist ein separater, paralleler Tween (Button: scale: 0.94 + Druckfarbe/-schatten, die gleichzeitig mit demselben t starten). Reine Cursor-Taps (z. B. Fokussieren eines Texteingabefelds) erhalten KEINE Zielreaktion. Kombiniere mit cursor-click-ripple / press-release-spring für die Zielseite.

Der Klick ZÜNDET den nächsten Beat

Lasse niemals einen Morph, eine Tippsequenz, eine Fenstertransformation oder eine szenendefinierende Animation einfach starten. Setze den Cursor auf den Auslöser und lass den Klick sie verursachen, im selben Frame:

• Klick ▸ Menü-/Untermenü-Kaskade, Umschalt-Flip
• Klick ▸ Tippstart in ein Eingabefeld
• Klick ▸ Composer-Morph nach unten / Fenster verkleinern
• Klick ▸ Logo-Zündung / Flugstart
• Klick ▸ Play-State-Umschaltung + UI-Leben-Erwachen in einem Produkt-Mock

Während langer Beats, die es nicht selbst steuert (Tippen, Erzählung), gleitet der Cursor zur Seite (0,5–0,9s, power2.out) – niemals starr über der Aktion stehen bleiben, niemals nutzlos wackeln.

Austrittsgesetz & Szenenübergabe

Zwei erlaubte Ausgänge – beide physisch, niemals eine Opazitätseinblendung an Ort und Stelle:

1. Das Bild verlassen: Beschleunige mit power2.in aus dem nächstgelegenen Rand (left:'118%', left:'-12%' oder top:'116%'), 0,5–0,7s.
2. Schnittkurven-Übergabe: In den letzten ~0,3s vor einem harten Schnitt beginnt der Cursor, mit power2.in in Richtung des ersten Klickpunkts der NÄCHSTEN Szene zu beschleunigen und legt dabei das erste ~1/3 dieses Pfads zurück; die nächste Komposition setzt den Cursor mit gsap.set auf die Übergabepose und fährt mit power2.out bei angepasster Geschwindigkeit fort. Der Cursor selbst wird zum Trägerelement, das die Nahtstelle überbrückt:

// Szene A, letzte 0,3s – starte die Reise:
tl.to(cursor, { left: "40,7%", top: "63,7%", duration: 0,3, ease: "power2.in" }, CUT - 0,3);
// Szene B, t=0 – beende sie bei angepasster Geschwindigkeit:
gsap.set(cursorB, { left: "40,7%", top: "63,7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0,6, ease: "power2.out" }, 0);

Checkliste

• ≥ 7cqw im Vollbild (4,6–5,5cqw innerhalb eines Mocks) – bei Unsicherheit: größer
• tritt von außerhalb des Bildschirms auf einem kontinuierlichen Vektor ein (keine Ein-/Ausblendung oder Maskenenthüllung)
• Spitze landet auf der Zielmitte; Druck dreht sich um transformOrigin: '21% 14%'
• jeder Klick verursacht etwas, im selben Frame
• gleitet während beats, die es nicht steuert, zur Seite; kein nutzloses Wackeln
• verlässt die Szene physisch (rahmenlos ab oder Schnittkurven-Übergabe) – keine Einblendung an Ort und Stelle