---
id: "2112876620205985997"
source: https://x.com/kail_designs/status/2112876620205985997
author: "Kailash (@kail_designs)"
media: "photo, 3842x2086 (first of 4 media items)"
model: claude-opus-5-5
generated: 2026-10-22
---
# Integration Flow Lines with Data Pulses

## Summary
A product-marketing illustration showing third-party tools on the left feeding into a single point on the right through curved dotted paths. Short violet streaks travel along the paths like data packets, turning a static integrations list into a sense of live sync with almost no visual weight.

## Style
- Theme: light
- Mood: calm, technical, airy, precise
- Tags: integrations, data-flow, dotted-lines, lavender, saas-marketing, connectors, minimal
- Category: Features

## Palette
| Role | Hex |
|---|---|
| Background top | #FEFEFF |
| Background bottom (lavender wash) | #EBE9FB |
| Mid gradient | #F2F0FD |
| Dotted path | #C9C6E4 |
| Pulse streak | #6B5FD8 |
| Logo tile blue | #2F6FDB |
| Wordmark text | #111214 |
| Secondary slate | #39404B |

## Typography
- Wordmarks: geometric grotesk, medium weight, sentence case, about 9% of frame height. Closest free fonts: Inter (500) or Manrope (500).
- No body copy in the frame.

## Layout
- Wide 1.84:1 canvas (3842x2086). Logos sit in a left column at roughly 10% from the left edge, vertically spaced about 30% of the height apart.
- Each logo starts a path; paths fan out with gentle S-curves and converge on one point at the far right edge at mid-height.
- Background is a vertical gradient from near-white at the top to a soft lavender at the bottom.
- No cards, borders or shadows; depth comes only from the gradient.

## Elements
- Three placeholder integration marks stacked vertically (an icon tile with rounded 18% corners plus a wordmark).
- Dotted connector paths: 2px stroke, round caps, dash 2px gap 6px, color #C9C6E4.
- Pulse streaks: 4 to 5px wide, about 70px long, tapered at both ends with a soft gradient from transparent to #6B5FD8, each sitting on its path.
- Convergence point at the right edge (off-canvas), implying a destination product.

## Motion
Static image. Optional: animate each streak along its path with a 1600ms linear loop, staggered by 300ms per path, fading in over the first 15% and out over the last 15% of the path.

## Rebuild it
1. Build a full-width section with a `bg-gradient-to-b from-white to-[#EBE9FB]` background and a fixed aspect ratio of 1.84:1.
2. Place an absolutely positioned SVG over the section (`viewBox="0 0 1920 1043"`), with one cubic Bezier `path` per source logo ending at `x=1920, y=521`.
3. Style the paths with `stroke="#C9C6E4"`, `strokeWidth={2}`, `strokeDasharray="2 6"`, `strokeLinecap="round"`, `fill="none"`.
4. For each path, add a second path with the same `d`, a linear gradient stroke ending in #6B5FD8, `strokeDasharray="70 2000"`, and animate `strokeDashoffset` with Motion (`animate={{ strokeDashoffset: [0, -length] }}`, `transition={{ duration: 1.6, ease: "linear", repeat: Infinity, delay: i * 0.3 }}`).
5. Render the logos as a left column (`flex flex-col justify-between`) of icon tile plus wordmark, using neutral placeholder marks.
6. Respect `prefers-reduced-motion` by rendering the streaks at a fixed offset without animation.

## Generation prompt
A wide minimal SaaS illustration on a white-to-soft-lavender gradient background: three generic app logos stacked on the left, each connected by thin dotted grey-lilac curved lines that fan out and converge at a single point on the right edge; short glowing violet light streaks travel along the dotted lines like data packets; lots of negative space, crisp vector style, no text other than generic placeholder wordmarks.