Commit Graph

50 Commits

Author SHA1 Message Date
b1rdmania 679afbfa65 Rebrand to WARIO SYNTH
- Update site title, h1, taglines across all pages
- OpenGraph/Twitter meta tags now use wario.png
- FAQ updated to "What is WARIO SYNTH?"
- All references to "Motif engine" → "Wario Synthesis Engine"
- Share links now branded as WARIO SYNTH

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-29 10:34:31 +00:00
b1rdmania 134867cf93 Allow scrolling back to search after generation.
Keeps the search UI visible in generated mode (so you can scroll up), but locks it to prevent changing choices until tapping New search.
2025-12-26 21:29:17 +00:00
b1rdmania 9c6a47ab4e Add New search reset after generation.
Keeps the generated artifact view intact but provides a footer New search button that stops audio, resets state, scrolls to top, and focuses the search input.
2025-12-26 21:26:23 +00:00
b1rdmania 7cbf582fa1 Enable Copy link after generation and style it.
Refresh generated state after successful playback starts so Copy link becomes clickable, and boost its visual prominence without competing with Play.
2025-12-26 21:20:21 +00:00
b1rdmania 63618ec4fa Split selected vs generated UI on main page.
After generation starts, hide preview/source-changing/search affordances and switch to an artifact view: title, Wario transformation line, Play/Pause, timeline, volume, and Copy link.
2025-12-26 21:14:30 +00:00
b1rdmania fd422aa084 Make results a chooser and move preview to selected card.
Removes preview controls from search results, adds a 'Choosing a MIDI source' helper block, introduces selected/generated states, and keeps Preview original MIDI as a secondary action inside the selected source card.
2025-12-26 20:38:15 +00:00
b1rdmania 839d40447f Restore FAQ button at top-right.
Adds a top-right FAQ button in the hero while keeping a footer FAQ button, both opening the same modal.
2025-12-26 20:28:23 +00:00
b1rdmania b0c1b49d2a Remove volume controls and play at 100%.
Eliminates volume sliders on main and share pages and hard-sets preview + Motif playback volume to 1.0 across the app.
2025-12-26 20:25:38 +00:00
b1rdmania 7deb7bd4d9 Move MIDI preview controls into results table.
Adds per-row Play/Stop preview toggles, moves preview volume to the results header, and removes preview controls from the selected source card.
2025-12-26 19:27:16 +00:00
b1rdmania 9fc636a558 Refocus main page around search → select → generate.
Cleans result titles, adds a 'Use this' action, promotes a selected source card with Preview/Generate, collapses results after selection, and hides debug-ish metadata behind Details.
2025-12-26 19:21:28 +00:00
b1rdmania 0e0b64d6a2 Remove redundant preview controls bar.
Moves preview volume into the results header and relies on per-row Play/Stop controls.
2025-12-26 18:53:55 +00:00
b1rdmania f437bba281 Move MIDI preview playback into results table.
Adds per-row Play/Stop buttons and replaces the standalone preview box with compact preview volume/stop controls.
2025-12-26 18:42:31 +00:00
b1rdmania 88891afd8e Move Copy link to Generate & Play and align /play output.
Shows Copy link beside the synth engine controls and makes /play run procedural generation to match the main page.
2025-12-26 18:26:49 +00:00
b1rdmania 8160c87258 Add share link copy button and standardize volume.
Adds a Copy link action on the main page using /api/share shortlinks and sets default volumes to 70%.
2025-12-26 17:31:34 +00:00
b1rdmania 90b3450aa9 Ps. I love Claude Code.
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:36:20 +00:00
b1rdmania d8724c9d03 Tuck wario screenshot into FAQ (no dedicated section)
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:33:54 +00:00
b1rdmania cdd21647ca Add Wario easter egg to FAQ
We considered it.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:33:12 +00:00
b1rdmania 1b8c0ba0df Wario Synthesis Engine 🟡
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:28:11 +00:00
b1rdmania 213c801b29 Update card copy: Run the engine + waveform details
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:26:30 +00:00
b1rdmania 1deb11c60d Tweak synth section: Synthesis Engine / Gameboy emulator
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:21:50 +00:00
b1rdmania c26095834a Update synth section copy - tech/gamer vibe
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:21:27 +00:00
b1rdmania 5775a21387 Refresh FAQ copy - punchier, friendlier tone
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-20 13:18:12 +00:00
b1rdmania b3426f5ccd Revert "Add test models page and synth presets."
This reverts commit b7a79e93c9.
2025-12-20 12:28:02 +00:00
b1rdmania a60225d1d4 Revert "Isolate /models synth variants and revert main."
This reverts commit 633197b81a.
2025-12-20 12:28:02 +00:00
b1rdmania 633197b81a Isolate /models synth variants and revert main. 2025-12-20 12:21:39 +00:00
b1rdmania b7a79e93c9 Add test models page and synth presets. 2025-12-20 12:09:20 +00:00
b1rdmania 6caf5d6f01 Add X and GitHub links to FAQ header. 2025-12-20 11:46:43 +00:00
b1rdmania 241ea2f020 Add GitHub link to FAQ. 2025-12-20 11:43:09 +00:00
b1rdmania 7b7f854ffc Tighten FAQ copy and add X link. 2025-12-20 11:41:55 +00:00
b1rdmania 9c9bd0f9ae Add FAQ modal and link in header. 2025-12-19 23:40:00 +00:00
b1rdmania b20971f456 Add musical note icon to MOTIF title
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-19 23:37:32 +00:00
b1rdmania 9eb40ce614 Add iOS 'Enable Audio' CTA for Motif playback. 2025-12-18 23:21:41 +00:00
b1rdmania 234f6e38b5 Replace track count with source in results table
Changed table columns from Title | Duration | Tracks
to Title | Source | Duration - more useful to see where
the MIDI is from (BitMidi, etc.) than track count.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 21:23:12 +00:00
b1rdmania 02914bdcd0 Adjust 'Use on your website' UX to coming soon. 2025-12-18 21:08:08 +00:00
b1rdmania d0be58296e Add embeddable /embed widget and copy-paste snippet. 2025-12-18 20:58:35 +00:00
b1rdmania e33cd26238 Reference NES/Game Boy in Motif synthesis copy
Changed to "NES/Game Boy synthesis engine" to connect the technical
specs to the actual Nintendo hardware this style comes from.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:30:29 +00:00
b1rdmania a5bfde5c4e Simplify social preview title and description
Title: MOTIF
Description: Procedural Music Synthesis from MIDI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:29:20 +00:00
b1rdmania 74fdcfbeaa Add social preview image and update meta tags
- Added chiptune_blog_piece_1000x.webp as OpenGraph preview image
- Updated meta tags to point to webp file
- Social sharing on Telegram/Twitter will now show the retro gaming preview

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:28:35 +00:00
b1rdmania da0a0daa1f Update Motif copy to be more technically accurate
Changed from "Retro game console vibes" to explain the actual synthesis:
- Pure oscillator synthesis
- Triangle, square, and sawtooth waveforms
- Polyphonic chiptune generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:24:19 +00:00
b1rdmania 823d0290be Improve Motif Generation copy - less tech, more drama
Before:
- "Procedural Synthesis"
- "Web Audio oscillators with dynamic filtering and envelopes."

After:
- "Generate Your Variation"
- "Retro game console vibes. Same notes, entirely different energy."

Less nerdy spec sheet, more exciting payoff moment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:20:45 +00:00
b1rdmania 0cd50cba1f Fix iOS/mobile UX: simplified table + better touch targets
Mobile UX improvements:
- Simplify results table: Title | Duration | Tracks only
- Remove Source (always bitmidi) and Match columns
- Make entire row clickable - no button needed
- Hide Tracks column on mobile (<640px)
- Larger touch targets throughout

Progress bar fixes:
- Larger thumb (20px) for easier iOS touch
- Both 'input' and 'change' events for iOS compatibility
- Larger wrapper height (44px) for comfortable touch
- Scale animation on active thumb
- Better track styling

Table improvements:
- Mobile-responsive padding
- Better cursor states
- Cleaner selected state with accent border

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:16:08 +00:00
b1rdmania 7601909cda Simplify UX: single preview player before generation
UX Flow: Search → Preview → Generate

Changes:
- Remove 3-column player grid (Tone.js, Soundfont, Custom)
- Keep only Soundfont piano as simple preview
- New section title: "Preview - Review the MIDI before generation"
- Clean horizontal layout: Play | Stop | Volume | Try Next
- This sets up Motif generation as the main event
- Removed Tone.js and EnhancedMIDIPlayer dependencies
- Bundle size reduced from 314KB to 76KB (-238KB!)

Better flow with less confusion. Preview is quick, generation is the focus.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 20:07:09 +00:00
b1rdmania 00e4944971 Tighten UX with Synthwave design system
Design System: Synthwave aesthetic with 8px grid
- Add CSS variables for colors, spacing, shadows, glows
- Consistent 8px spacing grid throughout
- Unified border-radius (8px) and shadows
- Better typography scale and hierarchy
- Refined button styles with smooth transitions
- Tighter card layouts with hover effects
- Cleaner input fields with focus states
- More polished player boxes and sections
- Consistent use of neon accent colors (#00ff88, #ffaa44)
- Improved visual hierarchy and readability

All spacing now uses calc(var(--spacing-unit) * N) for consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:55:05 +00:00
b1rdmania a262f714e5 Improve Motif player layout and alignment
- Reorganize controls into a cleaner horizontal flow
- Place Generate, Stop, and Volume controls in one row
- Better visual alignment and spacing
- Progress bar section sits cleanly below controls
- Responsive flexbox layout that wraps on smaller screens
- Remove awkward two-column grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:20:52 +00:00
b1rdmania 3031614914 Add progress bar and seek controls to Motif player
- Add interactive progress bar with visual fill indicator
- Show current time and total duration
- Enable seeking/scrubbing through the synthesis
- Improve Motif player UX with cleaner layout
- Add progress tracking that updates 10x per second
- Format time display as MM:SS
- Progress bar appears when playback starts
- Seeking updates event indices for smooth playback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:17:02 +00:00
b1rdmania 1b10f006f9 Fix iOS zoom and production API configuration
- Fix iOS auto-zoom on input focus (set font-size: 16px)
- Lock viewport to prevent manual zoom (maximum-scale=1.0)
- Make API URL configurable via VITE_API_URL environment variable
- Add TypeScript types for Vite environment variables
- Create deployment guide with Vercel/backend setup instructions
- Add .env.example for local development configuration
- Add vercel.json for unified frontend/backend deployment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-18 19:09:23 +00:00
b1rdmania 5a6921c483 Polish UI layout and highlight Motif section. 2025-12-18 15:03:27 +00:00
b1rdmania 2c9d06d8d7 Improve MIDI search and add browser playback engines. 2025-12-18 14:25:38 +00:00
b1rdmania 177e8fbed3 Implement complete search results + dual player UI
Backend Enhancements:
- Add ParsedMIDIInfo with track analysis and quality issues
- New /api/midi/parse endpoint for MIDI metadata extraction
- Enhanced MIDIService with parseMIDI method

MIDI Preview Player:
- Complete MIDIPlayer class with polyphonic playback
- Basic oscillator mapping (bass=square, mid=triangle, high=sine)
- Lookahead scheduling with proper cleanup
- Automatic stopping when MIDI ends

New UI Flow:
1. Search → Results table with metadata
2. Select MIDI → Shows parsed info (duration, tracks, tempo)
3. Dual transport: Preview Original vs Generate Motif
4. Try Next Result button for easy A/B testing

Search Results Table:
- Title, source, confidence bar, duration, track count
- Quality issues display (short duration, few notes, etc.)
- Auto-select best result, manual selection available
- Visual confidence bars and issue warnings

This makes the project feel "real" - you can now:
- See exactly what MIDI was found
- Verify it's the right song via preview
- Compare original vs procedural synthesis
- Easily try different results

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 21:04:29 +00:00
b1rdmania 4b7836b925 Initial Motif project setup
- Web Audio + TypeScript procedural synthesis engine
- Role-based MIDI structure extraction
- Vite build tooling and development setup
- Core architecture: Engine, RoleMapper, SynthesisEngine
- Minimal UI for testing synthesis generation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-17 20:33:48 +00:00