Components/AI
Animated Process List Lovable
Animated process list with icons and progressive reveal, inspired by lovable design
Spinning up preview...
Analyzing the question and determining the most relevant approach for a comprehensive solution based on user intent and context.
Researching sources across multiple trusted databases and aggregating the most up-to-date information for accuracy.
Synthesizing information from various references to create a clear, concise, and actionable response tailored to your needs.
Verifying the answer for consistency, factual correctness, and alignment with best practices in the relevant domain.
Displaying the answer in a user-friendly format, ensuring readability and accessibility for all users.
Providing helpful suggestions and additional resources to further enhance your understanding and support your next steps.
Collecting feedback to continuously improve the quality and relevance of future responses for all users.
Example
export default function AnimatedProcessListExample() {
const [isAnimating, setIsAnimating] = useState(false)
const [animationSpeed, setAnimationSpeed] = useState<'slow' | 'normal' | 'fast'>('normal')
const handleAnimationEnd = () => {
console.log('Animation completed')
setIsAnimating(false)
}
const handleStartAnimation = () => {
setIsAnimating(true)
}
return (
<div className="space-y-6">
<div className="flex gap-4 items-center">
<button
onClick={handleStartAnimation}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Start Animation
</button>
<select
value={animationSpeed}
onChange={(e) => setAnimationSpeed(e.target.value as 'slow' | 'normal' | 'fast')}
className="px-3 py-2 border rounded-lg"
>
<option value="slow">Slow</option>
<option value="normal">Normal</option>
<option value="fast">Fast</option>
</select>
</div>
<AnimatedProcessList_Lovable
title="Processing your request..."
lines={[
{
icon: <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />,
content: "Analyzing user input and context requirements",
},
{
icon: <Settings className="w-5 h-5 text-blue-600 dark:text-blue-400" />,
content: "Configuring system parameters and preferences",
},
{
icon: <FileText className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
content: "Gathering relevant data and documentation",
},
{
icon: <Paintbrush className="w-5 h-5 text-pink-600 dark:text-pink-400" />,
content: "Applying custom styling and branding",
},
{
icon: <Sparkles className="w-5 h-5 text-purple-600 dark:text-purple-400" />,
content: "Generating personalized recommendations",
},
{
icon: <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />,
content: "Optimizing for dark mode and accessibility",
},
{
icon: <Gauge className="w-5 h-5 text-orange-600 dark:text-orange-400" />,
content: "Finalizing performance optimizations",
},
]}
animationSpeed={animationSpeed}
onAnimationEnd={handleAnimationEnd}
scrollDirection="up"
skeletonDuration={1500}
lineRevealDelay={200}
className="w-full max-w-lg"
/>
</div>
)
}Documentation
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Spinning up preview..." | Title displayed at the top of the component |
lines | ProcessLine[] | defaultLines | Array of line items with icons and content |
className | string | undefined | Additional CSS classes for styling |
scrollDirection | "up" | "down" | "up" | Direction of the scrolling animation |
animationSpeed | "slow" | "normal" | "fast" | "normal" | Speed of the animation |
onAnimationEnd | () => void | undefined | Callback when the reveal animation ends |
skeletonDuration | number | 2000 | Duration in milliseconds of the skeleton phase |
lineRevealDelay | number | 150 | Delay in milliseconds between each line reveal |
stepIcons | React.ReactNode[] | defaultStepIcons | Custom icons for each step |
Types
interface ProcessLine {
icon: React.ReactNode
content: string
}
interface AnimatedProcessList_LovableProps {
title?: string
lines?: ProcessLine[]
className?: string
scrollDirection?: "up" | "down"
animationSpeed?: "slow" | "normal" | "fast"
onAnimationEnd?: () => void
skeletonDuration?: number
lineRevealDelay?: number
stepIcons?: React.ReactNode[]
}Features
- Progressive Reveal Animation: Lines appear one by one with smooth fade-in effects
- Customizable Icons: Support for custom icons for each process step
- Flexible Animation Speed: Three speed options (slow, normal, fast) for different use cases
- Scroll Direction Control: Choose between upward or downward scrolling animation
- Skeleton Loading Phase: Initial loading state with customizable duration
- Responsive Design: Adapts to different screen sizes with proper scaling
- Dark Mode Support: Full dark mode compatibility with appropriate color schemes
- Accessibility Focused: Screen reader friendly with proper semantic structure