Advanced AI Prompt for Framer Motion Multi-Step Scroll Timelines

Engineer a complex scroll-driven timeline component in React. Using a single useScroll hook, define a sequence of animations based on the [STEPS_JSON] configuration. Each step should trigger different properties (opacity, scale, x, y) at specific [INTERPOLATION_POINTS] (e.g., 0, 0.2, 0.5, 0.8, 1). The layout should be [TIMELINE_DIRECTION]. Create a robust logic to handle multiple elements animating in and out of the viewport. Use useTransform with an array of input and output ranges to coordinate complex movement. Provide a clear separation between the data-driven config and the rendering logic.