Add loading modal with animated words (randomized color + animation style) to design spec

docs/superpowers/specs/2025-04-12-english-style-converter-design.md

@@ -146,14 +146,42 @@ Single page, centered, minimal. Light palette only.
 - Output display area with Copy button
 - Collapsible "Show prompt" section below output revealing system and user prompts
 
+### Loading Modal
+
+When the user clicks Convert and the LLM request is in flight, a **modal dialog** appears with an animated loading word. This replaces a boring spinner with delightful, personality-driven feedback.
+
+**Behavior:**
+- Modal overlays the page content, preventing interaction during conversion
+- Displays one playful verb at a time, cycling every ~2 seconds
+- Each letter of the word animates in sequentially (per-letter animation, inspired by Tobias Ahlin's Moving Letters)
+- Each new word gets a **randomized color** from a curated light palette
+- Each new word gets a **randomized animation style** from a set of entrance animations (slide-up, bounce-in, drop-in, fade-scale, spin-in, spring-from-left, etc.)
+- When the LLM response arrives, the modal dismisses immediately
+
+**Loading word list:**
+Bamboozling · Razzmatazzing · Transmogrifying · Alakazamming · Prestidigitating · Metamorphosizing · Enchanting · Voodooing · Witchcrafting · Sorcerizing · Spellcasting · Hocus-pocusing · Incantating · Conjurating · Charmweaving
+
+**Animation styles (randomized per word):**
+- Slide up from below
+- Bounce in from above
+- Drop in with gravity
+- Scale up from center
+- Fade + rotate in
+- Spring in from left
+
+**Color palette (randomized per word, all light-friendly):**
+A set of vibrant but light-appropriate accent colors (coral, teal, violet, amber, emerald, rose, sky blue)
+
+This is a signature UX moment — the loading modal should feel magical and fun.
+
 ### Interaction Flow
 
 1. User types or pastes text
 2. Selects category, sub-style dropdown populates
 3. Adjusts intensity slider (default: 3)
-4. Clicks Convert, loading state
-5. Result appears with Copy button
-6. "Show prompt" reveals full system + user prompt (collapsible, hidden by default)
+4. Clicks Convert — **loading modal appears with animated words**
+5. LLM responds — modal dismisses, result appears with Copy button
+6. "Show prompt" reveals the full system + user prompt sent to the LLM (collapsible, hidden by default)
 7. Errors display in the output area, never as browser alerts
 
 ### Svelte 5 Runes
@@ -163,11 +191,11 @@ Single page, centered, minimal. Light palette only.
 
 ### UI Details
 
-- Light palette - white/off-white background, subtle borders, accent color on Convert button
-- No dark mode
-- Responsive - stacked full-width on mobile, centered max-width on desktop
-- Copy button - navigator.clipboard with confirmation
-- No streaming - full response then display (v2 candidate)
+- **Light palette** - white/off-white background, subtle borders, accent color on Convert button
+- **No dark mode**
+- **Responsive** - stacked full-width on mobile, centered max-width on desktop
+- **Copy button** - navigator.clipboard with confirmation
+- **No streaming** - full response then display (v2 candidate)
 
 ## Testing Strategy
 
@@ -194,6 +222,7 @@ Single page, centered, minimal. Light palette only.
 7. Copy button works
 8. Prompt section expands/collapses with correct content
 9. Works on mobile viewport
+10. Loading modal shows animated words with randomized colors and animation styles
 
 ## Scope - MVP1
 
@@ -201,6 +230,7 @@ Single page, centered, minimal. Light palette only.
 - Single style at a time
 - Intensity slider (1-5)
 - Collapsible prompt display
+- Loading modal with animated words (randomized color + animation style)
 - .env-only LLM config
 - OpenAI-compatible client (Ollama default)
 - Light-only, minimal UI