Kostenlos
Ember & Bun · 16:9
Mit diesem Skill gerendert
Bar Chart Race v1.0.0
Balken wachsen, überholen sich gegenseitig, während die Monate vergehen, und die Achse skaliert mit, wenn die Zahlen steigen.
Noch keine Bewertungen 0 Downloads
- Format
- Video · 16:9
- Länge
- 0:12
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, der aus einer kleinen Tabelle ein Bar Chart Race macht. Füg deine Zeiträume und Datenreihen als einfachen Text ein; die Balken wachsen, sortieren sich neu und überholen sich Zeitraum für Zeitraum, die Werte zählen daneben hoch und die Achse skaliert mit. Titel, Untertitel, Daten, Balkenanzahl, Tempo, Zahlenformat und Akzent sind Variablen.
Aktualisiert am 3. Nov. 2026
Das bekommst du
- Ein Chart Race als MP4 in 1920×1080, standardmäßig 2 Sekunden pro Zeitraum
- Überholmanöver, hochzählende Werte und eine automatisch skalierende Achse
- Daten als einfacher Text, ganz ohne Tabellenkalkulation
Gut geeignet für
- Geschichten über Umsatz, Wachstum und Rankings
- Jahresrückblicke und Meilenstein-Posts
- Datenjournalismus und Erklärvideos für den Unterricht
Nicht geeignet für
- Dutzende Datenreihen oder sehr lange Zeiträume
- Exakte Zahlen, die man in Ruhe lesen muss
Über diesen Skill
Du sagst
/bar-chart-race Mach ein Bar Chart Race mit dem Titel „Ember & Bun: burgers sold by month“ von Juni bis November, Werte in Tausend: Double Stack 12, 18, 26, 35, 47, 61; Classic Cheese 22, 25, 28, 30, 32, 33; und vier weitere Gerichte von der Karte. Akzent Orange.
Ranglisten, die sich über die Zeit verändern, sind eine Geschichte, und ein Bar Chart Race erzählt sie in Sekunden. Gib Bar Chart Race ein paar Zeiträume und ein paar Datenreihen als einfachen Text; es animiert den Aufstieg, die Überholmanöver und den Spitzenreiter, mit klarer, redaktioneller Typografie und einer Akzentfarbe auf dem führenden Balken.
So funktioniert es
- Anfrage: Nenne deinem Agenten den Titel, die Zeiträume und die Werte jeder Datenreihe als einfachen Text, dazu die Einheiten.
- 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
- Vier bis acht Datenreihen und vier bis acht Zeiträume lesen sich am besten.
- Gib den Akzent dem Eintrag, den die Zuschauer verfolgen sollen.
- Nutze Präfix und Suffix für Einheiten wie $, k oder %.
- Verlängere die Dauer pro Zeitraum für ein ruhigeres, besser lesbares Rennen.
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
- Deine Zeiträume und die Werte jeder Datenreihe, einen Titel und die Einheiten.
- 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
In welchem Format kommen die Daten?
Eine Zeile pro Datenreihe: der Name, ein Doppelpunkt und die Werte, durch Kommas getrennt, in derselben Reihenfolge wie die Zeiträume. Dein Agent kann eine Tabelle für dich in dieses Format bringen.
Wie lang ist das Video?
Standardmäßig zwei Sekunden pro Zeitraum, sechs Zeiträume ergeben also etwa 12 Sekunden. Die Dauer pro Zeitraum ist eine Variable.
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 Ember & Bun erstellt haben.
