4c:I[267044,["/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/41gwzxjlh6wda.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/0gsy0nazl2cht.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/15ey03cfkkg-y.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/29vwz5igguxfe.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/0xifckmqg-iju.js"],"S"] 4d: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.

4e:T58e,

Make your footer the part people play with. Piano Footer turns your brand name into thin piano strings. Hover a line and it ripples like a plucked string and plays a soft piano note. Sweep across the word and it plays a melody.

Perfect for big wordmark footers on portfolios, studios, agencies and brand sites.

Features

- Works with any text, font and weight, including multiple lines

- Musical scales: Pentatonic, Minor Pentatonic, Major, Minor, Japanese and Whole Tone

- Choose the key, octave and note layout: scattered, rising upward or left to right

- Wave controls: height, duration, ripples and travel

- Click to pluck harder, plus touch strumming on phones (vertical swipes still scroll)

- Optional sound toggle so visitors can turn sound on or mute it

- Volume and echo controls, plus an On Pluck event for your own interactions

Built right

- Sound is generated live: no audio files, no external scripts

- Stays smooth even when visitors sweep across the text quickly

- Sound starts only after the visitor clicks or taps, as browsers require

- Real text stays in the page for screen readers and SEO

- Respects reduced motion and pauses when off screen

- Static on the Canvas, every setting adjustable per breakpoint

Setup takes about 1 minute: paste it into your footer, type your brand name and publish.

4f:T47e,

Make your first impression the best part of your site. Stack to Hero Preloader cycles your photos on a centred card, then the final image glides and scales into your hero section. It's a preloader and hero image in one component.

Perfect for portfolios, photographers, studios and agencies.

Features

- Up to 8 intro images plus a dedicated hero image

- Hero shapes: Portrait, Landscape, Square, Custom or Full Screen

- Width in px or % (100% for a full-width hero)

- 9-point positioning with X/Y offsets, corner radius and max width for mobile

- Full timing control: delay, reveal, stagger, hold, travel and zoom

- Backdrop colour, optional hero content slot and an On Complete event

- Play once per session, so returning visitors skip the intro

- Every setting can change per breakpoint

Built right

- Static on the Canvas, with an Intro preview mode for designing

- Respects reduced-motion settings

- No layout shift, no external scripts, no dependencies

Setup takes about 2 minutes: add your images, choose the hero size and position, and publish.

50:T7b3,

PreloadPro

Make your website's first impression unforgettable. PreloadPro covers the screen with bold vertical strips, reveals animated scrolling words, then peels away strip by strip — exposing your page with a cinematic transition.

How it works

On page load, 4 full-height strips instantly fill the screen. Your static label appears first on the left, followed by a scrolling word ticker on the right that cycles through up to 10 custom words. Once the sequence completes, the strips exit one by one in a staggered random order (1→3→4→2), revealing your site underneath.

On mobile, the layout automatically simplifies to 2 strips — one for each text element — keeping the experience clean and fast on smaller screens.

What you can customize

Left static text and up to 10 scrolling words
Strip background color
Left text color and scrolling word accent color
Font family — choose from 10 presets including Syne, Playfair Display, DM Sans, Inter, and more, or type any custom font loaded in your project
Font weight from Light to Black
Font size independently for desktop and mobile
Divider line color and thickness between strips
Word scroll speed, strip exit stagger, and exit animation duration
On Complete event — connect it to show your page content or trigger any interaction

Who is this for

Designers and developers who want a premium loading experience on their Framer site without writing a single line of code. Works great for portfolios, agencies, product launches, and any site where first impressions matter.

Setup

Drop the component onto your page, set it to Fixed position, set width and height to 100%, and customize from the right panel. That's it.

51:T669,

Scroll Zoom Gallery is a scroll-driven animation component built with smooth motion scaling and layered image positioning. It creates a cinematic zoom effect by dynamically transforming multiple images at varying intensities as the user scrolls.

Key Features

7 customizable image slots
Smooth, scroll-based scaling animation
Layered depth effect with controlled overlap
Adjustable scroll height multiplier
Fully responsive (Desktop, Tablet, Mobile)
Optimized viewport scaling for smaller screens
Performance-focused animation using spring smoothing
Clean and minimal structure for easy integration

Responsive Behavior

The component intelligently adapts layout proportions and viewport height calculations across devices. On tablet and mobile, scaling and positioning are adjusted to maintain visual balance and prevent overflow, ensuring the center image expands cleanly without revealing background layers unintentionally.

Customization

Replace images directly from property controls
Modify scroll duration via height multiplier
Toggle layout guides for alignment preview
Easily tweak scale intensity inside the code

Best Used For

Portfolio showcases
Creative case studies
Agency landing pages
Product highlights
Modern storytelling layouts

Scroll Zoom Gallery combines precision motion design with responsive structure, making it ideal for projects that demand both visual impact and refined user experience.

4b:["$","$L4c",null,{"value":{"fallback":{"$inf$activity-creator-0cde0594-dfae-4cc3-9cb0-225330b10106-all:/unified/creator/0cde0594-dfae-4cc3-9cb0-225330b10106/activity/":[{"data":[{"id":"01a1542b-6910-767c-bd73-ecb3fa261d8d","type":"component.created","target":{"type":"component","id":"vwZFX6UZnF2NzUPatskK","preview":"Morph Scroll Hero","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0cde0594-dfae-4cc3-9cb0-225330b10106/01a15429-23fe-7311-b060-f1f8f275e089.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","slug":"the-codejuring-universe","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-19T12:38:13.520Z","latestAt":"2026-10-19T12:38:13.520Z"},{"id":"01a13e68-33b3-700b-89fc-13ec785f5c76","type":"component.created","target":{"type":"component","id":"LoSRsPsD28wUAeNCXPpK","preview":"Musical Footer Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0cde0594-dfae-4cc3-9cb0-225330b10106/01a13e68-0851-747f-a866-7004cbffbb4d.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","slug":"the-codejuring-universe","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-15T07:12:58.803Z","latestAt":"2026-10-15T07:12:58.803Z"},{"id":"01a1394e-5d1c-754b-a7b0-2144522e217a","type":"component.created","target":{"type":"component","id":"3GGNLzCKe1XsqpU7kdwI","preview":"Stack Hero Preloader","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0cde0594-dfae-4cc3-9cb0-225330b10106/01a1394c-677a-7108-983f-0c787c1a3def.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"0cde0594-dfae-4cc3-9cb0-225330b10106","name":"The Codejuring Universe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1101484/avatar-Spy0JOaDaGi7udDQkKgWJPsHuOYo1d.jpg","slug":"the-codejuring-universe","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-14T07:26:39.388Z","latestAt":"2026-10-14T07:26:39.388Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:0cde0594-dfae-4cc3-9cb0-225330b10106:/unified/posts/?creator=0cde0594-dfae-4cc3-9cb0-225330b10106&with=reposts":[{"data":[{"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":"$4d","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","type":"post"},{"id":"01a13e68-3196-7039-a2fb-bc1a9884fb88","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":"LoSRsPsD28wUAeNCXPpK","resolved":true,"title":"Musical Footer Text","body":"$4e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Make your footer the part people play with. Piano Footer turns your brand name into thin piano strings. Hover a line and it ripples like a plucked string and plays a soft piano note. Sweep across the word and it plays a melody."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for big wordmark footers on portfolios, studios, agencies and brand sites."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"paragraph","content":[{"type":"text","text":"- Works with any text, font and weight, including multiple lines"}]},{"type":"paragraph","content":[{"type":"text","text":"- Musical scales: Pentatonic, Minor Pentatonic, Major, Minor, Japanese and Whole Tone"}]},{"type":"paragraph","content":[{"type":"text","text":"- Choose the key, octave and note layout: scattered, rising upward or left to right"}]},{"type":"paragraph","content":[{"type":"text","text":"- Wave controls: height, duration, ripples and travel"}]},{"type":"paragraph","content":[{"type":"text","text":"- Click to pluck harder, plus touch strumming on phones (vertical swipes still scroll)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional sound toggle so visitors can turn sound on or mute it"}]},{"type":"paragraph","content":[{"type":"text","text":"- Volume and echo controls, plus an On Pluck event for your own interactions"}]},{"type":"paragraph","content":[{"type":"text","text":"Built right"}]},{"type":"paragraph","content":[{"type":"text","text":"- Sound is generated live: no audio files, no external scripts"}]},{"type":"paragraph","content":[{"type":"text","text":"- Stays smooth even when visitors sweep across the text quickly"}]},{"type":"paragraph","content":[{"type":"text","text":"- Sound starts only after the visitor clicks or taps, as browsers require"}]},{"type":"paragraph","content":[{"type":"text","text":"- Real text stays in the page for screen readers and SEO"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced motion and pauses when off screen"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static on the Canvas, every setting adjustable per breakpoint"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup takes about 1 minute: paste it into your footer, type your brand name and publish."}]}]},"introduction":"A playable piano-string footer.","slug":"musical-footer-text","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/01a13e68-0851-747f-a866-7004cbffbb4d.png","metadata":{"tint":{"h":30,"s":18,"l":33},"width":1672,"height":941}}],"post":null,"createdAt":"2026-10-15T07:12:57.693Z","updatedAt":"2026-10-15T07:12:57.693Z","publishedAt":"2026-10-15T07:12:57.684Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://extraordinary-design-477705.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_PYMYJYYfYDOX0NyyMAXX8Q0sNOoi8TNvPtzfN3Er7oL","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"iTA6APSBhppCfRA16yLr","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-15T07:12:58.263Z","updatedAt":"2026-10-15T07:12:58.263Z","type":"post"},{"id":"01a1394e-5ad5-7531-9ba6-1f620798e9b3","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":"3GGNLzCKe1XsqpU7kdwI","resolved":true,"title":"Stack Hero Preloader","body":"$4f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Make your first impression the best part of your site. Stack to Hero Preloader cycles your photos on a centred card, then the final image glides and scales into your hero section. It's a preloader and hero image in one component."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for portfolios, photographers, studios and agencies."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"paragraph","content":[{"type":"text","text":"- Up to 8 intro images plus a dedicated hero image"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero shapes: Portrait, Landscape, Square, Custom or Full Screen"}]},{"type":"paragraph","content":[{"type":"text","text":"- Width in px or % (100% for a full-width hero)"}]},{"type":"paragraph","content":[{"type":"text","text":"- 9-point positioning with X/Y offsets, corner radius and max width for mobile"}]},{"type":"paragraph","content":[{"type":"text","text":"- Full timing control: delay, reveal, stagger, hold, travel and zoom"}]},{"type":"paragraph","content":[{"type":"text","text":"- Backdrop colour, optional hero content slot and an On Complete event"}]},{"type":"paragraph","content":[{"type":"text","text":"- Play once per session, so returning visitors skip the intro"}]},{"type":"paragraph","content":[{"type":"text","text":"- Every setting can change per breakpoint"}]},{"type":"paragraph","content":[{"type":"text","text":"Built right"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static on the Canvas, with an Intro preview mode for designing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced-motion settings"}]},{"type":"paragraph","content":[{"type":"text","text":"- No layout shift, no external scripts, no dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"Setup takes about 2 minutes: add your images, choose the hero size and position, and publish."}]}]},"introduction":"A preloader and hero image in one","slug":"stack-hero-preloader","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/01a1394c-677a-7108-983f-0c787c1a3def.png","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1672,"height":941}}],"post":null,"createdAt":"2026-10-14T07:26:38.196Z","updatedAt":"2026-10-14T07:26:38.196Z","publishedAt":"2026-10-14T07:26:38.193Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://diverse-customers-779704.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_AjWt7GPphuOcqHEjJVlVglIaRmrbS1FWxZlql3qvyVZ","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"l04opS3fXJJchdYPUSjG","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-14T07:26:38.805Z","updatedAt":"2026-10-14T07:26:38.805Z","type":"post"},{"id":"019df8b3-8103-7ee9-97d9-74409effed7a","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":"qH2CexpuN3Hy86IdIvnB","resolved":true,"title":"PreloadPro","body":"$50","bodyJson":null,"introduction":"Upgrade Your Website’s First Impression","slug":"preloadpro","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/components/qH2CexpuN3Hy86IdIvnB/preloadpro-MCX8oNg3ZyUV5KrJtAmUyS5Okw2Fia","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-12T12:49:29.044Z","updatedAt":"2026-05-05T14:27:38.211Z","publishedAt":"2026-05-05T15:13:26.787Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://resilient-tour-452599.framer.app/","price":"8","paymentUrl":"https://contra.com/payment-link/pgzguZZf-preload-pro","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"wUkwXtfkoY65RjAxhSy3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-05T15:13:26.787Z","updatedAt":"2026-05-05T15:13:26.787Z","type":"post"},{"id":"019ca302-5e61-77ab-a225-eb9fd4a058c6","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":"g0hAbJTK123ntHuUlFLe","resolved":true,"title":"Scroll Scale Gallery","body":"$51","bodyJson":null,"introduction":"Scroll. Scale. Immerse.","slug":"scroll-scale-gallery","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/components/g0hAbJTK123ntHuUlFLe/scrollscalegallery-Mwvu8rAXauY5ge8lGkNV17FU2BesAe","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-17T10:12:41.027Z","updatedAt":"2026-02-27T18:13:56.500Z","publishedAt":"2026-02-28T06:49:27.393Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://various-discipline-428789.framer.app/","price":"8","paymentUrl":"https://contra.com/payment-link/P4MFiLaX-scroll-zoom-gallery-custom-framer-component","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"iUkKQnUx2gxzhTxj5rLx","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-28T06:49:27.393Z","updatedAt":"2026-02-28T06:49:27.393Z","type":"post"},{"id":"019c75f4-0b33-701b-a76d-8ebf935bfad4","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":"1kxkJi32Cb92CVKnhT8D","resolved":true,"title":"VariantSwatchPro","body":"

VariantSwatchPro is designed for flexibility and performance inside Framer.It allows you to create smooth, interactive product color switching with a minimal and scalable UI.

Details

Fully customizable color swatches
Smooth variant switching interaction
Responsive across all screen sizes
Clean, minimal, modern design
Easy integration into any product layout
Optimized for performance
No complex setup required

","bodyJson":null,"introduction":"Clean, modern color swatches for Framer.","slug":"variantswatchpro","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/components/1kxkJi32Cb92CVKnhT8D/variantswatchpro-jcPEsrvsqlhnXS9yPalbLCC0yBzvxS","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-18T08:03:00.848Z","updatedAt":"2026-03-22T05:09:33.108Z","publishedAt":"2026-02-19T12:50:53.875Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ColorSwatch-FNxKcP.js@lz59eIPhEnBsbxOVtPFM","previewUrl":"https://collaborative-weather-755832.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"lz59eIPhEnBsbxOVtPFM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-19T12:50:53.875Z","updatedAt":"2026-02-19T12:50:53.875Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]