
Mit diesem Skill gerendert
Balken- und Liniendiagramm v1.0.0
Ein Diagramm im redaktionellen Stil baut sich Monat für Monat auf: Balken wachsen, eine Linie zieht sich darüber, und jeder Wert zählt hoch.
- Format
- Video · 16:9
- Länge
- 0:15
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 15 Sekunden Data Storytelling im Zeitungsstil. Gitterlinien und Monatsbeschriftungen erscheinen, Balken wachsen nacheinander mit ihren Werten, dann zieht sich eine Linie mit eigenen Prozentwerten darüber, unter einer Serifen-Headline, einer Unterzeile, einer Legende und einer Quellenangabe. Monate, beide Datenreihen, Skalen, Beschriftungen und Titel werden im HTML bearbeitet.
Aktualisiert am 3. Nov. 2026
Das bekommst du
- Ein 15-sekündiges Diagramm in 1920×1080 mit transparentem Hintergrund
- Balken, Linie und Wertbeschriftungen, die sich der Reihe nach aufbauen
- Eine Serifen-Headline, Legende und Quellenangabe
Gut geeignet für
- Ergebnis- und Wachstumsgeschichten
- Updates für Investoren und Vorstand
- Erklärvideos und Berichte
Nicht geeignet für
- Mehr als sechs Zeiträume
- Dichte Dashboards
Über diesen Skill
/data-chart Mach ein Balken- und Liniendiagramm: „Halden Solace: pairs sold vs. repeat buyers“, Juni bis November, verkaufte Paare von 9 bis 23 Tausend und Wiederkäufer von 24% bis 44%.
Zwei Zahlen, die sich gemeinsam bewegen, ergeben eine Geschichte: Umsatz und Wiederkäufer, Traffic und Anmeldungen, Erlös und Marge. Balken- und Liniendiagramm zeigt beide in einem ruhigen, redaktionellen Diagramm, das sich selbst aufbaut, sodass Zuschauer den Trend erfassen, bevor das Voice-over ihn erklärt.
So funktioniert es
- Anfrage: Nenne deinem Agenten sechs Monate, die Werte für Balken und Linie, die Einheiten und eine Headline.
- 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
- Setz die Skala der Linie höher als die der Balken, damit sich ihre Beschriftungen nie überlappen.
- Nenne die Einheiten in Unterzeile und Legende.
- Der Hintergrund ist transparent. Render ihn also mit Alphakanal und leg ihn über dein eigenes Video, ein Foto oder eine einfarbige Fläche; die SKILL.md zeigt die beiden Befehle.
- Es gibt keine Variablen: Dein Agent bearbeitet Text und Zahlen direkt im HTML und folgt dabei der SKILL.md.
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
- Daten aus sechs Zeiträumen für zwei Kennzahlen, die Einheiten und eine Headline.
- 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 statt Monaten andere Zeiträume verwenden?
Ja. Die Beschriftungen sind eine Liste im Skript; Quartale, Jahre oder Wochen funktionieren auch.
Wie vermeide ich überlappende Beschriftungen?
Setz das Maximum der Linie niedriger als das der Balken, damit die Linie über ihnen verläuft; unser Beispiel macht das so.
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 Halden Solace erstellt haben.






