Kostenlos
Solenne · 16:9
Mit diesem Skill gerendert
Product Launch Motion v1.0.0
Ein Launch-Film auf Dribbble-Niveau für deine App oder Website: eine UI-Form, die nie schneidet, ein Cursor, der jeden Klick macht, Federn, Zählwerke und Sound im Takt.
Noch keine Bewertungen 0 Downloads
- Format
- Video · 16:9
- Länge
- 0:30
Kostenlos Kostenlos mit Konto
Füge das in deinen Agent ein. Er verbindet bei Bedarf die CLI und installiert dann den Skill.
Ein Open-Source-Skill, der einen Launch-Film inszeniert wie die besten Motion Designer. Ein einziges Element wird ohne Schnitt vom Button zum Slider, Schalter und Diagramm, ein Cursor löst jede Änderung aus, Zahlen laufen auf Zählwerken hoch und jeder Klick und jedes Rauschen sitzt auf dem Takt der Musik. Dein Agent schreibt die Story, baut den Film in HTML, rendert ihn mit 60 fps und echter Bewegungsunschärfe und übergibt dir das MP4.
Aktualisiert am 2. Nov. 2026
Das bekommst du
- Ein fertiger Launch-Film als H.264-MP4, 1920×1080 mit 60 fps und Bewegungsunschärfe
- Ein einziger HTML-Film, in dem jedes Bild eine Funktion der Zeit ist, bereit zum Bearbeiten
- Ein Kontaktbogen mit einem Bild pro Schlag und ein Storyboard mit einem Bild pro Sekunde
- Synthetisierte Soundeffekte, im Takt mit deiner Musik gemischt
Gut geeignet für
- Launches von Apps, SaaS und Websites
- Feature-Releases und Produkt-Updates
- Marken-Stings und UI-Motion-Reels
Nicht geeignet für
- Videos mit Sprecher vor der Kamera oder Realdreh
- Erklärvideos mit Sprechertext
Über diesen Skill
Du sagst
/product-launch-motion Mach einen 30-sekündigen Launch-Film für meine App auf localhost:3000. Eine Form ohne Schnitt: Eine Karte wird zum Slider, Schalter, Status-Pill und Dashboard. Nimm diesen 120-BPM-Track und lass unsere Anmeldezahl auf dem Drop landen.
Gib deinem Agenten deine Website oder App. Er entwickelt die Story aus dem Problem deiner Kunden und inszeniert einen Launch-Film: Die Headline landet Wort für Wort, eine Anfrage wird getippt, und eine einzige Form trägt die ganze Demo – sie wird von der Karte zum Slider, Schalter, Status-Pill und Dashboard, während ein Cursor klickt und zieht. Die Kamera fährt heran, damit jeder Zustand das Bild füllt, zieht zurück, um die Größe zu zeigen, und am Ende laufen deine Zahlen hoch und dein Logo landet genau auf dem Drop.
So funktioniert es
- Erst die Regie: Dein Agent liest dein Produkt und schreibt einen kurzen Kreativplan: Story und Höhepunkt, Markenauftritt, Musik und eine Szenenliste Schlag für Schlag. Kreative Entscheidungen trifft er selbst und listet sie einzeln auf, damit du jede mit einer Antwort kippen kannst.
- Erst die Musik: Er misst das Beat-Raster des Songs mit numpy und legt jede Szene darauf, sodass auf jedem Schlag etwas passiert und der große Moment auf dem Drop landet.
- Ein einziger HTML-Film: Jedes Bild wird aus der Zeit berechnet – mit geschlossenen Federfunktionen, Schaltern und Tabs, die sich dehnen, weil jede Kante eine eigene Feder hat, Inhaltswechseln mit Unschärfe, einem Cursor, der sich neigt, drückt und Wellen zieht, und Zählwerken für deine Zahlen.
- Sound: Die UI-Sounds werden von Grund auf synthetisiert, und jeder wird mit seinem eigenen Spitzenpegel auf den Schlag gesetzt.
- Prüfen und rendern: ein Standbild pro Schlag als Kontaktbogen, Korrekturen, dann rendert Playwright vier Subframes pro Bild und FFmpeg verschmilzt sie zu echter Bewegungsunschärfe mit 60 fps.
Tipps
- Bring einen lizenzfreien Track um 120 BPM mit Aufbau und Drop mit oder lass den Agenten einen suchen.
- Nenne die 8 bis 12 Zustände, die die Form annehmen soll, oder sag „entscheide du“.
- Gib ihm deine echten Zahlen; die großen bleiben wahr, und er sagt dir, welche Details erfunden sind.
- Nutze Claude Opus 5.5 für das beste Ergebnis; die Details machen den hochwertigen Look.
Open Source
Product Launch Motion stammt von Muhammad Abubakr (AbubakrChan/product-launch-motion) und steht unter der MIT-Lizenz. Der Download ist der Skill so, wie er auf GitHub veröffentlicht ist, ohne die Beispielfilme, die der Autor für Cheerful gemacht hat.
Was du vorab brauchst
- Du lieferst
- Deine Website oder App, die Story oder die Zustände, die du zeigen willst, deine echten Zahlen und dein Logo und optional einen lizenzfreien Song um 120 BPM.
- Abhängigkeiten
- Node.js 20 oder neuer — erforderlich · Playwright Chromium — erforderlich · FFmpeg — erforderlich · Python 3.9 oder neuer — erforderlich
- Externe Kosten
- Keine. Der Film wird auf deinem Rechner gebaut und gerendert, die Soundeffekte werden synthetisiert; es werden keine API-Schlüssel oder kostenpflichtigen Dienste genutzt.
- Zuletzt getestet
- v1.0.0 —
Nutzerbewertungen
Noch keine Bewertungen. Installiere den Skill und bewerte ihn als Erste:r.
FAQ
Was heißt „eine Form, kein Schnitt“?
Die ganze Demo ist ein einziges Element, das Größe, Eckenradius und Farbe ändert, während sein Inhalt mit kurzer Unschärfe wechselt. Ein Button wird zum Ladekreis, Slider, Schalter und Diagramm, sodass der Blick nie die Orientierung verliert.
Brauche ich Musik?
Am besten passt ein lizenzfreier Track um 120 BPM mit Aufbau und Drop. Bring einen mit oder lass den Agenten einen finden und Aufbau und Drop um deinen großen Moment herum anlegen.
Kann ich nach dem Rendern noch etwas ändern?
Ja. Der Film ist eine einzige HTML-Datei, in der jedes Bild aus der Zeit berechnet wird. Du kannst Texte, Farben, Timing oder eine ganze Szene ändern und neu rendern.
Warum ist es kostenlos?
Product Launch Motion ist ein Open-Source-Skill von Muhammad Abubakr. Wir listen ihn unverändert, mit einem Beispiel, das wir mit unserer hauseigenen Smart-Home-App Solenne erstellt haben.
