---
title: "Scroll Curve Cards — Framer component · Best of Framer"
description: "$8.00 · Framer component · by J S · Cards. How to Use the Scroll Curve Cards Component This component creates a connected step-by-step process layout with alternating cards and a dynamic…"
canonical: "https://framer.elliotli.dev/component/scroll-curve-cards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Scroll Curve Cards

# Scroll Curve Cards

Connected process steps with scrollcurve

[View on Framer](https://framer.com/marketplace/components/scroll-curve-cards/?via=elliot-li)

![Scroll Curve Cards preview image 1](https://framer.elliotli.dev/og/component/scroll-curve-cards/17aa74a93d32a9e6/1600x1200.jpg)

## Summary

How to Use the Scroll Curve Cards Component This component creates a connected step-by-step process layout with alternating cards and a dynamic scroll curve.

## Description

## How to Use the Scroll Curve Cards Component

This component creates a connected step-by-step process layout with alternating cards and a dynamic scroll curve. It is designed for Framer sites and supports fully editable content, styling, and layout.

### Adding Steps

1.  Select the main **Scroll Curve Cards** component.
    
2.  Inside the cards stack, duplicate a **Card** wrapper to add a new step.
    
3.  Edit the card properties:
    
    -   Step number
        
    -   Title
        
    -   Description
        
4.  The curve and spacing automatically adapt to the new step.
    

### Editing Content

Each card exposes:

-   Step number
    
-   Title text
    
-   Description text
    
-   Card colors
    
-   Number badge colors
    

You can customize each step independently or apply shared colors from the main component.

### Customizing Colors

The main component controls shared styling:

-   Card background
    
-   Card hover color
    
-   Number badge fill
    
-   Number text color
    
-   Hover number colors
    
-   Scroll curve colors
    

This allows consistent styling across all steps.

### Adjusting Layout

The section spacing and curve flow are controlled by the layout stack and curve settings:

-   Duplicate or remove cards to change step count
    
-   Adjust vertical spacing between cards
    
-   Modify curve width and waves in the curve component
    
-   Layout automatically alternates card alignment
    

### Responsive Behavior

The component includes desktop, tablet, and mobile variants.Cards and curve automatically adapt across breakpoints.

### Best Use Cases

-   How-it-works sections
    
-   Process steps
    
-   Timelines
    
-   Feature walkthroughs
    
-   Storytelling layouts
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7080

## Details

- **Author**: J S
- **Price**: $8.00
- **Published**: 2026-02-20
- **Updated**: 2026-03-23
- **Added**: 2026-02-17
- **Categories**: Cards

## More like this

-   [AlumniDestinations](/component/alumnidestinations) — Dulaj Design · $15 — About AlumniDestinations adds a professional, interactive directory to your Framer projects, specifically designed to showcase the success…
-   [AIJobCards](/component/aijobcards) — Dulaj Design · $15 — Beautiful interactive career grids
-   [Editorial Image Card](/component/editorial-image-card) — Victoriia Topalova · Free — Beautiful image cards for lifestyl
-   [Zipper Card](/component/zipper-card) — Aslı Ay · $12 — A padded card you unzip by hand.