Arch Image Gallery — Cinematic infinite scroll gallery

Arch Image Gallery is an auto-scrolling image carousel with elegant arch-shaped cards. Images scroll seamlessly in an infinite loop with smooth diffused edges, creating a sophisticated gallery effect.

What It Is

A professional infinite-scrolling image gallery that creates a unique visual experience where arch-shaped cards continuously glide across the screen. Unlike traditional carousels or sliders, this component features alternating curved cards with soft fade edges, adding depth and visual polish to your designs. Perfect for portfolios, media showcases, and featured content.

Features

• Infinite Seamless Loop: Cards scroll continuously with no visible jump or stutter

• Arch-Shaped Cards: Alternating curved corners create a distinctive, editorial look

• Diffused Fade Edges: Smooth gradient mask on left and right for a polished appearance

• Adjustable Speed: Control scroll speed from slow and ambient to fast and dynamic

• Responsive Layout: Auto-sizes cards based on container width with cards-per-view control

• 6 Controls: Complete customization without code

What You Get

• Production-ready Framer component

• Native Framer property controls (no code files needed)

• Responsive design with flexible layout

• Smooth, performant animation

• Professional default styling

Setup

1. Add component to your canvas

2. Add images to the card slots (up to 10)

3. Adjust speed, gap, and arch radius to your liking

4. Customize fade width for softer or sharper edges

5. Done!

Key Settings

Layout:

• Cards Per View: Number of visible cards (1–8)

• Card Height: Height of all cards (150–600px)

• Gap: Space between cards (0–50px)

• Arch Radius: Curvature of the alternating card corners (20–200px)

Animation:

• Speed: Scroll speed from slow to fast (1–100)

• Smooth linear motion with seamless looping

Styling:

• Fade Width: Control how much the left and right edges diffuse (0–50%)

Use Cases

• Portfolio showcases and photography galleries

• Hero section image bands

• Product image carousels

• Agency and creative landing pages

• Testimonial or team photo scrollers

• Background visual content behind CTAs

• Blog post or case study image highlights

• Tech, SaaS, or startup landing pages

Best Practices

• Use 4–6 images for a balanced, continuous feel

• Images with consistent color palettes look most polished

• Speed of 40–60 works well for most designs

• Fade width of 8–15% creates a subtle, professional edge

• Arch radius of 80–120px gives the best curved card shape

• Works beautifully on both light and dark backgrounds