Data Pipeline
Visualize a 3-to-3 data flow with animated, gradient-driven connections—fully responsive, icon-customizable, and ready for any Framer project.
Make it with Workshop
Build your own component with AI
About this Component
The Six-Node Data Pipeline is a powerful Framer component designed to illustrate complex workflows by linking three source “pills” on the left to three target “pills” on the right. Whether you’re mapping IoT streams, AI inference paths, or analytics dashboards, this component delivers a sleek, interactive diagram that’s easy to customize and embed.
Key Features
3 Inputs → 3 Outputs: Six pill nodes with drag-and-drop icon support plus a central core icon.
Smooth Animated Curves: Bezier paths with adjustable bend, dash pattern, particle effects, speed, and staggered intro.
Custom Labels & Icons: Rename any node via the property panel and assign your own ComponentInstance icons (left1–3, right1–3, center).
Gradient & Grid Controls: Tweak start/end colors, outer/inner opacities, toggle a subtle background grid.
Responsive by Design: Auto-collapse into a single-branch view below your chosen breakpoint; uses ResizeObserver + clamp for fluid resizing.
Accessibility & Performance: Honors prefers-reduced-motion, renders only when in-view, and ships with a static-renderer fallback.
Framer-Ready: Intrinsic size 1200×420 (flexible width), full suite of property controls, and seamless integration into any Framer layout.
Use Six-Node Data Pipeline to quickly convey data architectures, real-time inference flows, or multi-source analytics in a visually engaging way—no extra code required!
