Paintiano — PWA
Music → φ painting. A Progressive Web App that turns songs, MIDI, audio, PDFs, and images into a colored chord painting laid out on the golden-ratio grid.
What this is
A standalone, installable web app. Same code that ran as a Claude artifact, but unwrapped from the sandbox — so file downloads, the iOS share sheet, the clipboard, and Add to Home Screen all work natively.
Built with Vite + React + Tone.js + vite-plugin-pwa. No backend. Everything runs in the browser.
Quick start (local dev)
You'll need Node.js 18+ installed.
npm install
npm run dev
Open http://localhost:5173. Hot-reload on edits.
Building for production
npm run build
Output lands in dist/. That folder is a complete static site — drop it on any static host.
To preview the production build locally:
npm run preview
It serves on http://localhost:4173.
Installing on your iPhone (PWA)
Once deployed (see below), open the deployed URL in Safari on your iPhone, then:
- Tap the Share icon (square with up arrow) at the bottom
- Scroll down → Add to Home Screen
- Name it "Paintiano" → Add
A Paintiano icon appears on your home screen. Tap it — it opens full-screen, no Safari chrome, behaves like a native app. Works offline once cached.
The 🖨 PRINT button will use real iOS share sheet and real file system access — no clipboard workarounds needed.
Deployment — pick one
Option 1: Vercel (easiest, zero config)
- Push this folder to a GitHub repo
- Go to vercel.com/new, import the repo
- Vercel auto-detects Vite, builds, and deploys. Done in ~30 seconds
- Custom domain: optional, free
Option 2: Netlify (also one-click)
- Push to GitHub
- Go to app.netlify.com/start, connect the repo
- Build command:
npm run build. Publish directory: dist
- Deploy
Option 3: GitHub Pages (free forever)
# Build
npm run build
# Push dist/ to a gh-pages branch (one-time install)
npm install -g gh-pages
npx gh-pages -d dist
Then on GitHub repo Settings → Pages → source: gh-pages branch.
Option 4: Any static host
Cloudflare Pages, Firebase Hosting, S3, your own server with nginx — anything that serves static files works. Just upload the contents of dist/.
Important: the host must serve over HTTPS for the PWA to install and for the clipboard / share APIs to work. All four options above provide HTTPS automatically.
Project layout
paintiano-pwa/
├── package.json # deps + scripts
├── vite.config.js # Vite + PWA plugin config
├── index.html # entry HTML
├── public/
│ ├── favicon.svg # SVG favicon
│ ├── icon-192.png # PWA icon
│ ├── icon-512.png # PWA icon
│ └── icon-maskable.png # Android adaptive icon
└── src/
├── main.jsx # React entry
└── Paintiano.jsx # the whole app (BUILD #70)
Everything is in src/Paintiano.jsx — about 560 KB of code + embedded Liebestraum MIDI/MP3 samples + Scream image sample. That's the entire app.
Customizing icons / name
public/icon-*.png, public/favicon.svg — replace with your ownvite.config.js → manifest section — name, short_name, theme color, etc.index.html → <title> and <meta> tags
Tech notes
- Tone.js loads Salamander Grand piano samples from a CDN. Plays fine on the first interaction; falls back to oscillator synth if blocked.
- Service worker precaches everything for offline use. Bumped cache size limit to 10 MB because the JSX has embedded base64 sample files.
- PWA manifest generated automatically by vite-plugin-pwa at
/manifest.webmanifest.
License
Whatever you want. This is your app now.
