Steps Sections

A collection of beautiful, animated steps/process section blocks for your websites. Perfect for showcasing workflows, onboarding processes, and how-it-works sections. Built with Framer Motion for smooth animations.

Vertical Timeline

A classic vertical timeline design with alternating cards and animated connecting line.

Features:

• Alternating left/right layout
• Vertical gradient connecting line
• Animated icon badges with glow
• Color-coded step indicators
• Staggered entrance animations
• CTA button at bottom

Horizontal Cards

Horizontal numbered cards with icon badges and connecting lines.

Features:

• 4-column responsive grid
• Large numbered watermarks
• Icon rotation on hover
• Animated connector lines
• Card hover lift effect
• Clean minimal design

Gradient Background

Dark themed steps with animated gradient orbs and stats section.

Features:

• Animated gradient orbs background
• Grid pattern overlay
• Status badge animation
• Glow effect on hover
• Stats section at bottom
• Glass-morphism cards

Minimal Design

Clean, typography-focused steps with circular number badges.

Features:

• Circular number badges
• Arrow connectors between steps
• Hover color transitions
• Animated divider line
• CTA row at bottom
• Light/dark mode support

Icon Cards

Colorful icon cards with step numbers and progress indicators.

Features:

• Color-coded icon cards
• Step number badges
• Progress dot indicators
• Connection line (desktop)
• Icon hover animation
• Gradient CTA banner

Zigzag Layout

Alternating image and content layout with learn more links.

Features:

• Alternating image/content layout
• Large step number overlays
• Real image placeholders
• Learn more animated arrows
• Scroll down indicator
• Badge header

Usage

All steps sections are built with React and Framer Motion. Install the required dependencies:

npm install framer-motion lucide-react

Import and use any steps section:

import StepsVertical from '@/components/blocks/steps/steps-vertical';

export default function HowItWorksPage() {
  return (
    <main>
      <StepsVertical />
    </main>
  );
}

Customization

Each steps section is fully customizable:

• Steps Data: Update step titles, descriptions, and icons
• Colors: Modify gradient and accent colors
• Icons: Swap Lucide icons for your preferred icons
• Images: Replace placeholder images (zigzag variant)
• Animations: Adjust timing and effects in Framer Motion props
• Layout: Change number of steps or grid columns

Steps Section Comparison

Use Cases

• Onboarding: Guide new users through setup
• How It Works: Explain product/service process
• Getting Started: Quick start documentation
• Checkout Flow: E-commerce purchase steps
• Timeline: Company history or milestones
• Tutorials: Step-by-step instructions

Tips

1. Keep It Simple: 3-5 steps is ideal for user comprehension
2. Clear Titles: Use action-oriented step titles
3. Icons: Choose icons that clearly represent each step
4. Mobile First: All variants stack properly on mobile
5. Animations: Viewport-based animations trigger as users scroll
6. CTAs: Include a clear call-to-action after the final step