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:T8d6,

About this component

Hero Gallery is an interactive timeline-based component designed to create dynamic hero sections and galleries in Framer. A continuously scrolling timeline of thumbnails runs in an infinite loop, while each item seamlessly updates the background with its corresponding image or video.

Inspired by editorial timelines and cinematic galleries, Hero Gallery gives you full control over layout, animation, and interaction.

Like native Framer components, it’s fully responsive.

————

Live Preview: https://herogallery.framer.website/

————

Customizable Properties

/ Images

Items – Connect images or videos as timeline items
Images Size – Control thumbnail size
Images Spacing – Adjust spacing between timeline items
Corner Radius – Round thumbnail corners

/ Transition

Transition Duration – Control background image/video transition timing
Overlay Opacity – Adjust overlay strength above background media

/ Motion

Auto Scroll Speed – Set the speed of the infinite timeline loop

/ Timeline Layout

Timeline Position – Place the timeline at the top or bottom
Timeline Padding – Adjust spacing around the timeline

/ Timeline Appearance

Timeline Image Opacity – Control thumbnail opacity
Timeline Image Saturation – Adjust thumbnail saturation

/ Behavior

Timeline Auto Hide – Automatically hide the timeline when inactive
Hide Delay – Delay before the timeline disappears

Use cases

Hero sections · Interactive galleries · Portfolio showcases · Editorial layouts · Visual storytelling · Experimental UI

5a:[["$","$L5d",null,{"post":{"id":"019c4297-2986-7dee-84b3-821aa892ddf0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"55008a5b-5253-4125-9373-9257d17b3fab","name":"Francesco Caronte","slug":"francescocaronte","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/430234/avatar-qDF0erWzWOHHP3uG5npp7mCf1TayS9.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"5wW2Kg3F5bvKVawRn47d","resolved":true,"title":"Hero Gallery","body":"$5e","bodyJson":null,"introduction":"Interactive timeline Gallery for Framer","slug":"hero-gallery","author":{"framerUserId":"55008a5b-5253-4125-9373-9257d17b3fab","name":"Francesco Caronte","slug":"francescocaronte","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/430234/avatar-qDF0erWzWOHHP3uG5npp7mCf1TayS9.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/5wW2Kg3F5bvKVawRn47d/hero-gallery-1Xv19BopBTnyOHEEPbDCmqTQVSaEAc","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-24T13:23:47.355Z","updatedAt":"2026-02-25T21:15:57.315Z","publishedAt":"2026-02-09T13:28:48.774Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://herogallery.framer.website/","price":"15","paymentUrl":"https://francescocaronte.lemonsqueezy.com/checkout/buy/f09a2304-e576-45e1-81c1-4d055d1a4832","workshop":true,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"3IZUBhlfT8geJgR9TJEK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-09T13:28:48.774Z","updatedAt":"2026-02-09T13:28:48.774Z","reported":false}}],"$L5f"]

Suggested for you