<div class="container">
    <h1>Font-Based Anti-Machine Text Display</h1>
    <p>Enter text below. All characters will use the selected chunking method to prevent machine reading while remaining human-readable.</p>
    
    <div class="controls">
        <div class="text-controls">
            <div class="control-group">
                <label for="textInput">Text Content:</label>
            </div>
            <textarea id="textInput" placeholder="Enter your text here... This system can handle long texts with multiple lines and will wrap them appropriately.">Trying to create text that AI cannot read which basically means it has to be screenshot proof?!</textarea>
        </div>
        
        <div class="control-group">
            <label for="chunkingMethod">Chunking Method:</label>
            <select id="chunkingMethod">
                <option value="radial">Radial (Pie slices)</option>
                <option value="grid">Grid (Rectangular sections)</option>
                <option value="horizontal">Horizontal (Strips)</option>
                <option value="vertical">Vertical (Columns)</option>
                <option value="diagonal">Diagonal (Slanted strips)</option>
                <option value="concentric">Concentric (Rings)</option>
                <option value="random">Random (Scattered)</option>
                <option value="spiral">Spiral (Curved pattern)</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSelect">Font Family:</label>
            <select id="fontSelect">
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Courier New">Courier New</option>
                <option value="Impact">Impact</option>
                <option value="Georgia">Georgia</option>
                <option value="Verdana">Verdana</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSize">Font Size:</label>
            <input type="range" id="fontSize" min="20" max="80" value="40">
            <span class="value-display" id="fontSizeValue">40</span>
        </div>
        
        <div class="control-group">
            <label for="lineHeight">Line Height:</label>
            <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.5">
            <span class="value-display" id="lineHeightValue">1.5</span>
        </div>
        
        <div class="control-group">
            <label for="flashSpeed">Flash Speed (ms):</label>
            <input type="range" id="flashSpeed" min="20" max="300" value="20">
            <span class="value-display" id="flashSpeedValue">20</span>
        </div>
        
        <div class="control-group">
            <label for="chunkDuration">Chunk Duration (ms):</label>
            <input type="range" id="chunkDuration" min="20" max="200" value="80">
            <span class="value-display" id="chunkDurationValue">80</span>
        </div>
        
        <div class="control-group">
            <label for="shakeIntensity">Shake Intensity:</label>
            <input type="range" id="shakeIntensity" min="0" max="20" value="3">
            <span class="value-display" id="shakeIntensityValue">3</span>
        </div>
        
        <div class="control-group">
            <label for="randomization">Timing Randomization (%):</label>
            <input type="range" id="randomization" min="0" max="100" value="50">
            <span class="value-display" id="randomizationValue">50</span>
        </div>
        
        <div class="control-group">
            <label for="maxChunks">Max Chunks per Char:</label>
            <input type="range" id="maxChunks" min="2" max="8" value="3">
            <span class="value-display" id="maxChunksValue">3</span>
        </div>
        
        <div class="method-info" id="methodInfo">
            <strong>Grid Method:</strong> Divides each character into rectangular sections based on a grid pattern. Good for uniform distribution of character parts.
        </div>
    </div>
    
    <canvas id="canvas"></canvas>
    
    <div class="stats">
        <span>Characters: <span id="charCount">0</span></span>
        <span>Active Method: <span id="activeMethod">Grid</span></span>
        <span>Canvas Size: <span id="canvasSize">0x0</span></span>
        <span>FPS: <span id="fps">60</span></span>
    </div>
</div>

html

class FontBasedAntiMachineDisplay {
    constructor() {
        this.canvas = document.getElementById('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.tempCanvas = document.createElement('canvas');
        this.tempCtx = this.tempCanvas.getContext('2d');
        
        this.text = '';
        this.characters = [];
        this.animationId = null;
        this.lastFpsTime = 0;
        this.frameCount = 0;
        
        this.config = {
            flashSpeed: 20,
            chunkDuration: 30,
            shakeIntensity: 3,
            randomization: 50,
            fontSize: 40,
            lineHeight: 1.5,
            fontFamily: 'Arial',
            chunkingMethod: 'radial',
            maxChunks: 3,
            charSpacing: 0.8,
            padding: 20
        };
        
        this.methodDescriptions = {
            'grid': 'Divides each character into rectangular sections based on a grid pattern. Good for uniform distribution of character parts.',
            'radial': 'Creates pie-slice chunks emanating from the character center. Effective for round characters.',
            'horizontal': 'Splits characters into horizontal strips. Works well for characters with horizontal features.',
            'vertical': 'Creates vertical column chunks. Ideal for characters with vertical strokes.',
            'diagonal': 'Forms diagonal strips across the character. Good for slanted or angular characters.',
            'concentric': 'Creates ring-like chunks from center outward. Excellent for preventing shape recognition.',
            'random': 'Randomly distributes pixels into chunks. Maximum unpredictability for machine learning.',
            'spiral': 'Forms spiral-pattern chunks. Complex pattern that defeats geometric analysis.'
        };
        
        this.initControls();
        this.setText(document.getElementById('textInput').value);
        this.startAnimation();
    }
    
    initControls() {
        const controls = ['flashSpeed', 'chunkDuration', 'shakeIntensity', 'randomization', 'fontSize', 'lineHeight', 'maxChunks'];
        
        controls.forEach(control => {
            const slider = document.getElementById(control);
            const valueDisplay = document.getElementById(control + 'Value');
            
            slider.addEventListener('input', (e) => {
                this.config[control] = parseFloat(e.target.value);
                valueDisplay.textContent = e.target.value;
                if (control === 'fontSize' || control === 'lineHeight' || control === 'maxChunks') {
                    this.setText(this.text);
                }
            });
        });
        
        document.getElementById('textInput').addEventListener('input', (e) => {
            this.setText(e.target.value);
        });
        
        document.getElementById('fontSelect').addEventListener('change', (e) => {
            this.config.fontFamily = e.target.value;
            this.setText(this.text);
        });
        
        document.getElementById('chunkingMethod').addEventListener('change', (e) => {
            this.config.chunkingMethod = e.target.value;
            document.getElementById('methodInfo').innerHTML = 
                `<strong>${e.target.options[e.target.selectedIndex].text}:</strong> ${this.methodDescriptions[e.target.value]}`;
            document.getElementById('activeMethod').textContent = e.target.options[e.target.selectedIndex].text;
            this.setText(this.text);
        });
    }
    
    setText(text) {
        this.text = text;
        this.characters = [];
        
        if (!text.trim()) return;
        
        // Calculate layout
        const maxWidth = 1300;
        const fontSize = this.config.fontSize;
        const charWidth = fontSize * this.config.charSpacing;
        const charsPerLine = Math.floor((maxWidth - this.config.padding * 2) / charWidth);
        const lineHeight = fontSize * this.config.lineHeight;
        
        // Split text into lines
        const words = text.split(' ');
        const lines = [];
        let currentLine = '';
        
        words.forEach(word => {
            const testLine = currentLine + (currentLine ? ' ' : '') + word;
            if (testLine.length <= charsPerLine) {
                currentLine = testLine;
            } else {
                if (currentLine) lines.push(currentLine);
                currentLine = word;
            }
        });
        if (currentLine) lines.push(currentLine);
        
        // Set canvas size
        const canvasHeight = Math.max(300, lines.length * lineHeight + this.config.padding * 2);
        this.canvas.height = canvasHeight;
        this.canvas.width = maxWidth;
        
        document.getElementById('canvasSize').textContent = `${maxWidth}x${canvasHeight}`;
        
        // Process each character
        let charIndex = 0;
        lines.forEach((line, lineIndex) => {
            for (let i = 0; i < line.length; i++) {
                const char = line[i];
                if (char === ' ') {
                    charIndex++;
                    continue;
                }
                
                const chunks = this.analyzeCharacter(char);
                
                this.characters.push({
                    char: char,
                    x: this.config.padding + i * charWidth,
                    y: this.config.padding + lineIndex * lineHeight + fontSize,
                    chunks: chunks,
                    currentChunk: Math.floor(Math.random() * chunks.length),
                    nextFlashTime: Math.random() * this.config.flashSpeed,
                    chunkEndTime: 0,
                    shakeX: 0,
                    shakeY: 0
                });
                
                charIndex++;
            }
        });
        
        document.getElementById('charCount').textContent = this.characters.length;
    }
    
    analyzeCharacter(char) {
        const size = this.config.fontSize;
        this.tempCanvas.width = size * 1.2;
        this.tempCanvas.height = size * 1.2;
        
        // Render character to temp canvas
        this.tempCtx.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
        this.tempCtx.fillStyle = '#ffffff';
        this.tempCtx.font = `${size}px ${this.config.fontFamily}`;
        this.tempCtx.textAlign = 'center';
        this.tempCtx.textBaseline = 'middle';
        this.tempCtx.fillText(char, this.tempCanvas.width / 2, this.tempCanvas.height / 2);
        
        // Get pixel data
        const imageData = this.tempCtx.getImageData(0, 0, this.tempCanvas.width, this.tempCanvas.height);
        const pixels = [];
        
        // Extract character pixels
        for (let y = 0; y < this.tempCanvas.height; y++) {
            for (let x = 0; x < this.tempCanvas.width; x++) {
                const idx = (y * this.tempCanvas.width + x) * 4;
                if (imageData.data[idx + 3] > 128) { // Alpha threshold
                    pixels.push({ x, y });
                }
            }
        }
        
        if (pixels.length === 0) return [[]];
        
        return this.chunkPixels(pixels, this.config.chunkingMethod);
    }
    
    chunkPixels(pixels, method) {
        const maxChunks = this.config.maxChunks;
        let chunks = [];
        
        switch (method) {
            case 'grid':
                chunks = this.gridChunking(pixels, maxChunks);
                break;
            case 'radial':
                chunks = this.radialChunking(pixels, maxChunks);
                break;
            case 'horizontal':
                chunks = this.horizontalChunking(pixels, maxChunks);
                break;
            case 'vertical':
                chunks = this.verticalChunking(pixels, maxChunks);
                break;
            case 'diagonal':
                chunks = this.diagonalChunking(pixels, maxChunks);
                break;
            case 'concentric':
                chunks = this.concentricChunking(pixels, maxChunks);
                break;
            case 'random':
                chunks = this.randomChunking(pixels, maxChunks);
                break;
            case 'spiral':
                chunks = this.spiralChunking(pixels, maxChunks);
                break;
        }
        
        return chunks.filter(chunk => chunk.length > 0);
    }
    
    gridChunking(pixels, maxChunks) {
        const bounds = this.getBounds(pixels);
        const cols = Math.ceil(Math.sqrt(maxChunks));
        const rows = Math.ceil(maxChunks / cols);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const col = Math.min(Math.floor((pixel.x - bounds.minX) / bounds.width * cols), cols - 1);
            const row = Math.min(Math.floor((pixel.y - bounds.minY) / bounds.height * rows), rows - 1);
            const chunkIndex = Math.min(row * cols + col, maxChunks - 1);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    radialChunking(pixels, maxChunks) {
        const center = this.getCenter(pixels);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const angle = Math.atan2(pixel.y - center.y, pixel.x - center.x) + Math.PI;
            const chunkIndex = Math.floor(angle / (2 * Math.PI) * maxChunks) % maxChunks;
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    horizontalChunking(pixels, maxChunks) {
        const bounds = this.getBounds(pixels);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const chunkIndex = Math.min(Math.floor((pixel.y - bounds.minY) / bounds.height * maxChunks), maxChunks - 1);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    verticalChunking(pixels, maxChunks) {
        const bounds = this.getBounds(pixels);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const chunkIndex = Math.min(Math.floor((pixel.x - bounds.minX) / bounds.width * maxChunks), maxChunks - 1);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    diagonalChunking(pixels, maxChunks) {
        const bounds = this.getBounds(pixels);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const normalized = (pixel.x - bounds.minX + pixel.y - bounds.minY) / (bounds.width + bounds.height);
            const chunkIndex = Math.min(Math.floor(normalized * maxChunks), maxChunks - 1);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    concentricChunking(pixels, maxChunks) {
        const center = this.getCenter(pixels);
        const maxDistance = Math.max(...pixels.map(p => 
            Math.sqrt((p.x - center.x) ** 2 + (p.y - center.y) ** 2)
        ));
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const distance = Math.sqrt((pixel.x - center.x) ** 2 + (pixel.y - center.y) ** 2);
            const chunkIndex = Math.min(Math.floor(distance / maxDistance * maxChunks), maxChunks - 1);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    randomChunking(pixels, maxChunks) {
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const chunkIndex = Math.floor(Math.random() * maxChunks);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    spiralChunking(pixels, maxChunks) {
        const center = this.getCenter(pixels);
        const chunks = Array(maxChunks).fill().map(() => []);
        
        pixels.forEach(pixel => {
            const distance = Math.sqrt((pixel.x - center.x) ** 2 + (pixel.y - center.y) ** 2);
            const angle = Math.atan2(pixel.y - center.y, pixel.x - center.x) + Math.PI;
            const spiral = (distance * 0.05 + angle * 2) % (2 * Math.PI);
            const chunkIndex = Math.floor(spiral / (2 * Math.PI) * maxChunks);
            chunks[chunkIndex].push(pixel);
        });
        
        return chunks;
    }
    
    getBounds(pixels) {
        const xs = pixels.map(p => p.x);
        const ys = pixels.map(p => p.y);
        const minX = Math.min(...xs);
        const maxX = Math.max(...xs);
        const minY = Math.min(...ys);
        const maxY = Math.max(...ys);
        
        return {
            minX, maxX, minY, maxY,
            width: maxX - minX || 1,
            height: maxY - minY || 1
        };
    }
    
    getCenter(pixels) {
        const sumX = pixels.reduce((sum, p) => sum + p.x, 0);
        const sumY = pixels.reduce((sum, p) => sum + p.y, 0);
        
        return {
            x: sumX / pixels.length,
            y: sumY / pixels.length
        };
    }
    
    startAnimation() {
        const animate = (currentTime) => {
            this.update(currentTime);
            this.render();
            this.updateFPS(currentTime);
            this.animationId = requestAnimationFrame(animate);
        };
        animate(0);
    }
    
    update(currentTime) {
        this.characters.forEach(char => {
            if (char.chunks.length === 0) return;
            
            // Update shake
            char.shakeX = (Math.random() - 0.5) * this.config.shakeIntensity;
            char.shakeY = (Math.random() - 0.5) * this.config.shakeIntensity;
            
            // Check if it's time to show next chunk
            if (currentTime >= char.nextFlashTime) {
                char.currentChunk = (char.currentChunk + 1) % char.chunks.length;
                
                // Add randomization to timing
                const randomFactor = 1 + (Math.random() - 0.5) * (this.config.randomization / 100);
                char.nextFlashTime = currentTime + this.config.flashSpeed * randomFactor;
                char.chunkEndTime = currentTime + this.config.chunkDuration;
            }
        });
    }
    
    render() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.fillStyle = '#00ff41';
        
        const currentTime = performance.now();
        
        this.characters.forEach(char => {
            if (char.chunks.length === 0) return;
            
            // Only render if chunk is active
            if (currentTime < char.chunkEndTime) {
                const chunk = char.chunks[char.currentChunk];
                if (chunk && chunk.length > 0) {
                    this.drawChunk(
                        char.x + char.shakeX,
                        char.y + char.shakeY,
                        chunk
                    );
                }
            }
        });
    }
    
    drawChunk(baseX, baseY, chunk) {
        const scale = this.config.fontSize / 80;
        const offsetX = baseX - this.tempCanvas.width / 2 * scale;
        const offsetY = baseY - this.tempCanvas.height / 2 * scale;
        
        chunk.forEach(pixel => {
            this.ctx.fillRect(
                offsetX + pixel.x * scale,
                offsetY + pixel.y * scale,
                Math.max(1, scale),
                Math.max(1, scale)
            );
        });
    }
    
    updateFPS(currentTime) {
        this.frameCount++;
        if (currentTime - this.lastFpsTime >= 1000) {
            document.getElementById('fps').textContent = Math.round(this.frameCount * 1000 / (currentTime - this.lastFpsTime));
            this.frameCount = 0;
            this.lastFpsTime = currentTime;
        }
    }
}

// Initialize the display when page loads
window.addEventListener('load', () => {
    new FontBasedAntiMachineDisplay();
});

js

body {
    font-family: 'Arial', sans-serif;
    background: #1a1a1a;
    color: #fff;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.controls {
    background: #2a2a2a;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.control-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

label {
    min-width: 120px;
    font-weight: bold;
    font-size: 14px;
}

input[type="range"] {
    flex: 1;
    max-width: 200px;
}

textarea, select {
    background: #3a3a3a;
    border: 1px solid #555;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
}

textarea {
    width: 100%;
    height: 120px;
    font-family: 'Courier New', monospace;
    resize: vertical;
}

#canvas {
    border: 2px solid #555;
    background: #000;
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 1300px;
}

.value-display {
    background: #333;
    padding: 5px 10px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
    font-size: 12px;
}

.text-controls {
    grid-column: 1 / -1;
}

.method-info {
    background: #333;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 12px;
    grid-column: 1 / -1;
}

.stats {
    background: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

css

headers

<div class="container">
    <h1>Font-Based Anti-Machine Text Display</h1>
    <p>Enter text below. All characters will use the selected chunking method to prevent machine reading while remaining human-readable.</p>
    
    <div class="controls">
        <div class="text-controls">
            <div class="control-group">
                <label for="textInput">Text Content:</label>
            </div>
            <textarea id="textInput" placeholder="Enter your text here... This system can handle long texts with multiple lines and will wrap them appropriately.">Trying to create text that AI cannot read which basically means it has to be screenshot proof?!</textarea>
        </div>
        
        <div class="control-group">
            <label for="chunkingMethod">Chunking Method:</label>
            <select id="chunkingMethod">
                <option value="radial">Radial (Pie slices)</option>
                <option value="grid">Grid (Rectangular sections)</option>
                <option value="horizontal">Horizontal (Strips)</option>
                <option value="vertical">Vertical (Columns)</option>
                <option value="diagonal">Diagonal (Slanted strips)</option>
                <option value="concentric">Concentric (Rings)</option>
                <option value="random">Random (Scattered)</option>
                <option value="spiral">Spiral (Curved pattern)</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSelect">Font Family:</label>
            <select id="fontSelect">
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Courier New">Courier New</option>
                <option value="Impact">Impact</option>
                <option value="Georgia">Georgia</option>
                <option value="Verdana">Verdana</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSize">Font Size:</label>
            <input type="range" id="fontSize" min="20" max="80" value="40">
            <span class="value-display" id="fontSizeValue">40</span>
        </div>
        
        <div class="control-group">
            <label for="lineHeight">Line Height:</label>
            <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.5">
            <span class="value-display" id="lineHeightValue">1.5</span>
        </div>
        
        <div class="control-group">
            <label for="flashSpeed">Flash Speed (ms):</label>
            <input type="range" id="flashSpeed" min="20" max="300" value="20">
            <span class="value-display" id="flashSpeedValue">20</span>
        </div>
        
        <div class="control-group">
            <label for="chunkDuration">Chunk Duration (ms):</label>
            <input type="range" id="chunkDuration" min="20" max="200" value="80">
            <span class="value-display" id="chunkDurationValue">80</span>
        </div>
        
        <div class="control-group">
            <label for="shakeIntensity">Shake Intensity:</label>
            <input type="range" id="shakeIntensity" min="0" max="20" value="3">
            <span class="value-display" id="shakeIntensityValue">3</span>
        </div>
        
        <div class="control-group">
            <label for="randomization">Timing Randomization (%):</label>
            <input type="range" id="randomization" min="0" max="100" value="50">
            <span class="value-display" id="randomizationValue">50</span>
        </div>
        
        <div class="control-group">
            <label for="maxChunks">Max Chunks per Char:</label>
            <input type="range" id="maxChunks" min="2" max="8" value="3">
            <span class="value-display" id="maxChunksValue">3</span>
        </div>
        
        <div class="method-info" id="methodInfo">
            <strong>Grid Method:</strong> Divides each character into rectangular sections based on a grid pattern. Good for uniform distribution of character parts.
        </div>
    </div>
    
    <canvas id="canvas"></canvas>
    
    <div class="stats">
        <span>Characters: <span id="charCount">0</span></span>
        <span>Active Method: <span id="activeMethod">Grid</span></span>
        <span>Canvas Size: <span id="canvasSize">0x0</span></span>
        <span>FPS: <span id="fps">60</span></span>
    </div>
</div>

content

headers

<div class="container">
    <h1>Font-Based Anti-Machine Text Display</h1>
    <p>Enter text below. All characters will use the selected chunking method to prevent machine reading while remaining human-readable.</p>
    
    <div class="controls">
        <div class="text-controls">
            <div class="control-group">
                <label for="textInput">Text Content:</label>
            </div>
            <textarea id="textInput" placeholder="Enter your text here... This system can handle long texts with multiple lines and will wrap them appropriately.">Trying to create text that AI cannot read which basically means it has to be screenshot proof?!</textarea>
        </div>
        
        <div class="control-group">
            <label for="chunkingMethod">Chunking Method:</label>
            <select id="chunkingMethod">
                <option value="radial">Radial (Pie slices)</option>
                <option value="grid">Grid (Rectangular sections)</option>
                <option value="horizontal">Horizontal (Strips)</option>
                <option value="vertical">Vertical (Columns)</option>
                <option value="diagonal">Diagonal (Slanted strips)</option>
                <option value="concentric">Concentric (Rings)</option>
                <option value="random">Random (Scattered)</option>
                <option value="spiral">Spiral (Curved pattern)</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSelect">Font Family:</label>
            <select id="fontSelect">
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Courier New">Courier New</option>
                <option value="Impact">Impact</option>
                <option value="Georgia">Georgia</option>
                <option value="Verdana">Verdana</option>
                <option value="Helvetica">Helvetica</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
            </select>
        </div>
        
        <div class="control-group">
            <label for="fontSize">Font Size:</label>
            <input type="range" id="fontSize" min="20" max="80" value="40">
            <span class="value-display" id="fontSizeValue">40</span>
        </div>
        
        <div class="control-group">
            <label for="lineHeight">Line Height:</label>
            <input type="range" id="lineHeight" min="1" max="3" step="0.1" value="1.5">
            <span class="value-display" id="lineHeightValue">1.5</span>
        </div>
        
        <div class="control-group">
            <label for="flashSpeed">Flash Speed (ms):</label>
            <input type="range" id="flashSpeed" min="20" max="300" value="20">
            <span class="value-display" id="flashSpeedValue">20</span>
        </div>
        
        <div class="control-group">
            <label for="chunkDuration">Chunk Duration (ms):</label>
            <input type="range" id="chunkDuration" min="20" max="200" value="80">
            <span class="value-display" id="chunkDurationValue">80</span>
        </div>
        
        <div class="control-group">
            <label for="shakeIntensity">Shake Intensity:</label>
            <input type="range" id="shakeIntensity" min="0" max="20" value="3">
            <span class="value-display" id="shakeIntensityValue">3</span>
        </div>
        
        <div class="control-group">
            <label for="randomization">Timing Randomization (%):</label>
            <input type="range" id="randomization" min="0" max="100" value="50">
            <span class="value-display" id="randomizationValue">50</span>
        </div>
        
        <div class="control-group">
            <label for="maxChunks">Max Chunks per Char:</label>
            <input type="range" id="maxChunks" min="2" max="8" value="3">
            <span class="value-display" id="maxChunksValue">3</span>
        </div>
        
        <div class="method-info" id="methodInfo">
            <strong>Grid Method:</strong> Divides each character into rectangular sections based on a grid pattern. Good for uniform distribution of character parts.
        </div>
    </div>
    
    <canvas id="canvas"></canvas>
    
    <div class="stats">
        <span>Characters: <span id="charCount">0</span></span>
        <span>Active Method: <span id="activeMethod">Grid</span></span>
        <span>Canvas Size: <span id="canvasSize">0x0</span></span>
        <span>FPS: <span id="fps">60</span></span>
    </div>
</div>

response