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>
This commit is contained in:
b1rdmania
@@ -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
|
||||
|
||||
- **What it does**: Search songs → pick a result → play the original MIDI → generate and play a Motif variant.
|
||||
- **Why it’s fun**: It’s like “hear a MIDI version of anything”, then remix it into something new.
|
||||
- **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 transform it into classic chiptune-style audio.
|
||||
- **Status**: Working locally end-to-end. Hosted frontend exists, backend hosting may be separate depending on deployment.
|
||||
|
||||
## Live demo
|
||||
@@ -18,7 +18,7 @@ Note: if the backend isn’t deployed/configured for the demo environment, searc
|
||||
|
||||
## 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:
|
||||
|
||||
@@ -44,7 +44,7 @@ Notes:\n- Autoplay is best-effort; iOS/Safari requires a user gesture before sou
|
||||
- Tone.js sampled piano
|
||||
- Soundfont piano
|
||||
- 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)
|
||||
|
||||
@@ -70,7 +70,7 @@ npm run dev
|
||||
4. Frontend parses MIDI into normalized note events
|
||||
5. User can:
|
||||
- **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
|
||||
|
||||
@@ -101,5 +101,5 @@ server/
|
||||
|
||||
- **More sources**: add/replace flaky scrapers with more reliable sources
|
||||
- **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
|
||||
+15
-15
@@ -3,12 +3,12 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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 -->
|
||||
<meta property="og:title" content="MOTIF">
|
||||
<meta property="og:description" content="Procedural Music Synthesis from MIDI">
|
||||
<meta property="og:image" content="/chiptune_blog_piece_1000x.webp">
|
||||
<meta property="og:title" content="WARIO SYNTH">
|
||||
<meta property="og:description" content="Turn any song into retro game console music">
|
||||
<meta property="og:image" content="/wario.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:type" content="website">
|
||||
@@ -16,12 +16,12 @@
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="MOTIF">
|
||||
<meta name="twitter:description" content="Procedural Music Synthesis from MIDI">
|
||||
<meta name="twitter:image" content="/chiptune_blog_piece_1000x.webp">
|
||||
<meta name="twitter:title" content="WARIO SYNTH">
|
||||
<meta name="twitter:description" content="Turn any song into retro game console music">
|
||||
<meta name="twitter:image" content="/wario.png">
|
||||
|
||||
<!-- 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>
|
||||
/* Design System: Synthwave - 8px grid, consistent neon accents */
|
||||
:root {
|
||||
@@ -1004,8 +1004,8 @@
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<button id="faqBtn" class="faq-link faq-top" type="button">FAQ</button>
|
||||
<h1>MOTIF</h1>
|
||||
<p class="tagline"><strong>Procedural music generated from MIDI structure</strong></p>
|
||||
<h1>WARIO SYNTH</h1>
|
||||
<p class="tagline"><strong>Turn any song into retro game console music</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
@@ -1078,7 +1078,7 @@
|
||||
<div id="generatedBlock" style="display:none;">
|
||||
<div class="engine-line" id="generatedTransform">
|
||||
Reimagined as classic game-console music<br />
|
||||
using Motif’s Wario engine.
|
||||
using the Wario Synthesis Engine.
|
||||
</div>
|
||||
|
||||
<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="label"><span class="handle">@b1rdmania</span><span aria-hidden="true">X</span></span>
|
||||
</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="label">GitHub</span>
|
||||
</a>
|
||||
@@ -1161,12 +1161,12 @@
|
||||
<main>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item">
|
||||
<h4>What is MOTIF?</h4>
|
||||
<p>Turn any song into retro <strong>Gameboy-style</strong> synth. Search a track, preview the MIDI, hit Generate.</p>
|
||||
<h4>What is WARIO SYNTH?</h4>
|
||||
<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 class="faq-item">
|
||||
<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 class="faq-item">
|
||||
<h4>Why "Enable Audio" on iPhone?</h4>
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||
<title>Check out this Gameboy tune — MOTIF</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." />
|
||||
<title>Check out this Gameboy tune — WARIO SYNTH</title>
|
||||
<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 -->
|
||||
<meta property="og:title" content="Check out this Gameboy tune" />
|
||||
<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:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
|
||||
<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 through the Wario Synthesis Engine — then generate your own." />
|
||||
<meta property="og:image" content="https://motif-self.vercel.app/wario.png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:type" content="website" />
|
||||
@@ -17,9 +17,9 @@
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Check out this Gameboy tune" />
|
||||
<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:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
|
||||
<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 through the Wario Synthesis Engine — then generate your own." />
|
||||
<meta name="twitter:image" content="https://motif-self.vercel.app/wario.png" />
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #0a0a0a;
|
||||
@@ -360,7 +360,7 @@
|
||||
<!-- 5/6. Metadata (quiet block) -->
|
||||
<div class="meta-block" id="metaBlock">
|
||||
Procedural playback from MIDI structure.<br />
|
||||
Rendered using Motif’s Wario game-console engine.
|
||||
Rendered using the Wario Synthesis Engine.
|
||||
</div>
|
||||
|
||||
<!-- 7. Primary CTA (single) -->
|
||||
|
||||
@@ -217,13 +217,13 @@ app.get('/s/:code', async (req, res) => {
|
||||
const origin = getOrigin(req);
|
||||
const shortUrl = origin ? `${origin}/s/${encodeURIComponent(code)}` : `/s/${encodeURIComponent(code)}`;
|
||||
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 ogTitle = sharedTitle ? `Check out this Gameboy tune: ${sharedTitle}` : 'Check out this Gameboy tune';
|
||||
const ogTitle = sharedTitle ? `WARIO SYNTH: ${sharedTitle}` : 'WARIO SYNTH';
|
||||
const ogDescription = sharedTitle
|
||||
? `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 "${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.';
|
||||
|
||||
const html = `<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
+4
-4
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MOTIF - UX Test</title>
|
||||
<title>WARIO SYNTH - UX Test</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #08080c;
|
||||
@@ -380,8 +380,8 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🎵 MOTIF</h1>
|
||||
<p class="tagline">Gameboy synth for any song</p>
|
||||
<h1>WARIO SYNTH</h1>
|
||||
<p class="tagline">Turn any song into retro game console music</p>
|
||||
</header>
|
||||
|
||||
<div class="search-box">
|
||||
@@ -854,7 +854,7 @@
|
||||
const url = await buildShortShareUrl();
|
||||
const niceTitle = cleanTitleForShare(currentTitle);
|
||||
// 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)}`;
|
||||
window.open(intent, '_blank', 'noopener,noreferrer');
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user