Services Interactive Cards

A services section with three interactive cards showcasing AI task breakdown, team workflow diagram, and automated engagement carousel.

Overview

A visually engaging services section with three interactive cards that demonstrate product capabilities through animations. Each card showcases a different interaction pattern - task breakdowns, rotating diagrams, and vertical carousels.

Key Features:

Three distinct interactive card types
SignalCard with animated AI task breakdown visualization
SequenceCard with rotating team workflow diagram
AutomateCard with vertical carousel of engagement notifications
Smooth motion animations
Dark mode support
Responsive grid layout

Installation


pnpm dlx shadcn@latest add @ruixenui-pro/services-interactive-cards

Services Bento Grid Stats Counter

On This Page

Usage

import { ServicesInteractiveCards } from "@/components/ui/services-interactive-cards"
 
export default function Example() {
  return (
    <ServicesInteractiveCards
      title="Built for modern teams."
      titleMuted="Streamline your workflow with intelligent automation that adapts to how you work."
    />
  )
}

Props

Prop	Type	Default	Description
`title`	`string`	`"Built for modern teams."`	Main title text
`titleMuted`	`string`	`"Streamline your workflow..."`	Muted portion of the title
`className`	`string`	`undefined`	Additional CSS classes

Card Types

SignalCard

Displays an AI-powered task breakdown with animated checkmarks. Features a list of tasks that get checked off progressively with smooth animations.

SequenceCard

Shows a rotating team workflow diagram with workflow stage pointers orbiting around a central element. The diagram continuously rotates to create a dynamic effect.

AutomateCard

Presents a vertical carousel of engagement notifications (user touchpoints) that cycle through automatically, demonstrating automated engagement features.