Variations
Different curves, different rhythms, one flexible gallery system.
Interactive playground
Fine-tune the curve, spacing, perspective, and movement. See every change in real time.
Use cases
From architecture to product design, Curved Gallery adapts to your creative vision.
Architecture
Showcase spaces with depth and atmosphere.
Photography
Sequence portraits into a visual story.
Product design
Highlight form and detail from every angle.
Interior design
Walk visitors through rooms and materials.
Digital art
Turn experimental work into an exhibition.
Travel and landscapes
Bring coastlines to life, frame by frame.
How it works
A simple idea, executed with depth.
01
Arrange
Images are distributed along a configurable curve.
02
Interact
Dragging changes the gallery’s position and velocity.
03
Explore
Momentum, snapping and looping create a continuous experience.
Customization features
Control the geometry, motion and appearance to match your creative vision.
Curve geometry
From a subtle bend to a full wrap, set the arc in degrees.
Perspective and depth
Bring the camera closer for drama, or step back for calm.
Spacing and scale
Gaps, overlaps and centre emphasis, tuned independently.
Drag and momentum
Throw it. Velocity carries on, then a spring settles.
Infinite looping
No first or last slide, just a continuous flow.
Responsive layouts
Cards scale with the gallery’s width and always fit its height.
Image ratios
Any card width and height; photos fill with a clean crop.
Animation behavior
Spring stiffness and damping, an intro glide and optional autoplay.
Technical features
Flexible, considered and ready for your next project.
Responsive
Scales with its frame at every breakpoint.
Touch and mouse
Pointer events with capture and momentum.
Keyboard accessible
Arrow keys, Home and End when focused.
Configurable geometry
Ten presets plus fully custom values.
Smooth motion
Spring physics, painted once per frame.
Reduced motion
Respects the visitor’s system setting.
TypeScript
Typed props, written in TSX.
Framer ready
Property controls for every setting.
Documentation
Install it, configure it and make it yours in a few minutes.
1. Installation
Add the component to your Framer project.
- 01Copy the component URL you received with the component.
- 02Paste it onto the canvas of your Framer project (⌘V / Ctrl+V). Framer inserts the Curved Gallery.
- 03Give it a width and a fixed height, then choose a Preset in the properties panel.
FAQ
Everything about installing, shaping and using the gallery.
