Your team writes one composition. HyperFrames sweeps the inputs and ships every aspect ratio, every headline, every locale — A/B-ready, with the brand kit baked in.
Performance teams burn out producing the same ad in fifty shapes: vertical for TikTok, square for Meta, widescreen for YouTube, three captions, two CTAs, four product SKUs. Motion designers love crafting heroes, not exporting the matrix.
HyperFrames takes the matrix off their plate. A single composition + a CSV becomes the whole deliverable set, rendered in CI, with brand tokens applied automatically.
Teams that adopt HyperFrames typically increase variant throughput 10× while cutting brand-review cycles in half. The brand kit lives in one CSS file. Updates propagate through a single PR. Reviewers see frame-accurate MP4s in the pull request, not Figma frames pretending to be video.
The motion-design org keeps doing hero work in After Effects. HyperFrames takes the long tail.
Plain HTML, plain CSS keyframes. {{sku}}, {{headline}} and {{cta}} are merged from a CSV at render time. No build step.
<!-- product-highlight.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/brand.css" />
<style>
:root { --duration: 6s; }
body { background: var(--brand-bg); font-family: var(--brand-sans); }
.product { animation: rise var(--duration) ease-out forwards; }
.headline { animation: settle 1.2s 0.6s both; }
.cta { animation: pop 0.4s 4.8s both; }
@keyframes rise { from { transform: translateY(40px); opacity: 0 } }
@keyframes settle { from { letter-spacing: 0.4em; opacity: 0 } }
@keyframes pop { from { transform: scale(0.92); opacity: 0 } }
</style>
</head>
<body data-width="1080" data-height="1920" data-fps="30" data-duration="6">
<img class="product" src="/img/{{sku}}.png" alt="" />
<h1 class="headline">{{headline}}</h1>
<p class="cta">{{cta}}</p>
</body>
</html># Sweep 24 variants from a CSV in CI
hyperframes render product-highlight.html \
--data ./variants.csv \
--out ./out/{{sku}}-{{aspect}}.mp4 \
--aspect 9:16,1:1,16:9 \
--concurrency 8The playground is the fastest way to feel this in your hands.