Video Cursor Guide for Screenshot Stitcher

An animated visualization tool that demonstrates how the Screenshot Stitcher works. This project provides an interactive animation of the process of collecting screenshots, annotating them, and combining them into a PDF document.

Overview

This tool visualizes the three key stages of the Screenshot Stitcher process:

1. Collection: Gathering screenshots from a directory
2. Annotation: Adding titles, descriptions, and highlights to screenshots
3. Generation: Creating a PDF with cover page, annotated screenshots, and summary

Quick Start

Option 1: Simple Method (No Build Required)

1. Navigate to the project directory:

   cd video-cursor-guide

2. Start a basic HTTP server:

   # Using the included http-server
   npm run start
   
   # OR using Python's built-in server
   python -m http.server

3. Open your browser and visit:

   • http://localhost:8080 (http-server)
   • http://localhost:8000 (Python server)

Option 2: Development Build with Webpack

1. Install dependencies:

   cd video-cursor-guide
   npm install

2. Start the development server:

   npm run dev

3. Open your browser at http://localhost:9000

Usage

1. Click the Play button to start the animation
2. Use Pause to stop at any point
3. Click Restart to begin again
4. Watch the explanation panel for details about each step

Project Structure

📁 video-cursor-guide/
├── 📁 public/             # Static assets for direct use
│   ├── 📁 css/           # Stylesheet files
│   ├── 📁 js/            # JavaScript files
│   └── 📄 index.html     # Main HTML file for direct usage
├── 📁 src/                # Source files for webpack build
│   ├── 📄 index.js       # Main JavaScript entry point
│   └── 📄 index.html     # HTML template for webpack
├── 📄 package.json        # Project dependencies
├── 📄 webpack.config.js   # Webpack configuration
└── 📄 README.md           # This file

Features

• Interactive Animation: Play, pause, and restart controls
• Progress Tracking: Visual indication of progress through the process
• Explanation Panel: Real-time descriptions of each step
• Stage-by-Stage Visualization: Clear separation of the three key stages

Animation Stages

Stage 1: Screenshot Collection

Demonstrates how the tool identifies and collects screenshots from a directory.

Stage 2: Adding Annotations

Shows the process of adding titles, descriptions, and highlights to screenshots.

Stage 3: PDF Generation

Visualizes the creation of a complete PDF document with cover page, annotated screenshots, and summary.

Technologies Used

• HTML5, CSS3, JavaScript
• GSAP (GreenSock Animation Platform)
• Font Awesome for icons
• Webpack for bundling (optional)

Customization

Animation Speed

You can adjust the animation speed by modifying the ANIMATION_SPEED constant in the JavaScript file:

// 1 = normal speed, 2 = twice as fast, 0.5 = half speed
const ANIMATION_SPEED = 1; 

Visual Appearance

Edit the CSS variables in public/css/styles.css to customize colors and styling:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  /* additional variables */
}

Related Projects

This visualization is based on the Screenshot Stitcher project, which provides the actual functionality being demonstrated.