Connected Grid

Connected Grid turns a photo sequence into a scrolling composition. Each image grows from the upper corner nearest the previous one while the photograph zooms out. Scroll back and the reveal reverses.

On phones, the images form a single column. Wider sections use an asymmetric eight-column layout. Use the gallery at full viewport height or inside a frame, with normal touch, trackpad and keyboard scrolling.

• 1–52 editable images with alt text

• 13-position composition, repeated for longer collections

• Adjustable spacing, corners, inner zoom and reveal length

• Staggered intro and accessible reload button

• Reduced-motion and static-renderer handling

• React/Framer runtime, no added animation library or font dependency

Includes Connected Grid only: versioned component link, TSX source, setup guide, two customisation prompts, commercial licence and update policy. The demo’s Library navigation is not bundled. No full website Remix or other components.

The baby images are demonstration visuals only. Replace them before publishing or marketing with your own landscape photographs and ensure you hold the necessary usage rights. Images use 3:2 cover cropping. No lightbox, image links or direct CMS integration.

One project per purchase. Framer plans and AI services are separate.

Demo: https://alwebmotion.framer.website/components/connected-grid

Support: alexejluft@alwebdesignstudio.com