Polish Generate Effect panel UX and recovery flow

[smcga]

Motivation

• Improve the UX of the "Generate an effect" modal by removing duplicated spinners and large, inactive placeholders and making the workflow feel slick and low-friction.
• Reduce friction by removing the explicit "Set current as defaults" button and using the preview values as submitted defaults automatically.
• Provide clearer error/retry behavior and keep users engaged during generation by showing approved community effects while the generator runs, plus a musical countdown and polished reveal on success.

Description

• Reworked modal markup to reveal preview/code/submit panels only when relevant, increased idea input height, added a preview stage with countdown/shatter elements, a submit name field, and a bottom busy/retry sheet with previous/next showcase controls (index.html, src/style.css).
• Implemented busy/showcase/countdown/sanitization helpers and logic in src/main.ts and added src/effectIdeaUx.ts utilities for BPM timing, deterministic shuffle, and name sanitization; the flow now primes an approved-effects showcase during generation, shows a single busy sheet spinner, displays a retry error state, runs a 3-2-1 countdown at 177 BPM, then reveals the generated effect via a shatter animation and enables submission.
• Removed the separate "Set current as defaults" action and now persist the current preview param values into the submitted params payload automatically at submission time, and added client-side name sanitization with a sensible maxlength.
• Tests and docs: added src/effectIdeaUx.test.ts (unit tests for helpers), updated src/style.test.ts expectations, and updated README notes about the generator UX and defaults behavior.

Testing

• Ran unit tests with npm test -- --run src/effectIdeaUx.test.ts src/style.test.ts src/generatedEffectControls.test.ts src/effectIdeas.test.ts, and all tests passed (24 passed).
• Built the production bundle with npm run build which completed successfully (vite build finished).

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
codexperimental	Ready	Preview, Comment	Apr 7, 2026 11:30pm