ScalingGallery is a horizontal gallery for Framer where each item's size is a function of its position across the viewport. Items enter from the left at a configurable minimum scale, grow as they travel right, slide off the right edge, and recycle back to the left in an infinite loop. Built for editorial layouts, portfolio reels, hero sections, and anywhere a static image grid feels too quiet.

Drop any number of images into the Items array.

· Pixel Gap: extra horizontal space between slot positions. Increase for an airy spread, decrease for a denser strip.

· Max Visible Items: roughly how many items fit across the viewport at any moment. Lower values give bigger items with more breathing room.

· Min Scale: how small items render at the left. Use 0.05 for a dramatic shrink, 0.4 for a subtle one.

· Max Scale: how large items render at the right. Values above 1 push items beyond their natural size for a hero feel.

· Lerp Factor: how softly the gallery follows scroll input. Lower values feel buttery and floaty, higher values feel responsive and snappy.

· Scroll Speed: how much each unit of wheel input moves the gallery.

The component listens to mouse wheel, trackpad, click-and-drag, and touch swipe. Drag and wheel share the same target offset, so combining them feels natural. Click events on items are suppressed if the user dragged more than five pixels, so links never fire accidentally.

· Parallax Intensity: shifts the image inside each item horizontally based on that item's current scale. Smaller items drift, larger items center. Set to 0 to disable.

· Hover Scale: how much the inner image zooms on hover.

· Hover Parallax: how much the inner image shifts on hover, independent from the scale-driven parallax.

Hover is CSS-only and does not interfere with the runtime animation.

On screens 767 pixels wide or smaller, the component falls back to a simpler stacked layout. Heavy transforms are skipped so scrolling stays responsive on lower-end devices.

Drop any number of images into the Items array.

· Pixel Gap: extra horizontal space between slot positions. Increase for an airy spread, decrease for a denser strip.

· Max Visible Items: roughly how many items fit across the viewport at any moment. Lower values give bigger items with more breathing room.

· Min Scale: how small items render at the left. Use 0.05 for a dramatic shrink, 0.4 for a subtle one.

· Max Scale: how large items render at the right. Values above 1 push items beyond their natural size for a hero feel.

· Lerp Factor: how softly the gallery follows scroll input. Lower values feel buttery and floaty, higher values feel responsive and snappy.

· Scroll Speed: how much each unit of wheel input moves the gallery.

· Parallax Intensity: shifts the image inside each item horizontally based on that item's current scale. Smaller items drift, larger items center. Set to 0 to disable.

· Hover Scale: how much the inner image zooms on hover.

· Hover Parallax: how much the inner image shifts on hover, independent from the scale-driven parallax.

Hover is CSS-only and does not interfere with the runtime animation.

On screens 767 pixels wide or smaller, the component falls back to a simpler stacked layout. Heavy transforms are skipped so scrolling stays responsive on lower-end devices.

Drop any number of images into the Items array.

· Pixel Gap: extra horizontal space between slot positions. Increase for an airy spread, decrease for a denser strip.

· Max Visible Items: roughly how many items fit across the viewport at any moment. Lower values give bigger items with more breathing room.

· Min Scale: how small items render at the left. Use 0.05 for a dramatic shrink, 0.4 for a subtle one.

· Max Scale: how large items render at the right. Values above 1 push items beyond their natural size for a hero feel.

· Lerp Factor: how softly the gallery follows scroll input. Lower values feel buttery and floaty, higher values feel responsive and snappy.

· Scroll Speed: how much each unit of wheel input moves the gallery.

· Parallax Intensity: shifts the image inside each item horizontally based on that item's current scale. Smaller items drift, larger items center. Set to 0 to disable.

· Hover Scale: how much the inner image zooms on hover.

· Hover Parallax: how much the inner image shifts on hover, independent from the scale-driven parallax.

Hover is CSS-only and does not interfere with the runtime animation.

On screens 767 pixels wide or smaller, the component falls back to a simpler stacked layout. Heavy transforms are skipped so scrolling stays responsive on lower-end devices.