PlateWEBSITE · PLATE PRO · V1.0.0
Nami
A launch site for an invented sixteen-pad pocket synth, where the page is the instrument. three.js renders one room, and a print pass turns it into a two-ink halftone in ultraviolet and cream, with tangerine as a spot ink that only appears where there is sound. The viewport is the synth's 4 x 4 pad grid: moving the cursor into a square plays that pad, a click is an accented chord hit, and every note lights the pad, pops beads that bounce on a giant speaker and sends a ripple through the floor from the point you touched. A 118 BPM sequencer plays the song by scroll section, intro, the beat, breakdown, the drop and the outro with the pre-order, while the camera makes one move through the room. All sound is synthesised in the browser; there are no samples.
Complete single-page websitePlate Pro · $49.50 once
Included in Plate Pro: $49.50 once at the launch price (regularly $89), no subscription, with v1 updates. One payment covers every current Pro website and film.
Taxes depend on your location. Polar shows the tax breakdown and final total at checkout.
WHAT YOU RECEIVE
- The complete source: index.html, style.css, main.js and audio.js, with no build step and three.js r181 vendored as two ES modules
- The print pass: one post shader that gradient-maps the render into the inks and screens cream at 15 degrees and tangerine at 45 degrees, with dot gain, misregistration, paper fibre, a soft lens and halation
- The instrument: ten synthesised voices (pluck, arp, chord, stab, kick, hat, clap, bass, riser, impact) on one bus with a compressor, a generated reverb and a dotted-eighth delay, and a five-section sequencer
- EDITING.md: where every word lives, the synth voices and the sequencer, the halftone parameters, the palette, the scroll song sections and the camera, and the rules the engine depends on
- Archivo and Fragment Mono as WOFF2 with their OFL-1.1 licence files, and the three.js MIT licence
- README.md with the run command, and LICENSES.md
WHAT YOU CAN CHANGE
- All copy: the five section headlines and notes, the pre-order, the loader line and the page title - index.html
- The section names in the corner and on the synth's screen - main.js NAMES; the wordmark and model line printed on the synth - main.js redrawDecal()
- The sixteen pad notes - audio.js PADS; the tempo - audio.js BPM
- The song: the chord progression, the arpeggio and each section's pattern - main.js CH, ARP and schedule()
- The sound of every voice - the functions in audio.js V; the reverb, delay and compressor - audio.js buildBus()
- The print: dot pitch, screen angles, ink thresholds, misregistration, lens and vignette - the post shader at the top of main.js and uDot in frame()
- The palette - main.js INK and four CSS tokens in style.css
- The camera stop for each section, desktop and phone - main.js P_D and P_M
NOT THIS
- A shop or order backend - the pre-order button plays a chord and changes its label; it does not take an order
- Recorded samples or audio files - every sound is synthesised in audio.js
- MIDI input, recording or saving what the visitor plays
- Software rendering - without a GPU the room and the print pass are too heavy and there is no still fallback
- More sections than the five built - a new section needs a camera stop, a pattern in schedule() and new HTML
USE IT WITH YOUR CODING AGENT
You download it. Your agent makes it yours.
- Get Plate Pro, or sign in if you already have it, and download the ZIP from the library.
- Check its SHA-256 against the one below, and extract it into a new, empty folder.
- Open that folder in Claude Code, Codex or Cursor. Plate never asks your agent for your password or licence key; you do the download, the agent does the edit.
- Paste the instructions below and fill in your project name and changes. The agent reads the included README and licences, edits the supported files, runs the site and reports what it checked.
REQUIREMENTS
- An evergreen browser with WebGL2 and Web Audio, on real GPU hardware
- Any static file server, e.g. python -m http.server 8080 (ES modules do not load from file://)
- Desktop and phones down to 390 px; on touch a tap plays the square under it, and sound starts on the first gesture
The instructions to paste into your agent
Use Plate's Nami, project nami, version 1.0.0, as the starting point. Requested result: [my project name]. My changes: [describe the changes before beginning] Before you edit anything, ask me for the project name and the changes I want. Do not invent a brand, a client, copy or a result. Scope: Complete single-page website. Use the existing source and assets. Read its README and licence notices first. Preserve unrelated work and make changes in a separate project folder. The project is a Plate Pro pack. Download it from the Plate library (https://getplate.pages.dev/library.html?project=nami, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=nami and only with Pro. If you cannot sign in, tell me and I will download the ZIP and put it in your workspace myself. Verify SHA-256: f3f43308688f3b45d7622b268cd3ba9f12015875687b4fac4169b8c841232ab3 (525604 bytes, version 1.0.0). Extract into a new folder and follow its README to run it. Make content changes in content.js as EDITING.md describes; the supported changes below live there. Do not rewrite the renderer or the layout to make a content change. Supported changes: - All copy: the five section headlines and notes, the pre-order, the loader line and the page title - index.html - The section names in the corner and on the synth's screen - main.js NAMES; the wordmark and model line printed on the synth - main.js redrawDecal() - The sixteen pad notes - audio.js PADS; the tempo - audio.js BPM - The song: the chord progression, the arpeggio and each section's pattern - main.js CH, ARP and schedule() - The sound of every voice - the functions in audio.js V; the reverb, delay and compressor - audio.js buildBus() - The print: dot pitch, screen angles, ink thresholds, misregistration, lens and vignette - the post shader at the top of main.js and uDot in frame() - The palette - main.js INK and four CSS tokens in style.css - The camera stop for each section, desktop and phone - main.js P_D and P_M Requirements: - An evergreen browser with WebGL2 and Web Audio, on real GPU hardware - Any static file server, e.g. python -m http.server 8080 (ES modules do not load from file://) - Desktop and phones down to 390 px; on touch a tap plays the square under it, and sound starts on the first gesture Limits: - A shop or order backend - the pre-order button plays a chord and changes its label; it does not take an order - Recorded samples or audio files - every sound is synthesised in audio.js - MIDI input, recording or saving what the visitor plays - Software rendering - without a GPU the room and the print pass are too heavy and there is no still fallback - More sections than the five built - a new section needs a camera stop, a pattern in schedule() and new HTML Run the whole website. Inspect the opening, middle and ending on desktop and phone. Check the actual motion, navigation, reduced motion and missing-media recovery. Deliver the edited source, actual preview or render, exact start commands and any remaining limitations. Do not purchase services, invent claims, post or deploy without my instruction.
CREDITS, VERSION, ARCHIVE
What travels with it
| What | Source | Licence | Keep |
|---|---|---|---|
| Archivo | The Archivo Project Authors (Omnibus-Type), Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-Archivo.txt |
| Fragment Mono | The Fragment-Mono Project Authors, Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-FragmentMono.txt |
| three.js r181 | three.js authors | MIT | Keep vendor/THREE-LICENSE.txt |
MORE PROJECTS