Scroll Curve 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 scroll curve.

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 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. 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

Connected process steps with scrollcurve