Alle Premium-Video-Skills in einem Plan. Jederzeit kündbar.Pläne ansehen
Halden Solace · 16:9

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.

Noch keine Bewertungen 0 Downloads
Format
Video · 16:9
Länge
0:15

Kostenlos Kostenlos mit Konto

Zum Herunterladen anmelden

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.

Am häufigsten gewählt von

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

Du sagst

/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

  1. Anfrage: Nenne deinem Agenten sechs Monate, die Werte für Balken und Linie, die Einheiten und eine Headline.
  2. 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.
  3. Rendern: Er rendert mit npx hyperframes render einen Entwurf, prüft ein paar Frames und rendert dann das finale MP4.
  4. 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.

Leitfäden

How to make an animated bar and line chart for a videoTwo measures moving together tell a story. How to build an editorial bar-and-line chart that animates itself, free, with the Bar and Line Chart block.

Ähnliche Skills

Alle ansehen