5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T698,

About this Component

Build Morph CTA turns a bold BUILD wordmark into a compact call-to-action as the user scrolls. The lettering compresses through layered trails, the “I” breaks away, then morphs into a responsive CTA with a scrambled text reveal.

Perfect For

Portfolio endings, contact sections, agency sites, product pages, landing pages, and any section that needs a memorable transition into a final action.

Key Features

• Scroll-driven BUILD → CTA morph • Responsive CTA scaling for desktop, tablet, and mobile • Editable CTA text, font, link, arrow, colors, and radius • Adjustable scroll length, BUILD scale, trail count, trail spread, and scramble timing • Separate CTA start and end colors • Canvas preview scrubber • Reduced-motion support • Static-renderer safe for Framer Canvas and export • No external libraries or dependencies

How It Works

Drop the component onto the page, set the CTA content and styling, then adjust the Motion controls to tune the scroll experience. The section creates its own pinned scroll distance, so no additional scroll setup is required.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase. Refunds are only offered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Issues must be reported with supporting evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, or features not advertised.

5a:[["$","$L5d",null,{"post":{"id":"01a10b19-af7c-723a-bc34-f0d1d982ae08","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SWZzbfiTwq5jPUidMQ3E","resolved":true,"title":"Build Morph CTA","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Build Morph CTA turns a bold BUILD wordmark into a compact call-to-action as the user scrolls. The lettering compresses through layered trails, the “I” breaks away, then morphs into a responsive CTA with a scrambled text reveal."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Portfolio endings, contact sections, agency sites, product pages, landing pages, and any section that needs a memorable transition into a final action."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Scroll-driven BUILD → CTA morph • Responsive CTA scaling for desktop, tablet, and mobile • Editable CTA text, font, link, arrow, colors, and radius • Adjustable scroll length, BUILD scale, trail count, trail spread, and scramble timing • Separate CTA start and end colors • Canvas preview scrubber • Reduced-motion support • Static-renderer safe for Framer Canvas and export • No external libraries or dependencies"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto the page, set the CTA content and styling, then adjust the Motion controls to tune the scroll experience. The section creates its own pinned scroll distance, so no additional scroll setup is required."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}},{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase. Refunds are only offered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Issues must be reported with supporting evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, or features not advertised."}]}]},"introduction":"BUILD morphs into a scroll CTA","slug":"build-morph-cta","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a10b19-a012-7383-8006-7e4b218658b1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-05T08:06:34.558Z","updatedAt":"2026-10-05T08:06:34.558Z","publishedAt":"2026-10-05T08:06:34.556Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactive-let-966279.framer.app","price":"8","paymentUrl":"https://contra.com/payment-link/7mjrxS2n-build-morph-cta-build-morphs-into-a-scroll-cta","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"JR4ByBeQwNh8CyMsCQnY","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-05T08:06:35.132Z","updatedAt":"2026-10-05T08:06:35.132Z","reported":false}}],"$L5f"]

Suggested for you