✦ Studio-Tipp
Aurelle · 9:16
Mit diesem Skill gerendert
Now-Playing-Karte v1.0.0
Eine Now-Playing-Karte im Spotify-Stil mit deinem Artwork, Titelnamen und einer laufenden Fortschrittsleiste, bereit zum Überlagern eines Hochformat-Videos.
Noch keine Bewertungen 0 Downloads
- Format
- Kurzvideo · 9:16
- Länge
- 0:05
Kostenlos Kostenlos mit Konto
Füge das in deinen Agent ein. Er verbindet bei Bedarf die CLI und installiert dann den Skill.
Ein kostenloser HyperFrames-Block für ein 5-sekündiges Overlay im Format 9:16. Eine Musikkarte in Milchglas-Optik steigt auf, mit großem quadratischem Artwork, Titel, Künstlerzeile und einer Fortschrittsleiste, die vorwärts läuft, dann blendet sie aus. Titel, Künstler und Artwork werden im HTML bearbeitet; der Hintergrund ist transparent zum Überlagern.
Aktualisiert am 3. Nov. 2026
Das bekommst du
- Ein 5-sekündiges Karten-Overlay in 1080×1920 mit transparentem Hintergrund
- Artwork, Titel, Künstler und eine animierte Fortschrittsleiste
- Eine Anleitung, wie du es über dein Video legst
Gut geeignet für
- Kampagnen-Soundtracks und Playlists
- Podcast- und Musik-Promos
- Stories und Reels
Nicht geeignet für
- Videos im Querformat
- Lange Musikvideos
Über diesen Skill
Du sagst
/spotify-card Mach eine Now-Playing-Karte für Aurelles Kampagnen-Track „Wear the Light“, mit dem Armband-Stack als Artwork, über unserer Armband-Aufnahme.
Musikkarten sagen sofort: „Das ist der Soundtrack.“ Now-Playing-Karte setzt deinen Kampagnen-Track, deine Playlist oder deine Podcast-Folge auf eine klare, animierte Karte mit deinem Artwork, damit ein Hochformat-Video den Sound nennen oder bewerben kann.
So funktioniert es
- Anfrage: Nenne deinem Agenten den Titel, die Künstlerzeile, das Artwork und die Aufnahme, über der die Karte liegen soll.
- Befüllen: Er trägt deinen Text und deine Farben in die Variablen des Blocks ein und hält die Texte nah an der Länge, für die das Layout gemacht ist.
- Rendern: Er rendert mit
npx hyperframes rendereinen Entwurf, prüft ein paar Frames und rendert dann das finale MP4. - Wiederverwenden: Die Variablen liegen in einer kleinen JSON-Datei; die nächste Version ist also nur ein weiterer Render.
Tipps
- Nimm quadratisches Artwork mit mindestens 800 px Breite.
- Halte den Titel bei wenigen Wörtern; er wird groß gesetzt.
- Die Karte hat einen transparenten Hintergrund. Render sie also mit Alphakanal und leg sie über dein eigenes Video oder Foto; die SKILL.md zeigt die beiden Befehle.
- Unser Beispiel ersetzt das Plattform-Logo durch ein schlichtes „Now playing“-Label.
Open Source
Dies ist ein Block aus der HyperFrames-Registry. Er stammt von HeyGen und den HyperFrames-Mitwirkenden (heygen-com/hyperframes) und steht unter der Apache License 2.0. Der Download ist der Block samt Assets und einer von Reelity geschriebenen SKILL.md, damit dein Agent weiß, wie er ihn befüllt und rendert; HyperFrames selbst läuft über npm.
Was du vorab brauchst
- Du lieferst
- Einen Track- oder Folgentitel, eine Künstlerzeile, quadratisches Artwork und die Aufnahme, über die die Karte gelegt wird.
- Abhängigkeiten
- Node.js 22 oder neuer — erforderlich · FFmpeg — erforderlich
- Externe Kosten
- Keine. HyperFrames ist kostenlos und Open Source und rendert auf deinem eigenen Rechner.
- Zuletzt getestet
- v1.0.0 —
Nutzerbewertungen
Noch keine Bewertungen. Installiere den Skill und bewerte ihn als Erste:r.
FAQ
Kann ich die Farben ändern?
Ja. Die Farben von Karte und Text sind einfaches CSS im HTML.
Zeigt es das Spotify-Logo?
Das Paket behält das kleine Original-Logo; unser Beispiel tauscht es gegen ein „Now playing“-Label aus, und das kann dein Agent auch.
Warum ist es kostenlos?
Es ist ein Open-Source-Block für HyperFrames von HeyGen und den HyperFrames-Mitwirkenden. Wir listen ihn unverändert, mit einer SKILL.md, damit dein Agent ihn nutzen kann, und einem Beispiel, das wir mit unserer Hausmarke Aurelle erstellt haben.
