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

It 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, and it carries on drifting once you let go. Drag in any direction: the movement follows the ramp and keeps its momentum. Click a side card and it comes to the middle the short way round; 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: Tilt, Focus, Zoom or none Layout of the title: Corners, Index, Caption or Column Speed, direction, pause on hover, snap and ease Wheel on or off, wheel speed, drag friction, and whether side cards open their link on the first click Five colors and four fonts, plus heading, counter, arrows and price on or off

What you get

The Ramp Gallery component link for Framer, an install guide and the license, right after purchase.

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.