Component Library

Production-ready UI components with 95+ active uses across the platform

Test 1: Border Beam Component

Animated gradient border effect. Perfect for highlighting active agents or important cards.

Default Colors

Orange to Purple gradient (default)

Animated border beam with default gradient colors. Duration: 12s

Primary Theme

Uses theme primary color

Themed gradient using our design system colors. Duration: 15s

Fast & Bold

Thicker border, faster animation

Border width: 2px, Duration: 8s (faster animation)

Usage Example:

<Card className="relative overflow-hidden">
  <BorderBeam
    size={250}
    duration={12}
    colorFrom="hsl(var(--primary))"
    colorTo="hsl(var(--chart-1))"
  />
  {/* Card content */}
</Card>

Test 2: Blur Fade Component

Scroll-triggered blur + fade animations. Creates professional reveals for content.

Content Marketing

AI-powered content creation with SEO optimization

Active Agent

Image Generation

Create stunning visuals with multiple AI models

Active Agent

Video Generation

Transform ideas into engaging video content

Active Agent

Workflow Steps Animation

Step 1: User provides content brief

Step 2: AI generates outline and structure

Step 3: Content creation with tone matching

Step 4: SEO optimization and keyword integration

Usage Example:

<BlurFade delay={0.2} duration={0.6} yOffset={20}>
  <Card>
    <CardHeader>
      <CardTitle>Agent Name</CardTitle>
    </CardHeader>
  </Card>
</BlurFade>

Test 3: Hero Video Dialog Component

Video modal with 8 animation styles. Perfect for agent tutorials and demos.

From Center Animation

Modal scales from center. Best for general demos.

From Bottom Animation

Modal slides up from bottom. Mobile-friendly animation.

Fade Animation

Simple fade in/out. Minimal distraction.

From Left Animation

Modal slides from left. Directional emphasis.

Usage Example:

<HeroVideoDialog
  animationStyle="from-center"
  videoSrc="https://youtube.com/embed/YOUR_VIDEO_ID"
  thumbnailSrc="/path/to/thumbnail.jpg"
  thumbnailAlt="Agent Demo Video"
/>

Available animations: from-center, from-bottom, from-top, from-left, from-right, fade, top-in-bottom-out, left-in-right-out

Phase 1 Complete ✅

3 high-value components extracted (249 lines total)

Components Extracted:

✅ Border Beam (49 lines) - Animated gradient borders
✅ Blur Fade (60 lines) - Scroll-triggered animations
✅ Hero Video Dialog (140 lines) - Video modals with 8 animation styles

Dependencies:

✅ framer-motion - Already installed
✅ lucide-react - Already installed
✅ No new dependencies needed

Ready to Integrate Into:

• Content Marketing agent page
• Image Generation agent page
• Video Generation agent page
• Voice Generation agent page

Integration Strategy

These components are now ready for integration into agent chat pages. Recommended usage:

Border Beam: Highlight active agents on dashboard, emphasize selected agents
Blur Fade: Animate agent cards on page load, create smooth reveals for workflow steps
Hero Video Dialog: Add tutorial videos to agent pages, demo showcases for capabilities