Interactive Pipeline

Installation

Mechanics

This component uses Framer Motion's useScroll and useTransform hooks.

1. Scroll Tracking: useScroll creates a MotionValue (scrollYProgress) ranging from 0 to 1 as the target container passes through the viewport.
2. Path Tracing: We map scrollYProgress directly to the scaleY CSS transform of an absolutely positioned vertical div to create the glowing pipe line.
3. Milestone Activation: Each milestone node has a hardcoded yPosition threshold. We use useTransform to convert the global scrollYProgress into boolean activation flags. When the line crosses the node's threshold, it triggers opacity, scale, and color spring animations.

Usage Guide

1. Import the Component

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

import { InteractivePipeline } from "@/components/creative/interactive-pipeline";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { InteractivePipeline } from "@/components/creative/interactive-pipeline";

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