5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/0r0dvtn0sg1wd.js","/creators-assets/_next/static/immutable/chunks/07625_8djzdg3.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/19yc8w76n30ro.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T740,

Morph Waitlist

One button that springs open into an email field, validates the address, shows a loading state and morphs into "You're on the waitlist" with a short brand-colored confetti burst – drawn inline, no packages.

Included

Closed button → field → success in one component · Fit Content or Fill · validation, spinner, inline error, duplicate state · confetti in your accent color (respects reduced motion) · separate mobile sizing · Enter to submit, keyboard accessible · optional auto-reset.

Backend

Sends POST {"email": "…"} as JSON to the Endpoint URL you set. Works with Supabase, Formspree, Make, n8n, Zapier or your own API; rename the JSON key via Field Name. Preview Mode shows the animation without sending – turn it off before launch.

Setup help

Paste into ChatGPT or Claude:

"A Framer component POSTs {"email":"…"} as JSON to an endpoint, optionally with an apikey/Bearer header; the JSON key is renamable. I want to store emails in ‹Supabase/Airtable/Make/Notion/my API›. Tell me step by step: how to create the destination, the exact endpoint URL, whether I need a key, the field name, how to return HTTP 409 for duplicates, and any CORS setting for my Framer site. Keep it short."

Privacy

Emails go only to the endpoint you configure. The creator never receives or stores any data. You're responsible for your site's privacy notice.

License

Free for unlimited personal and client projects (Framer Limited Commercial License). No resale as a standalone asset.

Support hello@joelcimpean.com

5a:[["$","$L5d",null,{"post":{"id":"01a10340-ac62-712a-beca-adca06d87bb8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"068c9b5d-8e4f-498b-ab2b-a707fae9470c","name":"Joel Cimpean","slug":"joel-cimpean","avatar":"https://framerusercontent.com/avatars/users/068c9b5d-8e4f-498b-ab2b-a707fae9470c/kL4AmpBBI","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fz1B6H2xlLhfQTWzXowN","resolved":true,"title":"Morph Waitlist","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Morph Waitlist","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"One button that springs open into an email field, validates the address, shows a loading state and morphs into \"You're on the waitlist\" with a short brand-colored confetti burst – drawn inline, no packages."}]},{"type":"paragraph","content":[{"type":"text","text":"Included","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Closed button → field → success in one component · Fit Content or Fill · validation, spinner, inline error, duplicate state · confetti in your accent color (respects reduced motion) · separate mobile sizing · Enter to submit, keyboard accessible · optional auto-reset."}]},{"type":"paragraph","content":[{"type":"text","text":"Backend","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Sends POST {\"email\": \"…\"} as JSON to the Endpoint URL you set. Works with Supabase, Formspree, Make, n8n, Zapier or your own API; rename the JSON key via Field Name. Preview Mode shows the animation without sending – turn it off before launch."}]},{"type":"paragraph","content":[{"type":"text","text":"Setup help","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Paste into ChatGPT or Claude: "}]},{"type":"paragraph","content":[{"type":"text","text":"\"A Framer component POSTs {\"email\":\"…\"} as JSON to an endpoint, optionally with an apikey/Bearer header; the JSON key is renamable. I want to store emails in ‹Supabase/Airtable/Make/Notion/my API›. Tell me step by step: how to create the destination, the exact endpoint URL, whether I need a key, the field name, how to return HTTP 409 for duplicates, and any CORS setting for my Framer site. Keep it short.\""}]},{"type":"paragraph","content":[{"type":"text","text":"Privacy","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Emails go only to the endpoint you configure. The creator never receives or stores any data. You're responsible for your site's privacy notice."}]},{"type":"paragraph","content":[{"type":"text","text":"License","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Free for unlimited personal and client projects (Framer Limited Commercial License). No resale as a standalone asset."}]},{"type":"paragraph","content":[{"type":"text","text":"Support","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"hello@joelcimpean.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hello@joelcimpean.com","target":"_blank"}}]}]}]},"introduction":"Expanding waitlist with confetti","slug":"morph-waitlist","author":{"framerUserId":"068c9b5d-8e4f-498b-ab2b-a707fae9470c","name":"Joel Cimpean","slug":"joel-cimpean","avatar":"https://framerusercontent.com/avatars/users/068c9b5d-8e4f-498b-ab2b-a707fae9470c/kL4AmpBBI","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/068c9b5d-8e4f-498b-ab2b-a707fae9470c/01a10340-72b7-7598-8b74-18c6c3dbe025.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-10-03T19:32:11.915Z","updatedAt":"2026-10-03T19:32:11.915Z","publishedAt":"2026-10-03T19:32:11.912Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/MorphWaitlist-8q360I.js@zmxgZMB38HSPGrs1BEzn","previewUrl":"https://considerate-presentation-070243.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"zmxgZMB38HSPGrs1BEzn","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-03T19:32:12.514Z","updatedAt":"2026-10-03T19:32:12.514Z","reported":false}}],"$L5f"]

Suggested for you