React components
Customer journey
A stacked card animation representing stages of a customer journey.
Overview
The CustomerJourney component displays a series of cards (Retain, Evaluate, Discover) that stack and animate to visualize a workflow or journey. It uses a "wave" animation effect to draw attention.
Usage
import { CustomerJourney } from '@/components/core/features/customer-journey';
function Features() {
return <CustomerJourney />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data? | StackedCardProps[] | defaultData | Array of card data objects. |
idleTime? | number | 900 | Delay before animation starts. |
waveCount? | number | 3 | Number of wave animations to perform. |
waveDelay? | number | 2000 | Delay between wave cycles. |
className? | string | - | Optional CSS class names. |
Data Interface
interface StackedCardProps {
title: string;
icon: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
iconClassName?: string;
content: React.ReactNode;
originalY: number;
}