Skip to main content

Typewriter Animation Examples Showcase

This directory contains comprehensive examples demonstrating the various features and use cases of the use-typewriter-animation library. Each example is designed to showcase different aspects of the library while providing practical, real-world implementation patterns.

📁 Directory Structure​

src/examples/
├── basic/           # Simple, foundational examples
├── interactive/     # Examples with user interaction
├── creative/        # Artistic and creative implementations
├── advanced/        # Complex, feature-rich examples
├── accessibility/   # WCAG 2.1 AA compliance demonstrations
├── performance/     # Performance optimization examples
└── index.ts         # Central exports and metadata

🎯 Example Categories​

Basic Examples​

Perfect for getting started and understanding core concepts

  • SimpleTypewriter - Clean, minimal typewriter animation
  • ColorfulText - Text colorization and styling
  • LoopingAnimation - Continuous delete/type cycles

Interactive Examples​

Showcasing user interaction and control features

  • KeyboardControls - Keyboard shortcuts and interactive controls

Creative Examples​

Artistic implementations for inspiration

  • TerminalSimulation - Realistic command line interface
  • CodeEditor - Syntax-highlighted code typing simulation
  • ChatSimulation - Multi-user chat interface
  • StorytellingDemo - Multi-scene narrative with transitions
  • LoadingStates - Realistic loading sequences

Advanced Examples​

Complex implementations for production use

  • HeroSection - Modern landing page hero section

Accessibility Examples​

WCAG 2.1 AA compliance demonstrations

  • AccessibilityShowcase - Comprehensive accessibility features

Performance Examples​

Optimization techniques and metrics

  • VirtualizationDemo - Long text handling with performance metrics

Development Examples​

Testing and development utilities

  • PerformanceTesting - Interactive performance testing with benchmarks
  • AccessibilityTesting - WCAG 2.1 compliance testing suite
  • ConflictTesting - Event loop and timing conflict detection

🚀 Usage​

Import Individual Examples​

import { SimpleTypewriter, ColorfulText } from '../examples';

// Use in your app
<SimpleTypewriter />
<ColorfulText />

Browse by Category​

import { getExamplesByCategory } from '../examples';

const basicExamples = getExamplesByCategory('basic');
const creativeExamples = getExamplesByCategory('creative');

Example Metadata​

Each example includes comprehensive metadata:

import { getExampleByName } from '../examples';

const example = getExampleByName('TerminalSimulation');
console.log(example.description); // "Realistic terminal/command line simulation"
console.log(example.features); // ["Terminal UI", "Command simulation", ...]

📋 Example Details​

Basic Examples​

SimpleTypewriter​

import { SimpleTypewriter } from '../examples/basic/SimpleTypewriter';
  • Focus: Getting started with typewriter animations
  • Features: Basic typing, clean UI, simple setup
  • Use Case: Learning the fundamentals
  • Complexity: ⭐☆☆☆☆

ColorfulText​

import { ColorfulText } from '../examples/basic/ColorfulText';
  • Focus: Text colorization and styling
  • Features: Dynamic colors, modern styling, color transitions
  • Use Case: Highlighting important text, visual appeal
  • Complexity: ⭐⭐☆☆☆

LoopingAnimation​

import { LoopingAnimation } from '../examples/basic/LoopingAnimation';
  • Focus: Continuous animations with delete operations
  • Features: Loop mode, delete operations, gradient background
  • Use Case: Rotating messages, dynamic content
  • Complexity: ⭐⭐☆☆☆

Interactive Examples​

KeyboardControls​

import { KeyboardControls } from '../examples/interactive/KeyboardControls';
  • Focus: User interaction and control
  • Features: Keyboard shortcuts, status tracking, interactive UI
  • Use Case: Interactive demos, user-controlled animations
  • Complexity: ⭐⭐⭐☆☆

Creative Examples​

TerminalSimulation​

import { TerminalSimulation } from '../examples/creative/TerminalSimulation';
  • Focus: Realistic terminal interface
  • Features: Terminal UI, command simulation, real-time clock
  • Use Case: Developer portfolios, technical demonstrations
  • Complexity: ⭐⭐⭐☆☆

CodeEditor​

import { CodeEditor } from '../examples/creative/CodeEditor';
  • Focus: Code typing with syntax highlighting
  • Features: Syntax highlighting, line numbers, editor theme
  • Use Case: Tutorial videos, coding demonstrations
  • Complexity: ⭐⭐⭐⭐☆

ChatSimulation​

import { ChatSimulation } from '../examples/creative/ChatSimulation';
  • Focus: Multi-user chat interface
  • Features: Chat UI, multiple users, typing indicators
  • Use Case: Product demos, communication showcases
  • Complexity: ⭐⭐⭐⭐☆

StorytellingDemo​

import { StorytellingDemo } from '../examples/creative/StorytellingDemo';
  • Focus: Narrative experiences with scene transitions
  • Features: Scene transitions, dynamic backgrounds, narrative flow
  • Use Case: Interactive stories, onboarding experiences
  • Complexity: ⭐⭐⭐⭐⭐

LoadingStates​

import { LoadingStates } from '../examples/creative/LoadingStates';
  • Focus: Realistic loading sequences
  • Features: Loading sequences, progress bars, state management
  • Use Case: Application loading, progress indication
  • Complexity: ⭐⭐⭐⭐☆

Advanced Examples​

HeroSection​

import { HeroSection } from '../examples/advanced/HeroSection';
  • Focus: Production-ready landing page component
  • Features: Landing page design, feature showcases, modern UI
  • Use Case: Marketing sites, product launches
  • Complexity: ⭐⭐⭐⭐☆

Accessibility Examples​

AccessibilityShowcase​

import { AccessibilityShowcase } from '../examples/accessibility/AccessibilityShowcase';
  • Focus: WCAG 2.1 AA compliance demonstration
  • Features: ARIA support, keyboard navigation, screen reader support
  • Use Case: Accessibility testing, compliance verification
  • Complexity: ⭐⭐⭐⭐☆

Performance Examples​

VirtualizationDemo​

import { VirtualizationDemo } from '../examples/performance/VirtualizationDemo';
  • Focus: Performance optimization techniques
  • Features: Virtualization, performance metrics, long text handling
  • Use Case: Large text sequences, performance testing
  • Complexity: ⭐⭐⭐⭐☆

Development Examples​

PerformanceTesting​

import { PerformanceTesting } from '../examples/development/PerformanceTesting';
  • Focus: Interactive performance testing and benchmarking
  • Features: Performance benchmarks, real-time metrics, test automation
  • Use Case: Performance validation, optimization testing, development debugging
  • Complexity: ⭐⭐⭐⭐⭐

AccessibilityTesting​

import { AccessibilityTesting } from '../examples/development/AccessibilityTesting';
  • Focus: WCAG 2.1 compliance testing suite
  • Features: WCAG testing, interactive tests, compliance validation
  • Use Case: Accessibility auditing, compliance verification, development testing
  • Complexity: ⭐⭐⭐⭐⭐

ConflictTesting​

import { ConflictTesting } from '../examples/development/ConflictTesting';
  • Focus: Event loop and timing conflict detection
  • Features: Event loop testing, conflict detection, timing validation
  • Use Case: Development debugging, regression testing, stability validation
  • Complexity: ⭐⭐⭐⭐⭐

🎨 Design Principles​

Visual Design​

  • Modern aesthetics with clean, professional styling
  • Responsive design that works on all screen sizes
  • Consistent color schemes using modern design tokens
  • Thoughtful typography with appropriate font choices

Code Quality​

  • TypeScript for type safety and better developer experience
  • Consistent patterns across all examples
  • Comprehensive comments explaining key concepts
  • Error handling and edge case consideration

Accessibility​

  • WCAG 2.1 AA compliance where applicable
  • Keyboard navigation support
  • Screen reader compatibility
  • Reduced motion respect and handling

Performance​

  • Optimized rendering with React best practices
  • Memory management with proper cleanup
  • Virtualization for large datasets
  • Hardware acceleration where beneficial

🔧 Development​

Adding New Examples​

  1. Create a new file in the appropriate category directory
  2. Follow the existing naming and structure patterns
  3. Add comprehensive TypeScript types and comments
  4. Update the index.ts file with exports and metadata
  5. Test across different browsers and screen sizes

Example Template​

import { useEffect } from 'react';
import { useTypewriter } from 'use-typewriter-animation';

export const ExampleName = () => {
  const { typewriter, elements, cursor, keyframes } = useTypewriter({
    // Configuration options
  });

  useEffect(() => {
    typewriter.type('Your animation here').start();
  }, []);

  return (
    <>
      <style>{keyframes}</style>
      <div
        style={
          {
            // Your styling here
          }
        }
      >
        {elements}
        {cursor}
      </div>
    </>
  );
};

Testing Guidelines​

  • Test with keyboard navigation
  • Verify screen reader compatibility
  • Check performance with long text sequences
  • Validate across different browsers
  • Test with reduced motion preferences

📖 Learning Path​

Beginner​

  1. Start with SimpleTypewriter to understand basics
  2. Explore ColorfulText for styling concepts
  3. Try LoopingAnimation for delete operations

Intermediate​

  1. Implement KeyboardControls for interaction
  2. Study TerminalSimulation for UI design
  3. Build LoadingStates for state management

Advanced​

  1. Analyze CodeEditor for complex styling
  2. Examine AccessibilityShowcase for compliance
  3. Optimize with VirtualizationDemo for performance

Expert​

  1. Create StorytellingDemo style narratives
  2. Build HeroSection level production components
  3. Combine multiple techniques for unique implementations

🤝 Contributing​

When contributing new examples:

  1. Follow existing patterns for consistency
  2. Include comprehensive comments explaining concepts
  3. Add accessibility features where applicable
  4. Test thoroughly across different environments
  5. Update documentation including this README

📚 Additional Resources​

Happy typing! ✨