<!doctype html>
<!--
social-proof-card: HyperFrames motion primitive (scene)
The app-store close, measured from reference ad footage: wordmark, five
stars, a proof line, three feature icons, a CTA capsule - built in a quiet
stagger and held. Composed, not competing: for an animated star sweep use
star-rating-fill; for a quote-based card use testimonial-proof-card; for a
bare CTA lockup use cta-lockup. This is the whole closing card as one
mountable scene.
#root only, container-type: size, one paused timeline registered under the
literal "social-proof-card" key. Deterministic.
-->
<html
lang="en"
data-composition-id="social-proof-card"
data-composition-duration="4"
data-composition-variables='[{"id": "brand", "type": "string", "role": "content", "label": "Brand", "description": "Wordmark at the top of the card.", "default": "HyperFrames"}, {"id": "proof", "type": "string", "role": "content", "label": "Proof line", "description": "Social-proof line under the stars.", "default": "12,000+ creators"}, {"id": "cta", "type": "string", "role": "content", "label": "CTA", "description": "Label on the closing capsule.", "default": "Start rendering free"}, {"id": "f1", "type": "string", "role": "content", "label": "Feature 1", "description": "First feature, | breaks the line.", "default": "Write|plain HTML"}, {"id": "f2", "type": "string", "role": "content", "label": "Feature 2", "description": "Second feature, | breaks the line.", "default": "Render|pixel-perfect"}, {"id": "f3", "type": "string", "role": "content", "label": "Feature 3", "description": "Third feature, | breaks the line.", "default": "Own|every line"}]'
>
<head>
<meta charset="UTF-8" />
<title>Social Proof Card</title>
</head>
<body>
<template>
<div id="root" data-composition-id="social-proof-card" data-duration="4" data-fps="30">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
#root {
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
isolation: isolate;
background: var(--surface, #f9f2e7);
color: var(--fg, #1c3a34);
font-family: var(--font-body, Georgia, "Times New Roman", serif);
pointer-events: none;
}
.spc-stage {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4.2cqh;
text-align: center;
}
.spc-brand {
font-family: var(--font-display, var(--font-body, Georgia, serif));
font-weight: 700;
font-size: min(9cqmin, 7cqh);
letter-spacing: -0.01em;
color: var(--fg, #17332e);
will-change: opacity, transform;
}
.spc-stars {
display: flex;
gap: 1.6cqmin;
}
.spc-stars svg {
width: 5.4cqmin;
height: 5.2cqmin;
will-change: opacity, transform;
}
.spc-proof {
font-weight: 600;
font-size: min(4.2cqmin, 3.4cqh);
color: var(--accent, #185450);
will-change: opacity, transform;
}
.spc-feats {
display: flex;
gap: 8cqmin;
margin-top: 1cqh;
}
.spc-feat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqh;
will-change: opacity, transform;
}
.spc-icon {
width: 12cqmin;
height: 12cqmin;
border-radius: 50%;
background: var(--accent, #185450);
display: grid;
place-items: center;
}
.spc-icon svg {
width: 46%;
height: 46%;
}
.spc-label {
font-size: min(3.4cqmin, 2.8cqh);
line-height: 1.35;
color: var(--fg, #205048);
}
.spc-cta {
margin-top: 2.4cqh;
padding: 2.4cqh 9cqmin;
border-radius: 100cqmin;
background: var(--brand, #3ce6ac);
color: #0d3b2b;
font-weight: 700;
font-size: min(4.6cqmin, 3.8cqh);
will-change: opacity, transform;
}
</style>
<div class="spc-stage">
<div class="spc-brand" id="spc-brand">HyperFrames</div>
<div class="spc-stars" id="spc-stars"></div>
<div class="spc-proof" id="spc-proof">12,000+ creators</div>
<div class="spc-feats" id="spc-feats"></div>
<div class="spc-cta" id="spc-cta">Start rendering free</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var compositionId = "social-proof-card";
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
function text(v, fb, mx) {
if (typeof v !== "string") return fb;
var t = v.trim();
if (!t) return fb;
return t.length > mx ? t.slice(0, mx) : t;
}
document.getElementById("spc-brand").textContent = text(vars.brand, "HyperFrames", 26);
document.getElementById("spc-proof").textContent = text(
vars.proof,
"12,000+ creators",
34,
);
document.getElementById("spc-cta").textContent = text(
vars.cta,
"Start rendering free",
30,
);
var stars = document.getElementById("spc-stars");
for (var s = 0; s < 5; s += 1) {
stars.insertAdjacentHTML(
"beforeend",
'<svg viewBox="0 0 24 23"><path d="M12 0 L15 8.2 L23.4 8.2 L16.6 13.4 L19.2 21.8 L12 16.8 L4.8 21.8 L7.4 13.4 L0.6 8.2 L9 8.2 Z" fill="#f5b942"/></svg>',
);
}
var ICONS = [
'<svg viewBox="0 0 24 24"><path d="M3 17.2 V21 h3.8 L18 9.8 l-3.8-3.8 L3 17.2 Z M20.7 7.1 c0.4-0.4 0.4-1 0-1.4 l-2.4-2.4 c-0.4-0.4-1-0.4-1.4 0 l-1.8 1.8 3.8 3.8 1.8-1.8 Z" fill="#f9f2e7"/></svg>',
'<svg viewBox="0 0 24 22"><path d="M12 21 C12 21 1 14.4 1 7.6 C1 3.9 3.9 1 7.5 1 C9.4 1 11.1 1.9 12 3.3 C12.9 1.9 14.6 1 16.5 1 C20.1 1 23 3.9 23 7.6 C23 14.4 12 21 12 21 Z" fill="#f9f2e7"/></svg>',
'<svg viewBox="0 0 24 24"><path d="M12 2 C6.5 2 2 6.5 2 12 s4.5 10 10 10 c0.9 0 1.6-0.7 1.6-1.6 0-0.4-0.2-0.8-0.4-1.1 -0.3-0.3-0.4-0.7-0.4-1.1 0-0.9 0.7-1.6 1.6-1.6 h1.9 c3.1 0 5.7-2.6 5.7-5.7 C22 7 17.5 2 12 2 Z M6.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S5.7 9 6.5 9 8 9.7 8 10.5 7.3 12 6.5 12 Z M9.5 8 C8.7 8 8 7.3 8 6.5 S8.7 5 9.5 5 s1.5 0.7 1.5 1.5 S10.3 8 9.5 8 Z M14.5 8 c-0.8 0-1.5-0.7-1.5-1.5 S13.7 5 14.5 5 16 5.7 16 6.5 15.3 8 14.5 8 Z M17.5 12 c-0.8 0-1.5-0.7-1.5-1.5 S16.7 9 17.5 9 19 9.7 19 10.5 18.3 12 17.5 12 Z" fill="#f9f2e7"/></svg>',
];
var feats = document.getElementById("spc-feats");
[
text(vars.f1, "Write|plain HTML", 30),
text(vars.f2, "Render|pixel-perfect", 30),
text(vars.f3, "Own|every line", 30),
].forEach(function (raw, i) {
var feat = document.createElement("div");
feat.className = "spc-feat";
var icon = document.createElement("div");
icon.className = "spc-icon";
icon.innerHTML = ICONS[i];
feat.appendChild(icon);
var label = document.createElement("div");
label.className = "spc-label";
raw.split("|").forEach(function (line, k) {
if (k > 0) label.appendChild(document.createElement("br"));
label.appendChild(document.createTextNode(line));
});
feat.appendChild(label);
feats.appendChild(feat);
});
var tl = gsap.timeline({ paused: true });
tl.fromTo(
"#spc-brand",
{ autoAlpha: 0, y: "1.6cqh" },
{ autoAlpha: 1, y: 0, duration: 0.4, ease: "power2.out" },
0.25,
);
gsap.utils.toArray("#spc-stars svg").forEach(function (star, i) {
tl.fromTo(
star,
{ autoAlpha: 0, scale: 0.4 },
{ autoAlpha: 1, scale: 1, duration: 0.3, ease: "back.out(2.4)" },
0.55 + i * 0.08,
);
});
tl.fromTo(
"#spc-proof",
{ autoAlpha: 0, y: "1.2cqh" },
{ autoAlpha: 1, y: 0, duration: 0.35, ease: "power2.out" },
1.05,
);
gsap.utils.toArray(".spc-feat").forEach(function (feat, i) {
tl.fromTo(
feat,
{ autoAlpha: 0, y: "1.6cqh" },
{ autoAlpha: 1, y: 0, duration: 0.4, ease: "power2.out" },
1.3 + i * 0.15,
);
});
tl.fromTo(
"#spc-cta",
{ autoAlpha: 0, scale: 0.85 },
{ autoAlpha: 1, scale: 1, duration: 0.45, ease: "back.out(1.8)" },
1.95,
);
tl.set({}, {}, 4);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
