Feature Visualizations
Preview components for features page, homepage, demo, and pitch deck
Network Graph Background
Animated network visualization for hero section background - based on complexity-challenge.png
Network Graph Background Preview
Use at low opacity (0.06-0.08) for hero section background
Context Setup
Organization profile wizard - Industry, Function, Role, Maturity
Organization Context
Context Setup - By Phase
Individual context phases: Industry → Function → Role → Maturity (for step-by-step demos)
Context: Industry
Strategic Objectives
OKR wizard with expandable hierarchy - Goals, Objectives, Key Results
Strategic Objectives
OKR Framework
Strategic Objectives - By Phase
Individual OKR phases: Goals → Objectives → Key Results → KPIs (for step-by-step demos)
OKR: Goals
Ensure Accuracy and Timeliness of Financial Records
Goals define strategic priorities that guide AI initiative selection and alignment.
Approach Selection
Strategic questionnaire for AI adoption approach - governance, structure, pace, sourcing, portfolio
Approach Selection
Strategic AI Adoption Framework
Governance Model
How AI decisions flow through your organization
Organizational Structure
Transformation Pace
Capability Sourcing
Portfolio Balance
Based on your context: Manufacturing, Operations, Level 3 Maturity
Recommended: Balanced governance (40%), distributed structure (55%), evolutionary pace (60%), partner-first (65%), mixed portfolio (45%)
Use Case Browser
Card grid matching ai-readi-mvp enhanced-use-case-card pattern
Use Case Library
760+ AI Applications
Intelligent Email Triage & Auto-Response
AI-powered email categorization and automated responses for common inquiries.
Predictive Analytics Dashboard
Real-time business intelligence with AI-driven forecasting and anomaly detection.
Conversational Support Assistant
Natural language chatbot for customer self-service and issue resolution.
Document Intelligence Extraction
Automated extraction of key information from unstructured documents.
Process Automation Orchestration
AI-driven workflow optimization and task automation across departments.
Sentiment Analysis Pipeline
Real-time analysis of customer feedback and social media sentiment.
Use Case Selection & Evaluation
Evaluation wizard - Business Value, Technical Feasibility, Risk, Capability
Use Case Evaluation
Email Triage & Auto-Response
Business Value
CompletedTechnical Feasibility
CompletedRisk Assessment
In ProgressCapability Readiness
PendingUse Case Real Evaluation - Crowdsourced Insights
47 contributors evaluate 3 dimensions and 12 capabilities for consensus-based assessment
Use Case Evaluation - By Phase
Individual evaluation phases: Selection → Detail → Capabilities → Crowdsourced Insights → Results (for step-by-step demos)
Use Case: Selection
Intelligent Email Triage & Auto-Response
Select use cases from the 760+ AI applications library filtered by your organizational context.
Value Chain Impact
Flow diagram with process dependencies and AI integration points
Value Chain Impact
Process Dependencies & AI Integration
Core Operations
3 processesMain business processing and analysis
Value Chain Impact - By Phase
Individual value chain phases: Overview → Analysis → Recommendations → Requirements → Roadmap (for step-by-step demos)
Value Chain: Overview
Initiative Appraisal
Resource estimation dashboard with financial, human, technology, and organizational requirements
Initiative Appraisal
Email Triage & Auto-Response
Financial
3 metricsHuman
3 metricsTechnology
3 metricsOrganizational
3 metricsChange Readiness Assessment
Organizational readiness scores, department analysis, and training needs matrix
Change Readiness Assessment
AI Transformation Initiative
Dependency Mapping
Technical, process, data, and organizational dependencies with critical path visualization
Dependency Mapping
AI Transformation Initiative
Value Chain Engineering
Process redesign canvas with human-AI collaboration, feedback loops, and bottleneck analysis
Value Chain Engineering
Process Redesign for AI Integration
Knowledge Aggregation
Knowledge aggregation network - How dispersed knowledge flows into collective intelligence
Impact Tracking
Continuous monitoring, learning capture, pattern recognition, and strategy refinement
Impact & Context Tracking
AI Transformation Initiative
Context Drift Detection
Market shifts, technology evolution, organizational changes, and performance drift monitoring with AI-powered recommendations
Drift: Market
Usage Guide
Pitch Deck / Embed
Use animation mode. Auto-plays demo sequence.
Features / Homepage
Use subtle animation. Components fade in on scroll.
Demo Page
Use interactive animation. Full click/hover interactions.
Import Example
import {
ContextSetupMockup,
ContextPhasesAnimation,
ObjectivesHierarchy,
ObjectivesPhasesAnimation,
ApproachSelectionMockup,
UseCaseBrowser,
UseCaseEvaluationMockup,
UseCasePhasesAnimation,
CrowdsourcedInsightMockup,
ValueChainImpact,
ValueChainPhasesAnimation,
InitiativeAppraisalMockup,
ChangeReadinessMockup,
DependencyMappingMockup,
KnowledgeAggregationMockup,
ImpactTrackingMockup,
ValueChainEngineeringMockup,
} from "@/components/feature-visualizations";
// Usage
<ContextSetupMockup animationLevel="animation" /> // Auto-demo
<ContextPhasesAnimation animationLevel="animation" /> // Step-by-step phases
<ContextPhasesAnimation activePhase="industry" /> // Single phase display
<ObjectivesHierarchy animationLevel="subtle" /> // Scroll entrance
<ObjectivesPhasesAnimation animationLevel="animation" /> // OKR step-by-step phases
<ObjectivesPhasesAnimation activePhase="goals" /> // Single OKR phase display
<ApproachSelectionMockup animationLevel="animation" /> // Phase 3 approach selection
<UseCaseBrowser animationLevel="interactive" /> // Full interactions
<UseCaseEvaluationMockup animationLevel="animation" mode="simulation" />
<UseCasePhasesAnimation animationLevel="animation" /> // Use case step-by-step phases
<UseCasePhasesAnimation activePhase="insights" /> // Single use case phase display
<CrowdsourcedInsightMockup animationLevel="animation" /> // Crowdsourced insights
<ValueChainImpact animationLevel="interactive" showFlowDiagram={true} />
<ValueChainPhasesAnimation animationLevel="animation" /> // Value chain step-by-step phases
<ValueChainPhasesAnimation activePhase="roadmap" /> // Single value chain phase display
<InitiativeAppraisalMockup animationLevel="animation" /> // Phase 7 resource estimation
<ChangeReadinessMockup animationLevel="animation" /> // Phase 7 readiness assessment
<DependencyMappingMockup animationLevel="animation" /> // Phase 7 dependency network
<KnowledgeAggregationMockup animationLevel="animation" /> // Phase 8 knowledge aggregation
<ImpactTrackingMockup animationLevel="animation" /> // Phase 8 impact tracking
<ValueChainEngineeringMockup animationLevel="animation" /> // Phase 7 process redesign