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/
————
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 Duration – Control background image/video transition timing
Overlay Opacity – Adjust overlay strength above background media
Auto Scroll Speed – Set the speed of the infinite timeline loop
Timeline Position – Place the timeline at the top or bottom
Timeline Padding – Adjust spacing around the timeline
Timeline Image Opacity – Control thumbnail opacity
Timeline Image Saturation – Adjust thumbnail saturation
Timeline Auto Hide – Automatically hide the timeline when inactive
Hide Delay – Delay before the timeline disappears
Hero sections · Interactive galleries · Portfolio showcases · Editorial layouts · Visual storytelling · Experimental UI
Francesco Caronte
