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-motion

Copy 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 card

Copy and paste the dot code into your project.

API Reference

Props

PropTypeDescription
titlestringWorkflow header.
describtionstringWorkflow description.
pathLengthsMotionValueframer-motion MotionValue
Screen Scro...Animated Bu...