Processing Components

Progress indicators and processing visualizations for background tasks and data operations.

CodeTyping

Realistic code typing effect with syntax highlighting and terminal-style presentation.

import { CodeTyping } from 'archyra';

function MyComponent() {
  const [isTyping, setIsTyping] = useState(false);

  return (
    <CodeTyping
      isTyping={isTyping}
      onComplete={() => setIsTyping(false)}
    />
  );
}

DataProcessing

Data pipeline visualization showing input, processing, and output stages with flowing cards.

import { DataProcessing } from 'archyra';

function DataPipeline() {
  const [isProcessing, setIsProcessing] = useState(false);

  return (
    <DataProcessing
      isProcessing={isProcessing}
      onComplete={() => setIsProcessing(false)}
    />
  );
}