Guide
Everything you need to add Curved Gallery to a Framer site, fill it with your images or CMS content, and shape it to your design.
Add it to any page in three steps. It works on every plan and needs no code.
Step 1
Copy the link
Copy the component URL from the Documentation section.
Step 2
Paste on the canvas
Paste it into any page. Framer adds Curved Gallery as a layer.
Step 3
Give it a size
Set Width to Fill and a fixed Height, about 560–660px on desktop.
Fill, or any fixed width. Cards scale with it.
Fixed. Cards always fit inside it, controls included.
Lower the height on tablet and phone, for example 540px and 470px.
Ten looks are built in. Choose one under Preset, or choose Custom to unlock every value in step 05.
01
Classic Curve
Balanced arc, gentle drop. A safe default.
02
Deep Curve
Strong wrap and rotation for drama.
03
Flat Panorama
Barely curved, landscape cards.
04
Compact Gallery
Small, tight cards that show many at once.
05
Cinematic Gallery
Large centre card, close camera, deep shadow.
06
Vertical Gallery
Scrolls up and down on a vertical arc.
07
Full-Bleed Gallery
Edge-to-edge panels with almost no gap.
08
Minimal Gallery
Wide spacing, no guides, soft motion.
09
Oversized Cards
Huge overlapping cards for hero sections.
10
Image Focus
Little dimming, so every photo reads clearly.
Use the Images list in the properties panel. Sample photos show until you add your own.
Add up to 24. Each has an image, its alt text, and an optional title used by screen readers.
0 shows every image once. A higher number repeats them, useful for a fuller ring with few photos.
Which image sits in the centre when the page loads.
Photos fill each card with a centred crop, so any ratio works. Set the card shape with Card Width and Height.
Drive the gallery from a CMS collection, so editors can add, remove and reorder images without touching the design.
1
Create a collection
Add an Image field, a Title text field and, optionally, a Link field. This project already has one, called Gallery.
2
Add a Collection List
Place it beside your page on the canvas. Inside the repeated item add a frame with the Image as its fill, a text bound to Title, and set the item’s link to the Link field.
3
Set Source to CMS
Select Curved Gallery and switch Source from Images to CMS.
4
Connect the list
Click the Collection slot and pick your Collection List. It stays hidden; only the gallery shows.
5
Filter, sort, limit
Use the Collection List’s own settings. The gallery follows its order and updates as items load.
How items become cards
The card photo. Its alt text comes along.
The card title, read out by screen readers.
Tapping the centre card opens it. Turn off with Open Links.
Choose Custom under Preset and every value below appears in the properties panel. Try them live in the playground first.
Geometry
Shape of the wall
Curve
Degrees of arc between cards.
Perspective
Camera distance. Lower is more dramatic.
Spacing
Gap between cards; negative overlaps.
Card Width / Height
Card size at a 1280px wide gallery.
Side Rotation
How far side cards turn.
Vertical Offset
How far side cards drop.
Center / Side Scale
Size of the centre card versus the rest.
Motion
How it moves
Drag Speed
Distance moved per pixel dragged.
Momentum
How far a fling carries.
Stiffness / Damping
The spring that settles each card.
Snap / Loop
Settle on a card; wrap around endlessly.
Autoplay
Seconds per slide, 0 to turn off.
Intro Glide / Trackpad
Entrance motion; sideways scrolling.
Appearance
How it looks
Radius
Card corner rounding.
Brightness
Exposure of every photo.
Side Shade
Dimming of cards away from the centre.
Shadow
Depth under each card.
Edge Fade
Fade into the background at the edges.
Guide Lines
Thin rims tracing the arc.
Interface
Controls and colour
Controls
Arrows, label and counter under the gallery.
Label / Counter
Text in the middle; 01 / 09 on the right.
Controls Inset
Side padding of the control row.
Background
Match the section so the edge fade blends.
Text / Muted / Lines
Colours of the controls and guides.
Font
Typeface for the label and counter.
Small settings that make a big difference.
Blend
Match the background
Set Background to your section colour so the edge fade disappears into it.
Breakpoints
Shorter on phones
A lower height per breakpoint keeps cards large and the counter clear.
Images
Use similar tones
Galleries read best when photos share a palette and exposure.
Access
Write alt text
Every card is announced with its title or alt. Keyboard arrows move the gallery.