Free Online Haiku Syllable Counter and Formatter

Application Overview

This single-file web application serves as a dedicated environment for writing, checking, and formatting Haiku poetry. It provides an intuitive, distraction-free interface where users can type lines of text and receive immediate, color-coded feedback on their syllable counts to ensure they match the classic 5-7-5 Haiku structure.

Core Features

• Real-Time Syllable Analysis: As the user types, the app calculates the syllable count for each line using a custom Vanilla JavaScript engine.
• Visual Structure Validation: Each line displays an indicator (e.g., green for correct count, red for incorrect) showing how close the line is to the 5-7-5 target.
• Poetry Formatter: A clean, centered view that highlights the poem in a professional font, suitable for screenshots or sharing.
• One-Click Copy: A utility to copy the formatted text directly to the system clipboard.
• Distraction-Free Mode: A focus-first layout that hides secondary UI elements when writing.

UI/UX Design

• Color Palette: Use a light, sophisticated aesthetic. Primary colors: soft indigo (#4F46E5) for active elements, warm neutral grays (#F9FAFB) for backgrounds, and high-contrast dark text (#111827) for readability. Success state: emerald green (#10B981). Error state: rose red (#F43F5E).
• Layout: A vertically centered card layout. The main input area is a clean, bordered textarea with no default browser outline. Below the textarea, three distinct counters are shown for each line.
• Typography: Use system sans-serif fonts with generous line-height for legibility.
• Micro-interactions: Use subtle CSS transition effects when an indicator changes from an 'incorrect' to a 'correct' state (e.g., a smooth border color fade and a gentle scale-up animation).

Technical Requirements (Strict Compliance)

• Single-File Architecture: All CSS, HTML, and JS must reside in one .html file.
• No Storage: Do not use localStorage, sessionStorage, or cookies. Keep all state in volatile variables.
• Sandbox Safety: Use only native browser APIs. Avoid alert() or prompt(). Use custom modal components if user interaction is needed.
• Responsive Design: The app must adapt gracefully. On mobile, the input field should expand to take up 95% of the viewport width. On desktop, cap the width at 600px to maintain line readability.
• External Assets: Only link to reliable CDNs for CSS (e.g., Tailwind CSS via CDN) and font icons (e.g., Lucide or FontAwesome). Do not rely on local assets.

Developer Implementation Guidelines

1. Syllable Algorithm: Implement a regex-based vowel-counting logic in app.js. Handle special cases (e.g., silent 'e' at word endings, diphthongs, and vowel clusters like 'ou' or 'ie') to achieve high-accuracy estimation.
2. No Frameworks: Use standard document.getElementById and addEventListener patterns for DOM updates. Keep the codebase lightweight.
3. Performance: Execute syllable counting logic on the input event with a small debounce (150ms) to ensure smooth UI performance during rapid typing.