Three steps staggered down a diagonal, joined by a dashed curve that a glowing pulse travels along. Each card lights up as the pulse arrives, with the heading tucked into the empty top corner and stats in the opposite one.
Tidewater · how it works
No pipelines to babysit. Set it up once over coffee and every tool your team uses stays in step.
Authorize Postgres, Stripe and HubSpot in a few clicks. Credentials stay encrypted in your own region.
Tidewater suggests matches between schemas. Accept, tweak or write a transform in plain SQL.
Rows stream to every destination within seconds, with retries, ordering and a full replay log.
npx shadcn@latest add https://hyperblur.dev/r/features-diagonal-flow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-diagonal-flow.tsx.
import { FeaturesDiagonalFlow } from "@/components/hyperblur/features-diagonal-flow"
<FeaturesDiagonalFlow duration={9} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Tidewater · how it works" | Label above the heading. |
| title | string | "Three moves from scattered data to one source of truth" | Section heading. |
| subtitle | string | "No pipelines to babysit..." | Paragraph under the heading. |
| steps | { title: string; body: string; meta: string }[] | 3 steps | The three steps (only the first three are shown). Each has its own animated illustration. |
| footnote | { value: string; label: string }[] | 2 stats | Stats in the bottom-left corner. |
| cta | { label: string; href: string } | null | { label: "Start a free sync", href: "#" } | Button next to the stats. |
| accent | string | "#22d3ee" | Accent for the pulse, numbers and illustrations. |
| duration | number | 9 | Seconds for the pulse to travel the whole path. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |