Animated Sankey

Installation

Mechanics

This component blends HTML DOM nodes with an underlying SVG Canvas:

1. DOM Nodes: The columns of boxes are standard flexbox HTML elements, allowing for easy responsive design and rich content inside the nodes.
2. SVG Ribbons: The connections between nodes are drawn using SVG cubic bezier paths (d="M x1 y1 C x2 y2, x3 y3, x4 y4"). The vectorEffect="non-scaling-stroke" property ensures the paths scale responsively when the container shrinks without the stroke width becoming distorted.
3. Animated Packets: Using Framer Motion, we animate a secondary stroke path over the ribbons. By animating pathLength and pathOffset, we create the illusion of glowing data packets traveling along the conversion funnel.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AnimatedSankey } from "@/components/creative/animated-sankey";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AnimatedSankey } from "@/components/creative/animated-sankey";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AnimatedSankey
      />
    </div>
  );
}