"use client";
import * as React from "react";
import { AnimatePresence, motion, useInView, useReducedMotion, useScroll, useSpring } from "motion/react";
import {
BarChart3,
Check,
CreditCard,
Database,
FileText,
GitBranch,
Loader2,
Mail,
PlugZap,
Rocket,
Zap,
type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
export interface StickyStep {
icon: LucideIcon;
title: string;
description: string;
/** Visual shown in the sticky panel while this step is active. Defaults to a built-in illustration. */
visual?: React.ReactNode;
/** Accent colour (hex) for the glow behind the visual. */
accent?: string;
}
export interface FeaturesStickyScrollProps {
eyebrow?: string;
title?: React.ReactNode;
description?: string;
steps?: StickyStep[];
className?: string;
}
const DEFAULT_STEPS: StickyStep[] = [
{
icon: PlugZap,
title: "Connect every source",
description: "Plug in your database, billing, inbox and docs in a couple of clicks. Data syncs continuously, with schemas mapped for you.",
visual: <ConnectVisual />,
accent: "#8b5cf6",
},
{
icon: GitBranch,
title: "Design the flow",
description: "Drag triggers, conditions and actions onto a canvas. Branches, delays and retries are first-class — no scripting required.",
visual: <FlowVisual />,
accent: "#0ea5e9",
},
{
icon: Rocket,
title: "Run it on autopilot",
description: "Workflows execute on a resilient runtime with live logs. Failed steps retry automatically and page you only when it matters.",
visual: <RunsVisual />,
accent: "#10b981",
},
{
icon: BarChart3,
title: "Measure the impact",
description: "See hours saved, revenue influenced and error rates per workflow, then double down on what moves the needle.",
visual: <ImpactVisual />,
accent: "#f59e0b",
},
];
const EASE = [0.22, 1, 0.36, 1] as const;
export function FeaturesStickyScroll({
eyebrow = "How it works",
title = "From scattered tools to one calm pipeline",
description = "Four steps, zero glue code. Scroll to see how a workflow comes together.",
steps = DEFAULT_STEPS,
className,
}: FeaturesStickyScrollProps) {
const [active, setActive] = React.useState(0);
const listRef = React.useRef<HTMLOListElement>(null);
const reduce = useReducedMotion();
const { scrollYProgress } = useScroll({ target: listRef, offset: ["start center", "end center"] });
const fill = useSpring(scrollYProgress, { stiffness: 140, damping: 30, mass: 0.4 });
React.useEffect(() => {
const list = listRef.current;
if (!list) return;
const items = Array.from(list.querySelectorAll<HTMLElement>("[data-step]"));
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
const i = Number((e.target as HTMLElement).dataset.step);
setActive(i);
}
},
{ rootMargin: "-50% 0px -50% 0px" },
);
items.forEach((el) => io.observe(el));
return () => io.disconnect();
}, [steps.length]);
const current = steps[active] ?? steps[0];
return (
<section className={cn("relative w-full bg-background py-20 sm:py-24", className)}>
<div className="mx-auto max-w-6xl px-4 sm:px-6">
<div className="max-w-2xl">
<p className="text-sm font-medium text-primary">{eyebrow}</p>
<h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl lg:text-5xl lg:leading-[1.05]">
{title}
</h2>
<p className="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{description}</p>
</div>
<div className="mt-12 grid gap-10 lg:mt-4 lg:grid-cols-2 lg:gap-16">
{/* Steps */}
<div className="relative">
{/* progress rail */}
<div aria-hidden className="absolute bottom-8 left-[19px] top-8 w-px bg-border lg:bottom-[22vh]">
<motion.div style={{ scaleY: fill }} className="h-full w-full origin-top bg-gradient-to-b from-primary to-primary/40" />
</div>
<ol ref={listRef} className="relative">
{steps.map((s, i) => {
const Icon = s.icon;
const isActive = i === active;
return (
<li
key={s.title}
data-step={i}
aria-current={isActive ? "step" : undefined}
className="flex min-h-[auto] py-8 lg:min-h-[44vh] lg:items-center lg:py-0 lg:last:mb-[22vh]"
>
<div className="flex w-full gap-5">
<div
className={cn(
"relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border bg-background transition-all duration-500",
isActive ? "border-primary text-primary shadow-[0_0_0_6px] shadow-primary/10" : "text-muted-foreground",
)}
>
<Icon className="size-4" aria-hidden />
</div>
<div
className={cn(
"min-w-0 flex-1 transition-opacity duration-500",
isActive ? "opacity-100" : "opacity-100 lg:opacity-35",
)}
>
<p className="font-mono text-xs text-muted-foreground">
{String(i + 1).padStart(2, "0")} / {String(steps.length).padStart(2, "0")}
</p>
<h3 className="mt-1.5 text-xl font-semibold tracking-tight text-foreground sm:text-2xl">{s.title}</h3>
<p className="mt-2 max-w-md text-pretty text-sm leading-relaxed text-muted-foreground sm:text-base">
{s.description}
</p>
{/* inline visual on small screens */}
<div className="mt-6 lg:hidden">
<RevealWhenVisible accent={s.accent}>{s.visual ?? <FallbackVisual icon={Icon} />}</RevealWhenVisible>
</div>
</div>
</div>
</li>
);
})}
</ol>
</div>
{/* Sticky visual */}
<div className="hidden lg:block">
<div className="sticky top-[calc(50vh-220px)] h-[440px]">
<VisualFrame accent={current?.accent} className="h-full">
<AnimatePresence initial={false}>
<motion.div
key={active}
initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.94, filter: "blur(10px)", y: 16 }}
animate={{ opacity: 1, scale: 1, filter: "blur(0px)", y: 0 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 1.04, filter: "blur(10px)", y: -16 }}
transition={{ duration: 0.55, ease: EASE }}
className="absolute inset-0 flex items-center justify-center p-8"
>
{current?.visual ?? <FallbackVisual icon={current?.icon ?? Zap} />}
</motion.div>
</AnimatePresence>
{/* step dots */}
<div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-1.5" aria-hidden>
{steps.map((s, i) => (
<span
key={s.title}
className={cn("h-1.5 rounded-full transition-all duration-500", i === active ? "w-6 bg-foreground" : "w-1.5 bg-foreground/20")}
/>
))}
</div>
</VisualFrame>
</div>
</div>
</div>
</div>
</section>
);
}
function VisualFrame({ accent = "#8b5cf6", className, children }: { accent?: string; className?: string; children: React.ReactNode }) {
return (
<div className={cn("relative isolate min-h-[280px] overflow-hidden rounded-3xl border bg-card shadow-sm", className)}>
<motion.div
aria-hidden
className="absolute -left-1/4 -top-1/3 -z-10 size-[80%] rounded-full opacity-25 blur-3xl dark:opacity-20"
animate={{ backgroundColor: accent }}
transition={{ duration: 0.8 }}
/>
<motion.div
aria-hidden
className="absolute -bottom-1/3 -right-1/4 -z-10 size-[70%] rounded-full opacity-15 blur-3xl dark:opacity-20"
animate={{ backgroundColor: accent }}
transition={{ duration: 0.8, delay: 0.1 }}
/>
<div
aria-hidden
className="absolute inset-0 -z-10 opacity-50 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:32px_32px] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"
/>
<div className="relative flex h-full min-h-[280px] items-center justify-center p-6">{children}</div>
</div>
);
}
/** Mounts the visual only once it scrolls into view so its entrance animation is actually seen. */
function RevealWhenVisible({ accent, children }: { accent?: string; children: React.ReactNode }) {
const ref = React.useRef<HTMLDivElement>(null);
const seen = useInView(ref, { once: true, amount: 0.35 });
return (
<div ref={ref}>
<VisualFrame accent={accent}>{seen ? children : null}</VisualFrame>
</div>
);
}
function FallbackVisual({ icon: Icon }: { icon: LucideIcon }) {
return (
<div className="flex size-24 items-center justify-center rounded-3xl border bg-background shadow-lg">
<Icon className="size-10 text-primary" />
</div>
);
}
/* ---------- Built-in illustrations (pure HTML/SVG) ---------- */
function Chip({ icon: Icon, label, className, delay = 0 }: { icon: LucideIcon; label: string; className?: string; delay?: number }) {
return (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay, duration: 0.45, ease: EASE }}
className={cn("flex items-center gap-2 whitespace-nowrap rounded-xl border bg-background px-2.5 py-2 text-xs font-medium text-foreground shadow-md", className)}
>
<span className="flex size-6 items-center justify-center rounded-md bg-muted">
<Icon className="size-3.5" aria-hidden />
</span>
{label}
</motion.div>
);
}
export function ConnectVisual() {
const nodes = [
{ x: 70, y: 60, icon: Database, label: "Postgres" },
{ x: 330, y: 60, icon: Mail, label: "Inbox" },
{ x: 70, y: 240, icon: CreditCard, label: "Billing" },
{ x: 330, y: 240, icon: FileText, label: "Docs" },
];
return (
<div className="relative aspect-[4/3] w-full max-w-[420px]" aria-hidden>
<svg viewBox="0 0 400 300" className="absolute inset-0 size-full">
{nodes.map((n, i) => (
<g key={n.label}>
<path d={`M${n.x} ${n.y} C ${n.x} 150, 200 ${n.y}, 200 150`} fill="none" stroke="var(--border)" strokeWidth="2" />
<motion.path
d={`M${n.x} ${n.y} C ${n.x} 150, 200 ${n.y}, 200 150`}
fill="none"
stroke="var(--primary)"
strokeWidth="2"
strokeLinecap="round"
strokeDasharray="6 10"
initial={{ opacity: 0, strokeDashoffset: 0 }}
animate={{ opacity: 1, strokeDashoffset: -64 }}
transition={{
opacity: { delay: 0.2 + i * 0.12, duration: 0.6 },
strokeDashoffset: { repeat: Infinity, ease: "linear", duration: 1.6 },
}}
/>
</g>
))}
</svg>
{nodes.map((n, i) => (
<div
key={n.label}
className="absolute -translate-x-1/2 -translate-y-1/2"
style={{ left: `${(n.x / 400) * 100}%`, top: `${(n.y / 300) * 100}%` }}
>
<Chip icon={n.icon} label={n.label} delay={0.1 + i * 0.1} />
</div>
))}
<motion.div
initial={{ scale: 0.6, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ delay: 0.5, type: "spring", stiffness: 260, damping: 18 }}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
>
<div className="relative flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white shadow-xl shadow-violet-500/30">
<motion.span
className="absolute inset-0 rounded-2xl border-2 border-violet-400"
animate={{ scale: [1, 1.5], opacity: [0.7, 0] }}
transition={{ repeat: Infinity, duration: 1.8, ease: "easeOut" }}
/>
<Zap className="size-7" fill="currentColor" />
</div>
</motion.div>
</div>
);
}
export function FlowVisual() {
const nodes = [
{ tag: "Trigger", label: "New order placed", tone: "bg-sky-500" },
{ tag: "Condition", label: "Order total > $150", tone: "bg-amber-500" },
{ tag: "Action", label: "Send VIP welcome email", tone: "bg-emerald-500" },
];
return (
<div className="flex w-full max-w-[320px] flex-col items-center" aria-hidden>
{nodes.map((n, i) => (
<React.Fragment key={n.label}>
{i > 0 && (
<div className="relative h-9 w-px bg-border">
<motion.span
className="absolute -left-[3px] top-0 size-[7px] rounded-full bg-primary"
animate={{ top: ["0%", "100%"], opacity: [0, 1, 0] }}
transition={{ repeat: Infinity, duration: 1.4, delay: i * 0.3, ease: "easeInOut" }}
/>
</div>
)}
<motion.div
initial={{ opacity: 0, y: 14 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.15 + i * 0.15, duration: 0.5, ease: EASE }}
className="w-full rounded-2xl border bg-background p-3.5 shadow-md"
>
<div className="flex items-center gap-2">
<span className={cn("size-2 rounded-full", n.tone)} />
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">{n.tag}</span>
</div>
<p className="mt-1.5 text-sm font-medium text-foreground">{n.label}</p>
</motion.div>
</React.Fragment>
))}
</div>
);
}
export function RunsVisual() {
const runs = [
{ name: "Sync customers", time: "1.2s" },
{ name: "Enrich leads", time: "3.8s" },
{ name: "Post to #sales", time: "0.4s" },
{ name: "Update CRM", time: "2.1s" },
];
const [done, setDone] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setDone((d) => (d >= runs.length + 2 ? 0 : d + 1)), 700);
return () => clearInterval(id);
}, [runs.length]);
return (
<div className="w-full max-w-[340px] rounded-2xl border bg-background p-4 shadow-lg" aria-hidden>
<div className="flex items-center justify-between">
<p className="text-sm font-semibold text-foreground">Live runs</p>
<span className="flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
<span className="size-1.5 animate-pulse rounded-full bg-emerald-500" /> Healthy
</span>
</div>
<ul className="mt-3 space-y-2">
{runs.map((r, i) => {
const ok = i < done;
return (
<motion.li
key={r.name}
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.08 }}
className="flex items-center gap-3 rounded-xl border bg-card px-3 py-2"
>
<span className={cn("flex size-5 items-center justify-center rounded-full", ok ? "bg-emerald-500 text-white" : "text-muted-foreground")}>
{ok ? <Check className="size-3" strokeWidth={3} /> : <Loader2 className="size-4 animate-spin" />}
</span>
<span className="flex-1 truncate text-sm text-foreground">{r.name}</span>
<span className="font-mono text-xs text-muted-foreground">{ok ? r.time : "…"}</span>
</motion.li>
);
})}
</ul>
<div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
<motion.div
className="h-full rounded-full bg-emerald-500"
animate={{ width: `${Math.min(done, runs.length) * (100 / runs.length)}%` }}
transition={{ duration: 0.4 }}
/>
</div>
</div>
);
}
export function ImpactVisual() {
const bars = [38, 52, 44, 61, 58, 74, 88];
return (
<div className="w-full max-w-[360px] rounded-2xl border bg-background p-5 shadow-lg" aria-hidden>
<div className="flex items-end justify-between">
<div>
<p className="text-xs text-muted-foreground">Hours saved / week</p>
<p className="mt-1 text-3xl font-semibold tracking-tight text-foreground">126</p>
</div>
<span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-semibold text-amber-600 dark:text-amber-400">+38%</span>
</div>
<div className="mt-5 flex h-32 items-end gap-2">
{bars.map((b, i) => (
<motion.div
key={i}
className={cn("flex-1 rounded-t-md", i === bars.length - 1 ? "bg-gradient-to-t from-amber-500 to-orange-400" : "bg-muted-foreground/20")}
initial={{ height: 0 }}
animate={{ height: `${b}%` }}
transition={{ delay: 0.1 + i * 0.06, duration: 0.6, ease: EASE }}
/>
))}
</div>
<div className="mt-2 flex justify-between font-mono text-[10px] text-muted-foreground">
{["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
<span key={i} className="flex-1 text-center">
{d}
</span>
))}
</div>
</div>
);
}
