
Mit diesem Skill gerendert
Fortschritts-Statistikkarte v1.0.0
Eine große Kennzahl zählt neben einer Beschriftung hoch, eine schmale Fortschrittsleiste füllt sich bis zum Wert, und eine Bildunterschrift blendet ein.
- Format
- Video · 16:9
- Länge
- 0:07
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 einen 7-sekündigen Statistik-Moment. Eine große Ziffer zählt bis zu deinem Wert hoch, mit einem Suffix wie %, daneben steht eine Beschriftung, eine schmale Akzentleiste füllt sich im Verhältnis von Wert zu Maximum, und darunter erscheint eine kurze Bildunterschrift. Wert, Suffix, Maximum, Beschriftung, Bildunterschrift und Farben werden in einer kleinen Konfiguration im HTML festgelegt; der Hintergrund ist transparent.
Aktualisiert am 3. Nov. 2026
Das bekommst du
- Eine 7-sekündige Statistik in 1920×1080 mit transparentem Hintergrund
- Eine hochzählende Ziffer, Beschriftung, Fortschrittsleiste und Bildunterschrift
- Ein kleiner Konfigurationsblock für die Werte
Gut geeignet für
- Umfrage- und Bewertungsergebnisse
- Meilensteine und Ziele
- Produktaussagen mit einer Zahl
Nicht geeignet für
- Mehrere Zahlen auf einmal
- Zahlen ohne Kontext
Über diesen Skill
/mk-progress-stat Mach eine Fortschritts-Statistik: 94% „Would wear it again“, Bildunterschrift „Maison Vey Ambre Nuit, blind test of 200 people“, über unserer Parfümaufnahme.
Eine starke Zahl kann eine ganze Anzeige tragen. Fortschritts-Statistikkarte zählt sie hoch, zeigt, wie nah sie am Maximum liegt, und gibt ihr eine Beschriftung und eine Bildunterschrift, schlicht genug, um über einer Produktaufnahme zu liegen.
So funktioniert es
- Anfrage: Nenne deinem Agenten die Zahl, ihr Suffix und Maximum, eine kurze Beschriftung und eine Bildunterschrift.
- 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
- Wähle eine Zahl mit klarer Bedeutung, etwa 94% würden wieder kaufen.
- Halte die Beschriftung bei drei oder vier Wörtern.
- 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.
- Nutze echte Zahlen, die du belegen kannst.
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
- Eine Zahl, ihr Maximum, eine kurze Beschriftung und eine Bildunterschrift.
- 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 die Zahl auch etwas anderes als ein Prozentwert sein?
Ja. Setz das Suffix auf K, x oder lass es weg und pass das Maximum entsprechend an.
Kann sie auf einem schlichten Hintergrund stehen?
Ja. Sie hat helle und dunkle Textstile für Flächen oder Videoaufnahmen.
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 Maison Vey erstellt haben.






