Ich habe in Figma einen interaktiven Website-Hero gebaut, der auf deinen Cursor reagiert. Hier ist der Prozess.

Die meisten "KI in deinem Design-Workflow"-Demos enden bei einem statischen Bild. Dieses hier bewegt sich. Ein interaktiver Website-Hero, eine cineastische Sci-Fi-Landschaft, die sich deinem Cursor zuneigt, gebaut in Figma ohne eine einzige 3D-Datei oder eine Zeile Shader-Code. Das Ganze entstand aus dem Higgsfield-Plugin, direkt in der Canvas, in der ich täglich arbeite.

Hier ist der fertige Hero. Der Loader kalibriert, die Szene enthüllt sich, dann reagiert sie in jede Richtung auf den Cursor.

Das Ganze besteht aus vier Schritten, und alle Prompts sind unten fertig zum Kopieren:

1. Die Szene als einen cineastischen Establishing-Shot generieren.
2. Dieselbe Szene aus vier leicht versetzten Kamerawinkeln generieren.
3. Diese Winkel-Clips in eine flache Bildsequenz umwandeln.
4. Die Sequenz mit dem Cursor verbinden und als echte Seite aufbauen.

Das alles braucht kein After Effects, keine 3D-App und keinen Entwickler. Es ist ein Plugin und ein einziger Build-Prompt.

Schritt 1: Die Szene generieren

Das Higgsfield-Plugin in Figma öffnen und einen cineastischen Establishing-Shot generieren. Der Trick: klar nach Tiefe, Vordergrund, Mittelgrund und Hintergrund als getrennte Ebenen fragen, denn diese Trennung ist es, die den Parallax-Effekt später lesbar macht. Gemälde, kein Foto.

Soft hand-painted sci-fi concept art, cinematic and atmospheric. A lone armored hero on a dark rocky cliff in the near foreground, gazing out over a vast misty valley of floating islands and tall glowing spires fading into an aurora sky. Strong depth built from clearly separated planes: dark foreground cliff and hero, floating rocks in the midground, distant spires far behind, soft atmospheric haze between each layer. Moody purples and teals with warm light. Simple and clean, not busy, painterly brushwork, epic scale.

Copy

Schritt 2: Die Kamerawinkel generieren

Jetzt dieselbe Szene aus vier leicht versetzten Kamerapositionen generieren: oben, unten, links, rechts. Das entscheidende Wort hier ist Orbit, nicht Tilt.

Tilt rotiert die Kamera am Platz und liefert kaum Parallax. Orbit bewegt die Kamera durch den Raum, sodass die nahe Klippe stark schwenkt, während die fernen Türme sich kaum bewegen. Dieser Unterschied ist die gesamte Illusion. Den Winkel klein halten, etwa 12 Grad, und den Shot sperren, damit nichts zwischen den Frames wackelt.

Single-axis camera ORBIT UP only, about 12 degrees, locked-off and gimbal-smooth, no handheld, no camera shake, no wobble. Vertical axis only, no horizontal drift, no diagonal. The scene is completely frozen, nothing in it moves, only the camera. Slow, subtle, seamless. Strong parallax: near foreground shifts more than the distant background.

Copy

Schritt 3: Die Clips in eine Bildsequenz umwandeln

Jeden Orbit-Clip als Frames exportieren. Hier wird kein Video abgespielt, sondern ein Daumenkino gebaut, durch das der Cursor blättern kann. Die eine Regel, die über Erfolg oder Misserfolg entscheidet: das einzelne Frame zeigen, das dem Cursor am nächsten ist, und niemals zwei Frames miteinander mischen.

Diese Regel kommt aus drei Fehlerquellen, auf die ich gestoßen bin und die ich behoben habe, in dieser Reihenfolge:

• Zwei benachbarte Frames zu mischen, um die Bewegung zu "glätten", erzeugt genau das Ghosting, den Doppelbildschleier.
• Eine echte Videodatei live zu suchen und bei Mausbewegung ihren Abspielkopf zu verschieben, erzeugt Stottern, weil Video-Seeking nicht framegenau ist.
• Eine Handvoll Frames wirkt abgehackt und billig, wie eine Diashow.

Die Lösung für alle drei ist dieselbe: viele Frames, einzeln angezeigt, am nächsten zum Cursor, ohne Mischung. Viele Frames pro Richtung exportieren, und die Bewegung liest sich als echte Tiefe.

Schritt 4: Die Sequenz mit dem Cursor verbinden

Der letzte Schritt ist die Interaktion. Figma Make die fünf flachen Frames übergeben, oben, unten, links, rechts und mittig, und den Prompt unten. Er mappt den Cursor auf das richtige Frame, lässt die Bewegung sanft gleiten, fügt den Kalibrierungs-Loader hinzu und legt das vollständige Interface darüber, sodass Logo, Menü, Headline und Buttons alle in derselben Welt wie die Szene leben.

Build a full-screen interactive hero. I provided the flat frames of a scene captured from up, down, left and right camera angles, plus a center frame. Stack them on a canvas. On mousemove, show the single frame nearest to the cursor's dominant axis (horizontal vs vertical, whichever is larger), eased so it glides. No blending between frames except a brief 100ms dissolve when the axis switches. Start with a calibration loader: a centered crosshair that draws in, counts up, then locks and becomes the live cursor as the scene reveals. Over the scene, lay a full interface in the same minimal monospace HUD style: a wordmark logo top-left, a horizontal nav menu top-right, a centered headline with one line of subtext, and a primary plus a secondary button. Thin rules, small uppercase labels, so the chrome and the scene read as one system. Dark and minimal. Respect prefers-reduced-motion.

Copy

Warum das wichtig ist

Der Punkt ist nicht das Raumschiff. Der Punkt ist, dass ein Designer jetzt ein Motion-Piece ausliefern kann, das früher einen 3D-Artisten, eine Render-Farm und einen WebGL-Entwickler gebraucht hätte, direkt aus dem Tool heraus, in dem er ohnehin schon lebt.

Schauen wir uns an, was wirklich produziert gegenüber gekauft wurde. Die Szene, die vier Kamerawinkel und die vollständige Frame-Sequenz wurden alle generiert. Die Montage, das Mappen der Frames auf den Cursor und das Aufbauen der Seite, war ein einziger Build-Prompt. Die Gesamtkosten waren ein Nachmittag und ein Plugin, kein Produktionsbudget und drei Auftragnehmer.

Das ist die Verschiebung, der es sich lohnt, Aufmerksamkeit zu schenken. Die Messlatte für "cineastisch und interaktiv" war früher ein ganzes Team. Jetzt ist es ein Prompt und die Bereitschaft, an den Details zu feilen, was genau der Teil ist, in dem Designer ohnehin schon immer gut waren.

Wenn du einen baust, tagge Brainy. Wir wollen ihn sehen.