diff --git a/NUL b/NUL deleted file mode 100644 index 3d58c2c..0000000 --- a/NUL +++ /dev/null @@ -1,3 +0,0 @@ -dir: cannot access 'C:\Users\simpl\.agents\skills': No such file or directory -dir: cannot access '/s': No such file or directory -dir: cannot access '/b': No such file or directory diff --git a/docs/superpowers/specs/2025-04-12-english-style-converter-design.md b/docs/superpowers/specs/2025-04-12-english-style-converter-design.md index 4316fc8..40b92ea 100644 --- a/docs/superpowers/specs/2025-04-12-english-style-converter-design.md +++ b/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