proNew152 lines · framer-motion
Agent Workflow
Five small steps, every single run. A full-width feature section with a horizontal node pipeline: a travelling pulse flows through each step on a loop, briefly flashing the node it passes, inside a horizontally scrollable track so narrow viewports never overflow the page.
- Use it for
- An agent, automation or pipeline product page that wants to show the steps behind a single run without a static diagram image.
- Themes
- Light + dark
- License
- Commercial use
Live
Under the hood
Five small steps, every single run
The same pipeline runs quietly behind every task.
- 1
Plan
Breaks the goal into steps
- 2
Retrieve
Pulls in the context it needs
- 3
Act
Calls the right tool
- 4
Verify
Checks the result
- 5
Report
Hands back a clean summary
tsx
"use client";
import * as React from "react";
import { motion, useInView, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";
function useReducedMotionSafe() {
const prefersReduced = useReducedMotion();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => setMounted(true), []);
return mounted ? !!prefersReduced : false;
}
/**
* Full-width feature section: a horizontal node pipeline with a travelling pulse
* flowing through each step on a loop, briefly lighting up the node it passes. Sits
* in a horizontally scrollable track so narrow viewports never overflow the page.
*/
export interface WorkflowStep {
id: string;
label: string;The rest is in Pro.
Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.
Get ProHow it behaves
- →Step positions are computed from fixed node width and gap constants, so the pipeline lays out correctly for any number of steps with no measurement step.
- →A small glowing pulse travels left to right across the whole pipeline on a loop, fading in at the first node and out at the last; each node's border briefly lights up in sync with the pulse reaching it.
- →loop, when off, runs the pulse once the section scrolls into view instead of looping forever; speed scales how fast it travels.
- →The pipeline sits in its own horizontally scrollable track, so on narrow viewports the diagram scrolls internally instead of ever widening the page.
- →prefers-reduced-motion keeps the pipeline static with no travelling pulse or node flashes.
Accessibility
- ✓The connecting line and pulse are aria-hidden; each node shows a real step number, label and short description in text.
- ✓Step order is conveyed by numbering and text, not by colour or motion alone.
- ✓Honours prefers-reduced-motion.