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.
Select the main Scroll Curve Cards component.
Inside the cards stack, duplicate a Card wrapper to add a new step.
Edit the card properties:
Step number
Title
Description
The curve and spacing automatically adapt to the new step.
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.
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.
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
The component includes desktop, tablet, and mobile variants.Cards and curve automatically adapt across breakpoints.
How-it-works sections
Process steps
Timelines
Feature walkthroughs
Storytelling layouts