51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52: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.

53: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.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-0cde0594-dfae-4cc3-9cb0-225330b10106-all:/unified/creator/0cde0594-dfae-4cc3-9cb0-225330b10106/activity/":[{"data":[],"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":"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":"$52","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"},{"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":"$53","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"},{"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://hy.chujiqiqi.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"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]