Ramp Gallery

A Framer component for project and product cards. The cards sit on a ramp: the one in the middle is level and full size, the rest step away from it, each a little smaller and softer, and the whole line loops so the last card leads straight back to the first. Tilt the ramp to any angle and the title moves to the free side by itself.

Live preview: https://rampgallery.framer.website

How it behaves

• Drifts on its own at a steady pace and stops while the pointer rests on a card.

• A trackpad or mouse wheel over the ramp glides it, then it drifts on again.

• Drag in any direction: the movement follows the ramp and keeps its momentum.

• Click a side card to bring it to the middle; click the middle card to open its link.

• Arrow keys step through the cards. On touch, drag with a finger.

What you can change

• Image, title, type, price and link for every card

• Angle and spacing of the ramp

• Card size, corner radius, shrink, fade, visible cards and shadow

• Hover effect: Tilt, Focus, Zoom or none

• Title layout: Corners, Index, Caption or Column

• Speed, direction, pause on hover, snap and ease

• Wheel on or off, wheel speed, drag friction and link click behavior

• Five colors and four fonts

• Heading, counter, arrows and price on or off

What you get

• The Ramp Gallery component for Framer

• An install guide and the license

Good to know

• Links open with your site's page transition, CMS detail pages included.

• On tablet and phone the title moves under the ramp by itself.

• With reduced motion on, the ramp stays still.

• Motion doesn't play on the Framer canvas; use Preview to see it move.

• Works best with five or more cards.

Questions or help: husanjontiu@gmail.com