https://better-gradient.com/assets/index-BL5_qmXf.js

1import{c as ce,r as ne,a3 as t,aa as me,ab as de,al as xe}from"./main-BTghui7m.js";import{S as ue}from"./shared-better-gradient-typo-C-_qUkdO.js";import{D as he}from"./dotted-background-CsQBhKkf.js";import{G as a}from"./grid-cursor-Cy76u7lP.js";import{r as pe}from"./actions.api-key-BSzYtvum.js";import"./primitive-DZM6GKIN.js";function Pe(){const e=ce.c(66),[r,ie]=ne.useState(""),[s,x]=ne.useState("idle"),[h,p]=ne.useState(null);let b;e[0]!==r||e[1]!==s?(b=r.trim().length>3&&s!=="pending",e[0]=r,e[1]=s,e[2]=b):b=e[2];const oe=b;let f;e[3]!==r?(f=async u=>{if(u.preventDefault(),!r.trim()){p("Please enter a valid email address."),x("error");return}x("pending"),p(null);try{me("API Key Requested",{source_path:"/developers"},!0),await pe({data:{email:r.trim()}}),x("success"),ie("")}catch{x("error"),p("We could not process your request right now. Please try again shortly.")}},e[3]=r,e[4]=f):f=e[4];const te=f;let g;e[5]!==s?(g=u=>{ie(u),s!=="pending"&&(x("idle"),p(null))},e[5]=s,e[6]=g):g=e[6];const se=g;let v;e[7]===Symbol.for("react.memo_cache_sentinel")?(v=t.jsx(he,{}),e[7]=v):v=e[7];let j;e[8]===Symbol.for("react.memo_cache_sentinel")?(j=t.jsxs("div",{className:"inline-flex items-center gap-2 px-3 py-1 border border-neutral-200 bg-white text-xs font-mono text-neutral-500",children:["Developers",t.jsx("span",{className:"w-1 h-1 bg-neutral-400"}),"Public API"]}),e[8]=j):j=e[8];let y,N;e[9]===Symbol.for("react.memo_cache_sentinel")?(y=t.jsxs("h1",{className:"font-nohemi text-4xl md:text-5xl font-semibold tracking-tight text-neutral-900 mt-4",children:["Build gradients programmatically with the"," ",t.jsx(ue,{className:"tracking-[4%]"})," API"]}),N=t.jsx("p",{className:"text-base text-neutral-600 mt-4 max-w-2xl",children:"Generate mesh gradients on-demand in SVG, PNG, WebP, or CSS. The API is designed to be deterministic, fast, and easy to integrate into your product or pipeline."}),e[9]=y,e[10]=N):(y=e[9],N=e[10]);let w;e[11]===Symbol.for("react.memo_cache_sentinel")?(w=t.jsxs("div",{className:"flex flex-wrap gap-3 mt-6",children:[t.jsx("a",{href:"#request-key",className:"inline-flex items-center px-6 py-3 bg-black text-white font-nohemi font-semibold hover:scale-[1.02] transition-transform",children:"Request API key"}),t.jsx("a",{href:"#api-reference",className:"inline-flex items-center px-6 py-3 border border-neutral-900 text-neutral-900 font-nohemi font-semibold hover:bg-neutral-900 hover:text-white transition-colors",children:"View API reference"})]}),e[11]=w):w=e[11];let _;e[12]===Symbol.for("react.memo_cache_sentinel")?(_=t.jsx("div",{className:"mt-10 grid grid-cols-1 sm:grid-cols-2 gap-4",children:[{label:"Formats",value:"SVG, PNG, WebP, CSS"},{label:"Deterministic",value:"Seed or email inputs"},{label:"Canvas sizing",value:"width / height / size"},{label:"Rate limits",value:"30/min public • 300/min with key"}].map(ve)}),e[12]=_):_=e[12];let S;e[13]===Symbol.for("react.memo_cache_sentinel")?(S=t.jsxs("section",{className:"relative overflow-hidden",children:[v,t.jsx("div",{className:"container max-w-5xl mx-auto px-6 py-16 relative z-10",children:t.jsx("div",{className:"grid grid-cols-1 gap-12",children:t.jsxs("div",{children:[j,y,N,w,_,t.jsxs("div",{className:"mt-10 border border-neutral-200 bg-white p-6",children:[t.jsx("p",{className:"text-xs uppercase tracking-wide text-neutral-500 font-mono",children:"Base URL"}),t.jsx("div",{className:"mt-3 border border-neutral-200 bg-neutral-50 px-4 py-3 font-mono text-sm text-neutral-800",children:"https://better-gradient.com/api/gradient"})]})]})})})]}),e[13]=S):S=e[13];let k;e[14]===Symbol.for("react.memo_cache_sentinel")?(k=t.jsxs("div",{className:"max-w-3xl mx-auto text-center mb-10",children:[t.jsx("h2",{className:"font-nohemi text-3xl font-semibold tracking-tight text-neutral-900",children:"API reference"}),t.jsx("p",{className:"mt-3 text-base text-neutral-600",children:"Everything you need to integrate the gradient API into your product."})]}),e[14]=k):k=e[14];let P;e[15]===Symbol.for("react.memo_cache_sentinel")?(P=t.jsxs("div",{className:"bg-white p-8 relative group",children:[t.jsx(a,{}),t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb

1-4",children:"Endpoint"}),t.jsx("div",{className:"border border-neutral-200 bg-neutral-50 px-4 py-3 font-mono text-sm text-neutral-800",children:"GET /api/gradient"}),t.jsx("p",{className:"text-sm text-neutral-600 mt-4",children:"Use query parameters to customize output format, size, and generation seed."})]}),e[15]=P):P=e[15];let A;e[16]===Symbol.for("react.memo_cache_sentinel")?(A=t.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-px bg-neutral-200 border border-neutral-200 relative",children:[P,t.jsxs("div",{className:"bg-white p-8 relative group",children:[t.jsx(a,{}),t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-4",children:"Authentication"}),t.jsx("p",{className:"text-sm text-neutral-600",children:"Add your API key as a bearer token to access higher limits (300/min per key). Public traffic is limited to 30/min per IP."}),t.jsx("div",{className:"mt-4 border border-neutral-200 bg-neutral-50 px-4 py-3 font-mono text-sm text-neutral-800",children:"Authorization: Bearer YOUR_API_KEY"})]})]}),e[16]=A):A=e[16];let R;e[17]===Symbol.for("react.memo_cache_sentinel")?(R=t.jsxs("div",{className:"mt-10 border border-neutral-200 bg-white",children:[t.jsx("div",{className:"grid grid-cols-1 md:grid-cols-[0.9fr_1.1fr_0.6fr] gap-px bg-neutral-200",children:[{label:"Parameter",value:""},{label:"Description",value:""},{label:"Default",value:""}].map(ge)}),[{name:"format",description:"Output type: svg, png, webp, css.",defaultValue:"svg"},{name:"width",description:"Output width in pixels.",defaultValue:"1920"},{name:"height",description:"Output height in pixels.",defaultValue:"1080"},{name:"size",description:"Shortcut to set both width and height.",defaultValue:"-"},{name:"seed",description:"Deterministic seed for repeatable gradients.",defaultValue:"-"},{name:"email",description:"Derive a deterministic seed from email.",defaultValue:"-"},{name:"count",description:"Number of shapes (3-10).",defaultValue:"6"},{name:"quality",description:"WebP quality (0-1 or 1-100).",defaultValue:"0.95"},{name:"background",description:"Canvas background: solid or transparent.",defaultValue:"solid"},{name:"grain",description:"Transparent export grain: keep or remove.",defaultValue:"remove when transparent"}].map(fe)]}),e[17]=R):R=e[17];let q;e[18]===Symbol.for("react.memo_cache_sentinel")?(q=t.jsx("span",{className:"font-mono",children:"seed"}),e[18]=q):q=e[18];let I;e[19]===Symbol.for("react.memo_cache_sentinel")?(I=t.jsx("span",{className:"font-mono",children:"email"}),e[19]=I):I=e[19];let V;e[20]===Symbol.for("react.memo_cache_sentinel")?(V=t.jsxs("div",{className:"mt-4 border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-600",children:["If you pass both ",q," and"," ",I,", the seed takes precedence. Width and height override size when both are provided. Transparent backgrounds remove grain by default unless"," ",t.jsx("span",{className:"font-mono",children:"grain=keep"})," is provided."]}),e[20]=V):V=e[20];let E,G;e[21]===Symbol.for("react.memo_cache_sentinel")?(E=t.jsx(a,{}),G=t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-3",children:"cURL example"}),e[21]=E,e[22]=G):(E=e[21],G=e[22]);let z;e[23]===Symbol.for("react.memo_cache_sentinel")?(z=t.jsxs("div",{className:"bg-white p-8 relative group",children:[E,G,t.jsx("div",{className:"bg-neutral-900 text-neutral-100 border border-neutral-300 p-4 font-mono text-sm overflow-x-auto",children:t.jsx("pre",{children:`curl -H "Authorization: Bearer YOUR_API_KEY" \\
2  -o mesh.webp \\
3  "https://better-gradient.com/api/gradient?format=webp&width=1600&height=900&seed=hello&background=transparent&grain=remove"`})}),t.jsx("p",{className:"text-sm text-neutral-600 mt-4",children:"Replace the seed value to generate a unique gradient."})]}),e[23]=z):z=e[23];let C,D;e[24]===Symbol.for("react.memo_cache_sentinel")?(C=t.jsx(a,{}),D=t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-3",children:"Fetch SVG"}),e[24]=C,e[25]=D):(C=e[24],D=e[25]);let B;e[26]===Symbol.for("react.memo_cache_sentinel")?(B=t.jsxs("div",{className:"mt-12 grid grid-cols-1 lg:grid-cols-2 gap-px bg-neutral-200 border border-neutral-200 relative",children:[z,t.jsxs("div",{className:"bg-white p-8 relative group",children:[C,D,t.jsx("div",{className:"bg-neutral-900 text-neutral-100 border border-neutral-300 p-4 font-mono text-sm overflow-x-auto",children:t.jsx("pre",{children:`const res = await fetch(
4  "https://better-gradient.com/api/gradient?format=svg&size=1200&seed=sunrise"
5);
6const svg = await res.text();`})}),t.jsx("p",{className:"text-sm text-neutral-600 mt-4",children:"The response body is the raw SVG markup."})]})]}),e[26]=B):B=e[26];let O,T;e[27]===Symbol.for("react.memo_cache_sentinel")?(O=t.jsx(a,{}

6),T=t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-3",children:"CSS background"}),e[27]=O,e[28]=T):(O=e[27],T=e[28]);let W;e[29]===Symbol.for("react.memo_cache_sentinel")?(W=t.jsxs("div",{className:"bg-white p-8 relative group",children:[O,T,t.jsx("div",{className:"bg-neutral-900 text-neutral-100 border border-neutral-300 p-4 font-mono text-sm overflow-x-auto",children:t.jsx("pre",{children:`const css = await fetch(
7  "https://better-gradient.com/api/gradient?format=css&size=1200&seed=studio"
8).then((r) => r.text());
9document.body.style.cssText = css;`})})]}),e[29]=W):W=e[29];let Y,U;e[30]===Symbol.for("react.memo_cache_sentinel")?(Y=t.jsx(a,{}),U=t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-3",children:"Response types"}),e[30]=Y,e[31]=U):(Y=e[30],U=e[31]);let K;e[32]===Symbol.for("react.memo_cache_sentinel")?(K=t.jsx("section",{id:"api-reference",className:"bg-white relative",children:t.jsxs("div",{className:"container max-w-5xl mx-auto px-6 py-16",children:[k,A,R,V,B,t.jsxs("div",{className:"mt-10 grid grid-cols-1 lg:grid-cols-2 gap-px bg-neutral-200 border border-neutral-200 relative",children:[W,t.jsxs("div",{className:"bg-white p-8 relative group",children:[Y,U,t.jsxs("ul",{className:"space-y-3 text-sm text-neutral-600",children:[t.jsxs("li",{children:[t.jsx("span",{className:"font-mono text-neutral-900",children:"svg"})," → image/svg+xml"]}),t.jsxs("li",{children:[t.jsx("span",{className:"font-mono text-neutral-900",children:"png"})," → image/png"]}),t.jsxs("li",{children:[t.jsx("span",{className:"font-mono text-neutral-900",children:"webp"})," → image/webp"]}),t.jsxs("li",{children:[t.jsx("span",{className:"font-mono text-neutral-900",children:"css"})," → text/css"]})]}),t.jsx("div",{className:"mt-5 border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-600",children:"Errors return plain text with status 400 or 500. Rate limits respond with 429 and include X-RateLimit headers."})]})]})]})}),e[32]=K):K=e[32];let L;e[33]===Symbol.for("react.memo_cache_sentinel")?(L=t.jsxs("div",{className:"max-w-3xl mx-auto text-center mb-10",children:[t.jsx("h2",{className:"font-nohemi text-3xl font-semibold tracking-tight text-neutral-900",children:"Confirmation flow"}),t.jsx("p",{className:"mt-3 text-base text-neutral-600",children:"Secure confirmation ensures keys are generated only by the owner."})]}),e[33]=L):L=e[33];let F;e[34]===Symbol.for("react.memo_cache_sentinel")?(F=t.jsx("section",{className:"bg-white relative",children:t.jsxs("div",{className:"container max-w-5xl mx-auto px-6 pb-20",children:[L,t.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-200 border border-neutral-200 relative",children:[{step:"01",title:"Request access",description:"Submit your email to receive the confirmation link."},{step:"02",title:"Confirm your email",description:"Open the email link to generate a key tied to your address."},{step:"03",title:"Receive your API key",description:"Your key is revealed once and ready to use."}].map(be)})]})}),e[34]=F):F=e[34];let M,H;e[35]===Symbol.for("react.memo_cache_sentinel")?(M=t.jsx("div",{className:"absolute -top-8 -right-10 w-48 h-48 bg-neutral-100 "}),H=t.jsx("div",{className:"absolute -bottom-10 -left-6 w-40 h-40 bg-neutral-200 "}),e[35]=M,e[36]=H):(M=e[35],H=e[36]);let X;e[37]===Symbol.for("react.memo_cache_sentinel")?(X=t.jsx(a,{}),e[37]=X):X=e[37];let $;e[38]===Symbol.for("react.memo_cache_sentinel")?($=t.jsxs("div",{children:[t.jsx("p",{className:"text-xs font-mono uppercase tracking-wide text-neutral-500",children:"Request Access"}),t.jsx("h2",{className:"font-nohemi text-2xl font-semibold text-neutral-900",children:"Get your API key"})]}),e[38]=$):$=e[38];let J;e[39]===Symbol.for("react.memo_cache_sentinel")?(J=t.jsxs("div",{className:"flex items-center justify-between mb-6",children:[$,t.jsx("div",{className:"relative w-12 h-12 overflow-hidden border border-neutral-200",children:t.jsx("img",{src:"/gradients/gradient-1.webp",alt:"Gradient sample",className:"w-full h-full object-cover",loading:"lazy"})})]}),e[39]=J):J=e[39];let l;

9e[40]!==se?(l=u=>se(u.target.value),e[40]=se,e[41]=l):l=e[41];let n;e[42]!==r||e[43]!==l?(n=t.jsxs("label",{className:"text-sm font-medium text-neutral-900",children:["Work email",t.jsx("input",{className:"mt-2 w-full border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-400",placeholder:"[email protected]",type:"email",value:r,onChange:l,required:!0})]}),e[42]=r,e[43]=l,e[44]=n):n=e[44];let i;e[45]!==h||e[46]!==s?(i=s==="error"&&h&&t.jsx("p",{className:"text-sm text-red-600",children:h}),e[45]=h,e[46]=s,e[47]=i):i=e[47];const re=s==="pending",ae=!oe,le=s==="pending"?"Sending request...":"Request key";let o;e[48]!==re||e[49]!==ae||e[50]!==le?(o=t.jsx(de,{type:"submit",intent:"primary",size:"lg",isPending:re,isDisabled:ae,className:"w-full justify-center rounded-none",children:le}),e[48]=re,e[49]=ae,e[50]=le,e[51]=o):o=e[51];let c;e[52]!==s?(c=s==="success"&&t.jsx("div",{className:"border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800",children:"Request received. Check your inbox for a confirmation link to generate your key."}),e[52]=s,e[53]=c):c=e[53];let m;e[54]!==te||e[55]!==n||e[56]!==i||e[57]!==o||e[58]!==c?(m=t.jsxs("form",{onSubmit:te,className:"flex flex-col gap-4",children:[n,i,o,c]}),e[54]=te,e[55]=n,e[56]=i,e[57]=o,e[58]=c,e[59]=m):m=e[59];let Q;e[60]===Symbol.for("react.memo_cache_sentinel")?(Q=t.jsx("p",{className:"text-xs text-neutral-500 mt-4",children:"You will receive a confirmation link by email to generate your key."}),e[60]=Q):Q=e[60];let d;e[61]!==m?(d=t.jsx("section",{className:"bg-white relative",children:t.jsx("div",{className:"container max-w-5xl mx-auto px-6 pb-20",children:t.jsxs("div",{className:"relative  mx-auto",children:[M,H,t.jsxs("div",{id:"request-key",className:"relative bg-white border border-neutral-200 p-8",children:[X,J,m,Q]})]})})}),e[61]=m,e[62]=d):d=e[62];let Z;e[63]===Symbol.for("react.memo_cache_sentinel")?(Z=t.jsx("div",{className:"container max-w-5xl mx-auto px-6 pb-20",children:t.jsxs("div",{className:"border border-neutral-200 bg-neutral-50 p-12 text-center relative",children:[t.jsx(a,{}),t.jsx("h2",{className:"font-nohemi text-3xl font-semibold text-neutral-900 mb-4",children:"Build with Better Gradient"}),t.jsx("p",{className:"text-neutral-600 mb-8 max-w-2xl mx-auto",children:"Create your first mesh gradient in the editor or integrate the API into your stack."}),t.jsx(xe,{to:"/editor",className:"inline-flex items-center px-8 py-4 bg-black text-white font-nohemi font-semibold hover:scale-[1.02] transition-transform",children:"Open the Editor"})]})}),e[63]=Z):Z=e[63];let ee;return e[64]!==d?(ee=t.jsxs("main",{className:"bg-white relative",children:[S,K,F,d,Z]}),e[64]=d,e[65]=ee):ee=e[65],ee}function be(e){return t.jsxs("div",{className:"bg-white p-8 relative group hover:bg-neutral-50 transition-all duration-300",children:[t.jsx(a,{}),t.jsx("div",{className:"text-sm font-mono text-neutral-400 mb-4 group-hover:text-neutral-900 transition-colors",children:e.step}),t.jsx("h3",{className:"font-nohemi text-lg font-semibold text-neutral-900 mb-3",children:e.title}),t.jsx("p",{className:"text-sm text-neutral-600 leading-relaxed",children:e.description})]},e.step)}function fe(e){return t.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-[0.9fr_1.1fr_0.6fr] gap-px bg-neutral-200",children:[t.jsx("div",{className:"bg-white px-4 py-3 text-sm font-mono text-neutral-900",children:e.name}),t.jsx("div",{className:"bg-white px-4 py-3 text-sm text-neutral-600",children:e.description}),t.jsx("div",{className:"bg-white px-4 py-3 text-sm text-neutral-600",children:e.defaultValue})]},e.name)}function ge(e){return t.jsx("div",{className:"bg-neutral-50 px-4 py-3 text-xs font-mono uppercase tracking-wide text-neutral-500",children:e.label},e.label)}function ve(e){return t.jsxs("div",{className:"relative group bg-white border border-neutral-200 p-4",children:[t.jsx(a,{}),t.jsx("p",{className:"text-xs uppercase tracking-wide text-neutral-500 font-mono",children:e.label}

9),t.jsx("p",{className:"text-sm text-neutral-900 font-medium mt-1",children:e.value})]},e.label)}export{Pe as component};