Go to example tasks
Animated stat card (1080x1080)
Created by
Salman AlFariz
Render a 6-second, 1080×1080 MP4 where your number counts up inside a filling ring, then your caption and logo settle in. Made for milestone posts on X, LinkedIn and Instagram. Edit the CONFIG block at the top of the HTML (value, label, caption, brand, colour) and run. Rendered by MP4 Renderer for HyperFrames, about $0.13 per run.
MP4 Renderer for HyperFrames (Unofficial)optimdex/hyperframes-render
MP4
Duration (s)
Width
Height
+7 fieldsTextNumberBooleanListObject
Input
Inline HTML:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1080, height=1080">
<title>Animated stat card</title>
<script>
/* =====================================================================
EDIT ME: change only the values in this block, then render.
===================================================================== */
const CONFIG = {
value: 10000, // the number the counter ticks up to
prefix: "", // shown before the number, e.g. "$"
suffix: "", // shown after the number, e.g. "+" or "%"
label: "users", // word under the number
caption: "Thanks for building with us", // line under the ring
brand: "Your App", // wordmark next to the logo at the end
accent: "#5eead4" // ring, logo and highlight colour
};
/* ===================================================================== */
</script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
:root{--bg:#0a0c10;--tx:#eef1f6;--mu:#97a0b2;--ln:#1f2530;--ac:#5eead4}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1080px;height:1080px;overflow:hidden;background:var(--bg)}
body{font-family:"Inter","Noto Sans","Liberation Sans",Arial,sans-serif;color:var(--tx);-webkit-font-smoothing:antialiased}
#root{position:relative;width:1080px;height:1080px;overflow:hidden;background:var(--bg)}
#grid{position:absolute;inset:0;background-image:radial-gradient(rgba(238,241,246,.06) 1.5px,transparent 1.5px);background-size:40px 40px}
#glow{position:absolute;left:40px;top:-60px;width:1000px;height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(94,234,212,.14) 0%,rgba(94,234,212,0) 60%)}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#ring{position:absolute;left:220px;top:130px;width:640px;height:640px}
#center{position:absolute;left:220px;top:130px;width:640px;height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#num{font-size:148px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
#label{margin-top:22px;font-size:44px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ac)}
#caption{position:absolute;left:0;width:1080px;top:820px;text-align:center;font-size:46px;font-weight:600;color:var(--tx)}
#brand{position:absolute;left:0;width:1080px;top:930px;display:flex;align-items:center;justify-content:center;gap:18px}
#brand .nm{font-size:34px;font-weight:700;color:var(--mu);letter-spacing:.01em}
</style>
</head>
<body>
<div id="root" data-composition-id="stat-card" data-width="1080" data-height="1080" data-duration="6" data-fps="30">
<div id="grid"></div><div id="glow"></div><div id="vig"></div>
<svg id="ring" viewBox="0 0 640 640">
<circle cx="320" cy="320" r="296" fill="none" stroke="#1f2530" stroke-width="22"/>
<circle id="arc" cx="320" cy="320" r="296" fill="none" stroke="#5eead4" stroke-width="22" stroke-linecap="round"
transform="rotate(-90 320 320)" stroke-dasharray="1859.8" stroke-dashoffset="1859.8"/>
</svg>
<div id="center"><div id="num">0</div><div id="label">users</div></div>
<div id="caption">Thanks for building with us</div>
<div id="brand">
<svg id="logo" width="56" height="56" viewBox="0 0 56 56"><rect width="56" height="56" rx="14" fill="#5eead4"/><path d="M16 34l12-12 12 12" fill="none" stroke="#0a0c10" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24l12-12 12 12" fill="none" stroke="#0a0c10" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity=".45"/></svg>
<span class="nm">Your App</span>
</div>
</div>
<script>
(function(){
var C=CONFIG, $=function(s){return document.querySelector(s)};
document.documentElement.style.setProperty("--ac",C.accent);
$("#arc").setAttribute("stroke",C.accent);
$("#logo rect").setAttribute("fill",C.accent);
$("#label").textContent=C.label; $("#caption").textContent=C.caption; $("#brand .nm").textContent=C.brand;
var fmt=function(v){return C.prefix+Math.round(v).toLocaleString("en-US")+C.suffix};
/* shrink the number if a long value would overflow the ring */
var num=$("#num"); num.textContent=fmt(C.value);
var fs=148; while(num.scrollWidth>520&&fs>60){fs-=4;num.style.fontSize=fs+"px";}
num.textContent=fmt(0);
var L=1859.8, E="power3.out", o={v:0};
var tl=gsap.timeline({paused:true});
tl.fromTo("#ring",{autoAlpha:0,scale:.92},{autoAlpha:1,scale:1,duration:.7,ease:E,transformOrigin:"50% 50%"},0);
tl.fromTo("#num",{autoAlpha:0,y:24},{autoAlpha:1,y:0,duration:.6,ease:E},.2);
tl.fromTo("#label",{autoAlpha:0,y:16},{autoAlpha:1,y:0,duration:.6,ease:E},.6);
tl.to("#arc",{attr:{"stroke-dashoffset":0},duration:3.2,ease:"power2.inOut"},.4);
tl.to(o,{v:C.value,duration:3.2,ease:"power2.inOut",onUpdate:function(){num.textContent=fmt(o.v)}},.4);
tl.to("#num",{scale:1.06,duration:.2,yoyo:true,repeat:1,ease:"sine.inOut",transformOrigin:"50% 50%"},3.6);
tl.to("#arc",{attr:{"stroke-width":28},duration:.2,yoyo:true,repeat:1,ease:"sine.inOut"},3.6);
tl.fromTo("#caption",{autoAlpha:0,y:30},{autoAlpha:1,y:0,duration:.7,ease:E},3.8);
tl.fromTo("#logo",{autoAlpha:0,scale:.4,rotation:-20},{autoAlpha:1,scale:1,rotation:0,duration:.8,ease:"back.out(1.8)",transformOrigin:"50% 50%"},4.4);
tl.fromTo("#brand .nm",{autoAlpha:0,x:-14},{autoAlpha:1,x:0,duration:.6,ease:E},4.6);
tl.to({},{duration:6},0);
window.__timelines=window.__timelines||{};
window.__timelines["stat-card"]=tl;
tl.seek(0);
})();
</script>
</body>
</html>
Frames per second:30
Output fields
MP4
Duration (s)
Width
Height
FPS
Quality
frames-30 events
Expected charge (USD)
Size (bytes)
Render time (ms)
Warnings
Sign up on Apify or log in
The MP4 Renderer for HyperFrames (Unofficial) Actor is ready to run with the inputs already set for "Animated stat card (1080x1080)". Sign up or log in and you'll land in Apify Console with a copy of this exact task.
Start the "Animated stat card (1080x1080)" task
The MP4 Renderer for HyperFrames (Unofficial) Actor will start running based on the input automatically. You can also change all the input fields, like inline html and frames per second, to match your specific use case.
Receive the "Animated stat card (1080x1080)" output
Monitor the progress in real time. You will be notified as soon as your dataset is complete and ready for review. Each result includes data such as MP4, duration (s), width, and more.
Integrate into your workflow
The final output is delivered in JSON, CSV, or Excel format, ready to be plugged into your workflow. You can also run the "Animated stat card (1080x1080)" task via API.
