{"id":"3e833be5-bc73-43ab-aa50-68267da18242","name":"Gradient Stat Square","slug":"gradient-stat-square","category":"milestones","description":"A square announcement card in the style of big-tech launch posts: one huge stat in a luminous gradient on a deep-toned backdrop with faint texture bands, and a short supporting sentence below. Accent and background hues are parametric.","sample_params":{"bg_hue":"258","hue":"315","text":"in annualized network cost savings from DCAP for businesses on Stripe","value":"$18.4M"},"spec":{"name":"gradient-stat-square","width":1080,"height":1080,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n*{margin:0;padding:0;box-sizing:border-box}\nhtml,body{width:100%;height:100%}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden;\n  background:linear-gradient(180deg,hsl(var(--bh) 55% 5%) 0%,hsl(var(--bh) 52% 12%) 52%,hsl(var(--bh) 55% 26%) 100%);\n  color:#fff}\n/* faint horizontal striations fading out toward the middle, as on the reference */\n.grain{position:absolute;inset:0;\n  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1.5px,transparent 1.5px 26px);\n  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 14%,transparent 34%);\n  mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 14%,transparent 34%)}\n.wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 130px}\n.value{width:max-content;font-size:230px;font-weight:600;letter-spacing:-0.035em;line-height:1;white-space:nowrap;\n  background:linear-gradient(160deg,hsl(var(--h) 95% 86%) 0%,hsl(var(--h) 92% 70%) 45%,hsl(var(--h) 96% 58%) 100%);\n  -webkit-background-clip:text;background-clip:text;color:transparent;\n  padding:0.08em 0.05em 0.1em 0;margin-left:-0.04em}\n.text{margin-top:34px;font-size:56px;font-weight:500;line-height:1.28;max-width:840px;color:#f4f1ff}\n.brand{position:absolute;left:130px;bottom:64px;font-size:26px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,255,.55)}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}; --bh: {{.bg_hue}}'\u003e\n\u003cdiv class='grain'\u003e\u003c/div\u003e\n\u003cdiv class='wrap'\u003e\n  \u003cdiv class='value' id='v'\u003e{{.value}}\u003c/div\u003e\n  \u003cdiv class='text'\u003e{{.text}}\u003c/div\u003e\n\u003c/div\u003e\n{{if .brand}}\u003cdiv class='brand'\u003e{{.brand}}\u003c/div\u003e{{end}}\n\u003cscript\u003e\n// Shrink the stat until it fits the padded width, so long values never clip.\nvar v=document.getElementById('v'),max=1080-2*130,size=230;\nwhile(v.getBoundingClientRect().width\u003emax\u0026\u0026size\u003e60){size-=6;v.style.fontSize=size+'px'}\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e","params":{"bg_hue":{"type":"number","default":"258","maxLen":8,"description":"Background hue 0-360. 258 = indigo, 220 = navy, 340 = plum."},"brand":{"type":"string","maxLen":40,"description":"Optional small uppercase brand line at the bottom left."},"hue":{"type":"number","default":"315","maxLen":8,"description":"Accent hue 0-360 for the stat gradient. 315 = magenta, 200 = azure, 150 = mint."},"text":{"type":"string","required":true,"maxLen":140,"description":"Supporting sentence under the stat, one or two lines."},"value":{"type":"string","required":true,"maxLen":24,"description":"The big stat, e.g. $18.4M or 250k+. Auto-shrinks to fit."}}}}