Docs
Workflow Animation
Workflow Animation
You can see the workflow with scrolling
Build with BuouUI
Scroll this component and see the workflow!
Logic
Input
logic was resolved to TRUE
Input
logic was resolved to FAIL
Input
2500
Request
https://api.example.com/v1/data
Output
2500
Output
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Install the shadcn/ui dependencies:
You need to install shadcn components, like this:
npx shadcn@latest add cardCopy and paste the dot code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| title | string | Workflow header. |
| describtion | string | Workflow description. |
| pathLengths | MotionValue | framer-motion MotionValue |