How Was Your Day Honey?

How Was Your Day Honey? - Documentation

Learn how to create beautiful ASCII art animations from your videos, all processed in your browser!

Quick Start

Upload a video ā†’ Process in browser ā†’ Download ASCII frames ā†’ Display anywhere!

Getting Started

"How Was Your Day Honey?" converts short videos (up to 15 seconds, 25MB max) into beautiful ASCII art animations. All processing happens in your browser - your videos never leave your device!

Supported Formats

  • Video formats: MP4, WebM, AVI, MOV
  • Maximum file size: 50MB
  • Maximum duration: 30 seconds
  • Frame rate: 24 FPS (cinema standard)
  • Works with: Any animated content - movies, games, animations, screen recordings

Usage Instructions

  1. Upload a video file using drag-and-drop or file selection
  2. Click "Start Conversion" and watch the magic happen in your browser
  3. Preview your ASCII animation with the built-in player
  4. Download the ZIP file containing your ASCII frames and documentation

How It Works

šŸŽ„

1. Upload Video

Drag & drop or select your video file. Supports MP4 and WebM formats.

āš”

2. Browser Magic

FFmpeg.wasm extracts frames and converts them to ASCII art using luminance mapping.

šŸ“¦

3. Download & Enjoy

Get a ZIP with ASCII frames, usage examples, and complete documentation.

Character Set Options

Choose from our optimized set or create your own:

Default (70+ characters):

.'`^",:;Il!i><~+_-?][}{1)(|\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$

Custom Examples:

Classic:.:-=+*#%@
Numbers: 0123456789
Letters: abcdefg
Blocks: ā–‘ā–’ā–“ā–ˆ

šŸ’” Tip: Order characters from lightest to darkest for best results

Displaying ASCII Frames

Note: All code examples below are included in the README.md file of your downloaded ZIP.

HTML/JavaScript

Basic web page animation:

<!DOCTYPE html>
<html>
<head>
    <style>
        .ascii-frame {
            font-family: 'Courier New', monospace;
            line-height: 1;
            white-space: pre;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="ascii-display" class="ascii-frame"></div>
    
    <script>
        const frames = []; // Load your frame data here
        let currentFrame = 0;
        
        function animate() {
            document.getElementById('ascii-display').textContent = frames[currentFrame];
            currentFrame = (currentFrame + 1) % frames.length;
            setTimeout(animate, 83); // 12 FPS
        }
        
        animate();
    </script>
</body>
</html>

React Component

For React applications:

import React, { useState, useEffect } from 'react';

const ASCIIAnimation = ({ frames, fps = 12 }) => {
    const [currentFrame, setCurrentFrame] = useState(0);
    const [isPlaying, setIsPlaying] = useState(true);
    
    useEffect(() => {
        if (!isPlaying || frames.length === 0) return;
        
        const interval = setInterval(() => {
            setCurrentFrame(prev => (prev + 1) % frames.length);
        }, 1000 / fps);
        
        return () => clearInterval(interval);
    }, [isPlaying, frames.length, fps]);
    
    return (
        <div>
            <pre style={{
                fontFamily: 'Courier New, monospace',
                lineHeight: 1,
                fontSize: '12px'
            }}>
                {frames[currentFrame] || ''}
            </pre>
            <button onClick={() => setIsPlaying(!isPlaying)}>
                {isPlaying ? 'Pause' : 'Play'}
            </button>
        </div>
    );
};

Terminal Animation (Node.js)

For command-line applications:

const fs = require('fs');
const path = require('path');

class TerminalAnimator {
    constructor(framesDir, fps = 12) {
        this.framesDir = framesDir;
        this.fps = fps;
        this.frames = this.loadFrames();
    }
    
    loadFrames() {
        const files = fs.readdirSync(this.framesDir)
            .filter(f => f.endsWith('.txt'))
            .sort();
        
        return files.map(file => 
            fs.readFileSync(path.join(this.framesDir, file), 'utf8')
        );
    }
    
    play() {
        let currentFrame = 0;
        
        const animate = () => {
            // Clear terminal and display frame
            process.stdout.write('\x1b[2J\x1b[H');
            process.stdout.write(this.frames[currentFrame]);
            
            currentFrame = (currentFrame + 1) % this.frames.length;
            setTimeout(animate, 1000 / this.fps);
        };
        
        animate();
    }
}

// Usage
const animator = new TerminalAnimator('./frames');
animator.play();

Color Support

If you used two-tone or full-color mode, your ZIP will include color data files. Here's how to apply colors in HTML:

function applyColors(element, asciiContent, colorData) {
    const lines = asciiContent.split('\n');
    element.innerHTML = '';
    
    lines.forEach((line, y) => {
        const lineDiv = document.createElement('div');
        
        for (let x = 0; x < line.length; x++) {
            const char = line[x];
            const span = document.createElement('span');
            span.textContent = char;
            
            if (colorData && colorData[y] && colorData[y][x]) {
                const colorInfo = colorData[y][x];
                span.style.color = colorInfo.color;
                if (colorInfo.background) {
                    span.style.backgroundColor = colorInfo.background;
                }
            }
            
            lineDiv.appendChild(span);
        }
        
        element.appendChild(lineDiv);
    });
}

Performance Tips

āœ… Best Practices

  • Preload all frames into memory
  • Use monospace fonts for proper alignment
  • Use requestAnimationFrame for smooth browser animations
  • Consider frame caching for repeated playback

āš ļø Avoid

  • Loading frames synchronously during playback
  • Using proportional fonts
  • Setting frame rates higher than 30 FPS
  • Displaying very large frames without scaling

File Structure

Your downloaded ZIP file contains:

ascii-frames-[jobId]-[timestamp].zip
ā”œā”€ā”€ frames/
ā”‚   ā”œā”€ā”€ frame_0000.txt          # ASCII content for frame 0
ā”‚   ā”œā”€ā”€ frame_0000_colors.json  # Color data (if applicable)
ā”‚   ā”œā”€ā”€ frame_0001.txt          # ASCII content for frame 1
ā”‚   ā””ā”€ā”€ ...
ā”œā”€ā”€ metadata.json               # Conversion settings and info
ā”œā”€ā”€ ABOUT.txt                   # About the application
ā””ā”€ā”€ README.md                   # Complete usage guide

Metadata Format

The metadata.json file contains:

{
  "totalFrames": 24,
  "generator": "How Was Your Day Honey?",
  "generatedAt": "2024-01-15T10:30:00.000Z",
  "format": "txt"
}

Troubleshooting

Animation appears choppy

  • ā€¢ Try using 24 FPS instead of 12 FPS
  • ā€¢ Ensure consistent timing in your animation loop
  • ā€¢ Use requestAnimationFrame for browser animations

Characters don't align properly

  • ā€¢ Use a monospace font (Courier New, Consolas, Monaco)
  • ā€¢ Set line-height to 1 and white-space to pre
  • ā€¢ Ensure consistent font size across all frames

Colors not displaying

  • ā€¢ Check if color data files (*_colors.json) exist
  • ā€¢ Ensure you're applying colors using the provided examples
  • ā€¢ Verify the color mode was set to two-tone or full-color

Performance issues

  • ā€¢ Preload all frames before starting animation
  • ā€¢ Consider reducing frame rate or resolution scale
  • ā€¢ Use efficient DOM manipulation techniques
  • ā€¢ Implement frame caching for repeated playback

Privacy & Security

šŸ”’ Your Privacy Matters

  • ā€¢ No uploads: Your videos never leave your browser
  • ā€¢ No tracking: We don't collect or store any personal data
  • ā€¢ No servers: All processing happens on your device
  • ā€¢ No limits: Process as many videos as you want

This is how video processing should be - private, secure, and entirely under your control.

Need Help?

If you encounter issues or have questions:

  • Check the troubleshooting section above
  • Review the complete README.md in your downloaded ZIP
  • Ensure your video meets the format requirements
  • Try different conversion settings for better results