Go to example tasks
Release announcement (vertical 1080x1920)
Created by
Salman AlFariz
Render an 8-second vertical (1080×1920) MP4 announcing your release: big version number, three features revealed one by one, and an end card with your call to action. Made for X, LinkedIn, Shorts and Reels. Edit the CONFIG block at the top of the HTML (app, version, bullets, CTA, URL, colour) and run. Rendered by MP4 Renderer for HyperFrames, about $0.14 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=1920">
<title>Release announcement</title>
<script>
/* =====================================================================
EDIT ME: change only the values in this block, then render.
===================================================================== */
const CONFIG = {
app: "Your App", // product name
version: "v2.0", // version shown big
headline: "is out", // words after the version
bullets: [ // exactly three features, keep each short
"Twice as fast on big projects",
"Dark mode everywhere",
"One-click export to MP4"
],
cta: "Update today", // line on the end card
url: "yourapp.com", // small line under the CTA ("" to hide)
accent: "#5eead4" // highlight colour
};
/* ===================================================================== */
</script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
:root{--bg:#0a0c10;--sf:#12161d;--tx:#eef1f6;--mu:#97a0b2;--ln:#262d3a;--ac:#5eead4}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1080px;height:1920px;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:1920px;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:44px 44px}
#glow{position:absolute;left:-300px;top:-300px;width:1400px;height:1400px;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%)}
.sc{position:absolute;inset:0}
#top{position:absolute;left:96px;top:150px;display:flex;align-items:center;gap:20px}
#top .nm{font-size:40px;font-weight:700;color:var(--mu)}
#tag{position:absolute;left:96px;top:330px;font-size:30px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
#ver{position:absolute;left:90px;top:390px;font-size:300px;font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
#head{position:absolute;left:96px;top:700px;font-size:130px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ac)}
#list{position:absolute;left:96px;top:960px;width:888px}
.bl{display:flex;align-items:center;gap:32px;height:180px;padding:0 40px;margin-bottom:36px;background:rgba(18,22,29,.88);border:1px solid var(--ln);border-left:6px solid var(--ac);border-radius:0 22px 22px 0}
.bl .ck{flex:0 0 64px;height:64px;border-radius:50%;background:rgba(94,234,212,.14);display:flex;align-items:center;justify-content:center}
.bl .tx{font-size:48px;font-weight:600;line-height:1.2}
#bar{position:absolute;left:0;bottom:0;height:10px;width:1080px;background:var(--ac);transform-origin:left center;transform:scaleX(0)}
#end{display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden}
#end .nm{margin-top:56px;font-size:96px;font-weight:800;letter-spacing:-.02em}
#end .v{margin-top:20px;font-size:48px;font-weight:600;color:var(--ac)}
#cta{margin-top:90px;padding:30px 64px;border-radius:999px;background:var(--ac);color:#0a0c10;font-size:48px;font-weight:800}
#url{margin-top:36px;font-size:38px;color:var(--mu)}
</style>
</head>
<body>
<div id="root" data-composition-id="release" data-width="1080" data-height="1920" data-duration="8" data-fps="30">
<div id="grid"></div><div id="glow"></div><div id="vig"></div>
<div class="sc" id="main">
<div id="top"><svg class="logo" width="72" height="72" 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 id="tag">New release</div>
<div id="ver">v2.0</div>
<div id="head">is out</div>
<div id="list"></div>
</div>
<div class="sc" id="end">
<svg class="logo" id="bigLogo" width="220" height="220" 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>
<div class="nm">Your App</div><div class="v">v2.0</div>
<div id="cta">Update today</div><div id="url">yourapp.com</div>
</div>
<div id="bar"></div>
</div>
<script>
(function(){
var C=CONFIG, $=function(s){return document.querySelector(s)}, $$=function(s){return document.querySelectorAll(s)};
document.documentElement.style.setProperty("--ac",C.accent);
$$(".logo rect").forEach(function(r){r.setAttribute("fill",C.accent)});
$$(".nm").forEach(function(n){n.textContent=C.app});
$("#ver").textContent=C.version; $("#head").textContent=C.headline; $("#end .v").textContent=C.version;
$("#cta").textContent=C.cta; $("#url").textContent=C.url;
var ck='<svg width="34" height="34" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="'+C.accent+'" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>';
C.bullets.slice(0,3).forEach(function(b,i){var d=document.createElement("div");d.className="bl";d.id="b"+i;d.innerHTML='<div class="ck">'+ck+'</div><div class="tx"></div>';d.querySelector(".tx").textContent=b;$("#list").appendChild(d)});
/* shrink the version if it is too wide */
var v=$("#ver"),fs=300; while(v.scrollWidth>900&&fs>120){fs-=10;v.style.fontSize=fs+"px"}
var E="power3.out";
var tl=gsap.timeline({paused:true});
tl.fromTo("#top",{autoAlpha:0,y:-20},{autoAlpha:1,y:0,duration:.6,ease:E},.1);
tl.fromTo("#tag",{autoAlpha:0,x:-20},{autoAlpha:1,x:0,duration:.5,ease:E},.3);
tl.fromTo("#ver",{autoAlpha:0,y:80,scale:.9},{autoAlpha:1,y:0,scale:1,duration:.9,ease:E,transformOrigin:"0% 100%"},.4);
tl.fromTo("#head",{autoAlpha:0,y:40},{autoAlpha:1,y:0,duration:.7,ease:E},.9);
[0,1,2].forEach(function(i){
tl.fromTo("#b"+i,{autoAlpha:0,x:-60},{autoAlpha:1,x:0,duration:.6,ease:E},1.8+i*.9);
tl.fromTo("#b"+i+" .ck",{scale:0},{scale:1,duration:.5,ease:"back.out(2.2)",transformOrigin:"50% 50%"},2.0+i*.9);
});
tl.to("#bar",{scaleX:1,duration:8,ease:"none"},0);
tl.to("#main",{autoAlpha:0,y:-60,duration:.5,ease:"power2.in"},5.5);
tl.set("#end",{autoAlpha:1},6.0);
tl.fromTo("#bigLogo",{autoAlpha:0,scale:.4,rotation:-20},{autoAlpha:1,scale:1,rotation:0,duration:.8,ease:"back.out(1.7)",transformOrigin:"50% 50%"},6.0);
tl.fromTo(["#end .nm","#end .v"],{autoAlpha:0,y:30},{autoAlpha:1,y:0,duration:.5,ease:E,stagger:.12},6.3);
tl.fromTo("#cta",{autoAlpha:0,scale:.9},{autoAlpha:1,scale:1,duration:.5,ease:"back.out(1.6)"},6.7);
tl.fromTo("#url",{autoAlpha:0},{autoAlpha:1,duration:.4},6.9);
tl.to({},{duration:8},0);
window.__timelines=window.__timelines||{};
window.__timelines["release"]=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 "Release announcement (vertical 1080x1920)". Sign up or log in and you'll land in Apify Console with a copy of this exact task.
Start the "Release announcement (vertical 1080x1920)" 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 "Release announcement (vertical 1080x1920)" 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 "Release announcement (vertical 1080x1920)" task via API.
Integrate "Release announcement (vertical 1080x1920)" into your workflow
Connect "Release announcement (vertical 1080x1920)" with 100+ integrations, or run it via API or MCP.
Webhook
n8n
Make
Zapier
Airbyte
Keboola
IFTTT
Hubspot
GDrive
Gmail
Apify MCP
GitHub
Slack
LangChain
LlamaIndex
Flowise
Pinecone
OpenAI
Mastra
Clay