Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand to WARIO SYNTH

Browse Source 
- 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>
This commit is contained in:
b1rdmania
2025-12-29 10:34:31 +00:00
parent b48fb4b7de
commit 679afbfa65
5 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -9
View File
@@ -1,13 +1,13 @@
# MOTIF # WARIO SYNTH
Search real MIDI, play it in-browser, then generate a Motif variation. Turn any song into retro game console music using the Wario Synthesis Engine.
MOTIF is a small experiment in **music-as-code**: treat MIDI as structural data, not audio. It pulls MIDI patterns from the web, plays the original performance, then generates a “similar-but-different” procedural version using Web Audio. WARIO SYNTH is a small experiment in **music-as-code**: treat MIDI as structural data, not audio. It pulls MIDI patterns from the web, plays the original performance, then generates a retro Gameboy-style procedural version using the Wario Synthesis Engine and Web Audio.
## About ## About
- **What it does**: Search songs → pick a result → play the original MIDI → generate and play a Motif variant. - **What it does**: Search songs → pick a result → play the original MIDI → generate retro game console music with the Wario Synthesis Engine.
- **Why it’s fun**: It’s like “hear a MIDI version of anything”, then remix it into something new. - **Why it's fun**: It's like "hear a MIDI version of anything", then transform it into classic chiptune-style audio.
- **Status**: Working locally end-to-end. Hosted frontend exists, backend hosting may be separate depending on deployment. - **Status**: Working locally end-to-end. Hosted frontend exists, backend hosting may be separate depending on deployment.
## Live demo ## Live demo
@@ -18,7 +18,7 @@ Note: if the backend isn’t deployed/configured for the demo environment, searc
## Use on your website (embed) ## Use on your website (embed)
MOTIF includes an embeddable widget page at **`/embed`**. It generates audio in the user’s browser (no audio files needed). WARIO SYNTH includes an embeddable widget page at **`/embed`**. It generates audio in the user's browser (no audio files needed).
Example: Example:
@@ -44,7 +44,7 @@ Notes:\n- Autoplay is best-effort; iOS/Safari requires a user gesture before sou
- Tone.js sampled piano - Tone.js sampled piano
- Soundfont piano - Soundfont piano
- Custom WebAudio synth preview - Custom WebAudio synth preview
- **Motif generation**: role-based synthesis (bass / drone / ostinato / texture / accents) from parsed MIDI structure - **Wario Synthesis Engine**: role-based synthesis (bass / drone / ostinato / texture / accents) from parsed MIDI structure
## Quick start (local) ## Quick start (local)
@@ -70,7 +70,7 @@ npm run dev
4. Frontend parses MIDI into normalized note events 4. Frontend parses MIDI into normalized note events
5. User can: 5. User can:
- **Play original MIDI** (soundfont/sampler playback), or - **Play original MIDI** (soundfont/sampler playback), or
- **Generate Motif** (procedural Web Audio synthesis derived from structure) - **Generate with Wario Synthesis Engine** (procedural Web Audio synthesis derived from structure)
## Backend API ## Backend API
@@ -101,5 +101,5 @@ server/
- **More sources**: add/replace flaky scrapers with more reliable sources - **More sources**: add/replace flaky scrapers with more reliable sources
- **Better matching**: smarter ranking + metadata validation - **Better matching**: smarter ranking + metadata validation
- **Motif controls**: “more ominous”, “more dancey”, “more ambient”, etc. - **Synthesis controls**: "more ominous", "more dancey", "more ambient", etc.
- **Deployment**: host backend and wire frontend to it via env config - **Deployment**: host backend and wire frontend to it via env config
index.html
+15 -15
View File
@@ -3,12 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Motif - Procedural Music Synthesis</title> <title>WARIO SYNTH - Retro Game Console Music</title>
<!-- OpenGraph / Social Media Preview --> <!-- OpenGraph / Social Media Preview -->
<meta property="og:title" content="MOTIF"> <meta property="og:title" content="WARIO SYNTH">
<meta property="og:description" content="Procedural Music Synthesis from MIDI"> <meta property="og:description" content="Turn any song into retro game console music">
<meta property="og:image" content="/chiptune_blog_piece_1000x.webp"> <meta property="og:image" content="/wario.png">
<meta property="og:image:width" content="1200"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630"> <meta property="og:image:height" content="630">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@@ -16,12 +16,12 @@
<!-- Twitter Card --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOTIF"> <meta name="twitter:title" content="WARIO SYNTH">
<meta name="twitter:description" content="Procedural Music Synthesis from MIDI"> <meta name="twitter:description" content="Turn any song into retro game console music">
<meta name="twitter:image" content="/chiptune_blog_piece_1000x.webp"> <meta name="twitter:image" content="/wario.png">
<!-- General Meta --> <!-- General Meta -->
<meta name="description" content="Transform MIDI files into retro synthesized variations. Search for songs, preview them, and generate new procedural versions with retro game console vibes."> <meta name="description" content="WARIO SYNTH - Transform any song into retro Gameboy-style game console music. Search, preview MIDI, and generate chiptune versions.">
<style> <style>
/* Design System: Synthwave - 8px grid, consistent neon accents */ /* Design System: Synthwave - 8px grid, consistent neon accents */
:root { :root {
@@ -1004,8 +1004,8 @@
<div class="container"> <div class="container">
<div class="hero"> <div class="hero">
<button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button> <button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button>
<h1>MOTIF</h1> <h1>WARIO SYNTH</h1>
<p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p> <p class="tagline"><strong>Turn any song into retro game console music</strong></p>
</div> </div>
<div class="controls"> <div class="controls">
@@ -1078,7 +1078,7 @@
<div id="generatedBlock" style="display:none;"> <div id="generatedBlock" style="display:none;">
<div class="engine-line" id="generatedTransform"> <div class="engine-line" id="generatedTransform">
Reimagined as classic game-console music<br /> Reimagined as classic game-console music<br />
using Motif’s Wario engine. using the Wario Synthesis Engine.
</div> </div>
<div style="display:flex; justify-content:center; margin-top: 14px; margin-bottom: 14px;"> <div style="display:flex; justify-content:center; margin-top: 14px; margin-bottom: 14px;">
@@ -1150,7 +1150,7 @@
<span class="dot" aria-hidden="true"></span> <span class="dot" aria-hidden="true"></span>
<span class="label"><span class="handle">@b1rdmania</span><span aria-hidden="true">X</span></span> <span class="label"><span class="handle">@b1rdmania</span><span aria-hidden="true">X</span></span>
</a> </a>
<a href="https://github.com/b1rdmania/motif" target="_blank" rel="noopener noreferrer" aria-label="Open the MOTIF GitHub repository"> <a href="https://github.com/b1rdmania/motif" target="_blank" rel="noopener noreferrer" aria-label="Open the WARIO SYNTH GitHub repository">
<span class="dot" aria-hidden="true"></span> <span class="dot" aria-hidden="true"></span>
<span class="label">GitHub</span> <span class="label">GitHub</span>
</a> </a>
@@ -1161,12 +1161,12 @@
<main> <main>
<div class="faq-grid"> <div class="faq-grid">
<div class="faq-item"> <div class="faq-item">
<h4>What is MOTIF?</h4> <h4>What is WARIO SYNTH?</h4>
<p>Turn any song into retro <strong>Gameboy-style</strong> synth. Search a track, preview the MIDI, hit Generate.</p> <p>Turn any song into retro <strong>Gameboy-style</strong> synth using the Wario Synthesis Engine. Search a track, preview the MIDI, hit Generate.</p>
</div> </div>
<div class="faq-item"> <div class="faq-item">
<h4>How does it work?</h4> <h4>How does it work?</h4>
<p>We scrape MIDI files from the web, analyse the structure (melody, bass, chords), then resynthesise with an emulation engine. Light touch and runs in any browser through <strong>Web Audio</strong>.</p> <p>We scrape MIDI files from the web, analyse the structure (melody, bass, chords), then resynthesise with the <strong>Wario Synthesis Engine</strong>. Light touch and runs in any browser through <strong>Web Audio</strong>.</p>
</div> </div>
<div class="faq-item"> <div class="faq-item">
<h4>Why "Enable Audio" on iPhone?</h4> <h4>Why "Enable Audio" on iPhone?</h4>
play.html
+9 -9
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Check out this Gameboy tune — MOTIF</title> <title>Check out this Gameboy tune — WARIO SYNTH</title>
<meta name="description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." /> <meta name="description" content="Someone shared a song with you. Press play to hear it through the Wario Synthesis Engine — then generate your own." />
<!-- OpenGraph / Social Media Preview --> <!-- OpenGraph / Social Media Preview -->
<meta property="og:title" content="Check out this Gameboy tune" /> <meta property="og:title" content="Check out this Gameboy tune — WARIO SYNTH" />
<meta property="og:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." /> <meta property="og:description" content="Someone shared a song with you. Press play to hear it through the Wario Synthesis Engine — then generate your own." />
<meta property="og:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" /> <meta property="og:image" content="https://motif-self.vercel.app/wario.png" />
<meta property="og:image:width" content="1200" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" /> <meta property="og:image:height" content="630" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@@ -17,9 +17,9 @@
<!-- Twitter Card --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Check out this Gameboy tune" /> <meta name="twitter:title" content="Check out this Gameboy tune — WARIO SYNTH" />
<meta name="twitter:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." /> <meta name="twitter:description" content="Someone shared a song with you. Press play to hear it through the Wario Synthesis Engine — then generate your own." />
<meta name="twitter:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" /> <meta name="twitter:image" content="https://motif-self.vercel.app/wario.png" />
<style> <style>
:root { :root {
--color-bg: #0a0a0a; --color-bg: #0a0a0a;
@@ -360,7 +360,7 @@
<!-- 5/6. Metadata (quiet block) --> <!-- 5/6. Metadata (quiet block) -->
<div class="meta-block" id="metaBlock"> <div class="meta-block" id="metaBlock">
Procedural playback from MIDI structure.<br /> Procedural playback from MIDI structure.<br />
Rendered using Motif’s Wario game-console engine. Rendered using the Wario Synthesis Engine.
</div> </div>
<!-- 7. Primary CTA (single) --> <!-- 7. Primary CTA (single) -->
server/src/server.ts
+4 -4
View File
@@ -217,13 +217,13 @@ app.get('/s/:code', async (req, res) => {
const origin = getOrigin(req); const origin = getOrigin(req);
const shortUrl = origin ? `${origin}/s/${encodeURIComponent(code)}` : `/s/${encodeURIComponent(code)}`; const shortUrl = origin ? `${origin}/s/${encodeURIComponent(code)}` : `/s/${encodeURIComponent(code)}`;
const playUrl = origin ? `${origin}${dest}` : dest; const playUrl = origin ? `${origin}${dest}` : dest;
const imageUrl = origin ? `${origin}/chiptune_blog_piece_1000x.webp` : '/chiptune_blog_piece_1000x.webp'; const imageUrl = origin ? `${origin}/wario.png` : '/wario.png';
const sharedTitle = (payload.title || '').trim(); const sharedTitle = (payload.title || '').trim();
const ogTitle = sharedTitle ? `Check out this Gameboy tune: ${sharedTitle}` : 'Check out this Gameboy tune'; const ogTitle = sharedTitle ? `WARIO SYNTH: ${sharedTitle}` : 'WARIO SYNTH';
const ogDescription = sharedTitle const ogDescription = sharedTitle
? `Someone shared “${sharedTitle}” with you. Tap to play it through the Wario synthesis engine — then generate your own.` ? `Someone shared "${sharedTitle}" with you. Tap to play it through the Wario Synthesis Engine — then generate your own.`
: 'Someone shared a song with you. Tap to play it through the Wario synthesis engine — then generate your own.'; : 'Someone shared a song with you. Tap to play it through the Wario Synthesis Engine — then generate your own.';
const html = `<!doctype html> const html = `<!doctype html>
<html lang="en"> <html lang="en">
ux-test.html
+4 -4
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOTIF - UX Test</title> <title>WARIO SYNTH - UX Test</title>
<style> <style>
:root { :root {
--bg: #08080c; --bg: #08080c;
@@ -380,8 +380,8 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>🎵 MOTIF</h1> <h1>WARIO SYNTH</h1>
<p class="tagline">Gameboy synth for any song</p> <p class="tagline">Turn any song into retro game console music</p>
</header> </header>
<div class="search-box"> <div class="search-box">
@@ -854,7 +854,7 @@
const url = await buildShortShareUrl(); const url = await buildShortShareUrl();
const niceTitle = cleanTitleForShare(currentTitle); const niceTitle = cleanTitleForShare(currentTitle);
// Keep tweet text clean; URL is passed separately. // Keep tweet text clean; URL is passed separately.
const text = niceTitle ? `MOTIF chiptune: ${niceTitle}` : 'MOTIF chiptune'; const text = niceTitle ? `WARIO SYNTH: ${niceTitle}` : 'WARIO SYNTH chiptune';
const intent = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`; const intent = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
window.open(intent, '_blank', 'noopener,noreferrer'); window.open(intent, '_blank', 'noopener,noreferrer');
})(); })();