56:I[473921,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mwzcaalgk6io.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/30ex342hi0wzr.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/222e_wk0i41rv.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/33kea80yupbzt.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/05yll7e_snxjv.js"],"PostDetailCard"] 57:T67d,

Give your site an opening people remember. Capsule Morph Hero Pro opens your hero image out of a small capsule into a full-screen frame. As visitors scroll, it morphs back into a capsule while rows of image capsules sweep across the screen. It ends with a lit 3D-style centre capsule and a closing line, then the page continues.

Perfect for product brands, studios, agencies and portfolios.

The animation

- Cinematic intro: the hero image opens out of a capsule as the headline rises in

- Scroll morph: the frame shrinks into a capsule as capsule rows sweep past like a marquee

- Finale: a 3D-style centre capsule tilts aside and your closing line slides in

- End Hold keeps the finished finale on screen before the next section arrives

Features

- Hero image, centre capsule for your logo or product, and up to 12 marquee images

- Readability gradient so your heading stays clear on any photo

- Editable two-line headline, primary button, text link and scroll cue

- Separate colours for the heading, accent, finale line, buttons and capsules

- Fluid text that scales with the screen, or your own font sizes

- Scroll length, smoothing and optional smooth scrolling

- Canvas preview slider to scrub the whole animation while you design

Built right

- Pins itself and creates its own scroll length: just set Width to Fill

- Responsive on desktop, tablet and phone

- Respects reduced motion and pauses work when not needed

- No external scripts or dependencies

Setup takes about 3 minutes: add your images, write your headline and publish.

53:[["$","$L56",null,{"post":{"id":"01a1542b-66dc-724d-bf1a-2073423044f5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","slug":"the-codejuring-universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vwZFX6UZnF2NzUPatskK","resolved":true,"title":"Morph Scroll Hero","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Give your site an opening people remember. Capsule Morph Hero Pro opens your hero image out of a small capsule into a full-screen frame. As visitors scroll, it morphs back into a capsule while rows of image capsules sweep across the screen. It ends with a lit 3D-style centre capsule and a closing line, then the page continues."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for product brands, studios, agencies and portfolios."}]},{"type":"paragraph","content":[{"type":"text","text":"The animation"}]},{"type":"paragraph","content":[{"type":"text","text":"- Cinematic intro: the hero image opens out of a capsule as the headline rises in"}]},{"type":"paragraph","content":[{"type":"text","text":"- Scroll morph: the frame shrinks into a capsule as capsule rows sweep past like a marquee"}]},{"type":"paragraph","content":[{"type":"text","text":"- Finale: a 3D-style centre capsule tilts aside and your closing line slides in"}]},{"type":"paragraph","content":[{"type":"text","text":"- End Hold keeps the finished finale on screen before the next section arrives"}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero image, centre capsule for your logo or product, and up to 12 marquee images"}]},{"type":"paragraph","content":[{"type":"text","text":"- Readability gradient so your heading stays clear on any photo"}]},{"type":"paragraph","content":[{"type":"text","text":"- Editable two-line headline, primary button, text link and scroll cue"}]},{"type":"paragraph","content":[{"type":"text","text":"- Separate colours for the heading, accent, finale line, buttons and capsules"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fluid text that scales with the screen, or your own font sizes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Scroll length, smoothing and optional smooth scrolling"}]},{"type":"paragraph","content":[{"type":"text","text":"- Canvas preview slider to scrub the whole animation while you design"}]},{"type":"paragraph","content":[{"type":"text","text":"Built right"}]},{"type":"paragraph","content":[{"type":"text","text":"- Pins itself and creates its own scroll length: just set Width to Fill"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive on desktop, tablet and phone"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced motion and pauses work when not needed"}]},{"type":"paragraph","content":[{"type":"text","text":"- No external scripts or dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup takes about 3 minutes: add your images, write your headline and publish."}]}]},"introduction":"A hero that morphs as you scroll.","slug":"morph-scroll-hero","author":{"framerUserId":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","slug":"the-codejuring-universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0cde0594-dfae-4cc3-9cb0-225330b10106/01a15429-23fe-7311-b060-f1f8f275e089.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1672,"height":941}}],"post":null,"createdAt":"2026-10-19T12:38:12.390Z","updatedAt":"2026-10-20T16:27:08.492Z","publishedAt":"2026-10-19T12:38:12.382Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://unreal-leprechaun-067523.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_mx2AkNHDiT9TVI7gnXBv9qUmPDfhL4Dn84Cxn4EeZbk","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"C1NOyM42Bzsl8g6iVWaV","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-19T12:38:12.956Z","updatedAt":"2026-10-19T12:38:12.956Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you