PlateWEBSITE · PLATE PRO · V1.0.0
Riot Grain
A record label's release site drawn entirely by code: canvas letter bodies fall and settle under a hand-written Verlet physics solver, a pointer shove scatters and resettles them, and the tracklist, marquee, countdown and pre-order locker are all assembled from the same content file. No photographs, video, generated imagery or third-party art anywhere on the page.
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, render.js, verlet.js and content.js, with no build step, no dependencies and no libraries (the Verlet solver and easings are hand-written)
- content.js: label identity, three colour tokens, catalogue number, artist, release title, tracklist, night info, back catalogue, prices and every line of copy in one file
- EDITING.md: what each field does, the tracklist row bounds and the title-length limit the letter physics assumes
- Anton and DM Mono as WOFF2, re-subset to Latin + Latin Extended-A and each font's own currency glyphs, with their OFL-1.1 licence files
- README.md with the run command, and LICENSES.md, which lists the exact glyph coverage per font
WHAT YOU CAN CHANGE
- Label name, city, contact address, domain — content.js label
- Three colour tokens: ground, type, accent — content.js palette
- Catalogue number, artist, release title of 6–16 characters; the letter physics rebuilds for any title
- Tracklist with durations, 4–8 rows; side and total times, marquee, foot tape, J-card and reservation text are derived
- Release date for the live countdown and its written forms
- Night info: launch night rows, line-up, the record, the pressing, house rules, label paragraph
- Back catalogue spines (in-stock items become enquiry mailto links)
- Prices, pre-order mail subject and body, reservation and J-card text, download file names
- Credits sheet items and sticker shapes (from the five shapes in the sheet), end tape, nav labels
- Page title and meta description
NOT THIS
- Photographs, video or any imagery; the identity is type, tape and stickers
- More than one line of title letters, or titles over 16 characters (a 16-character title lands small on a 390px phone)
- A fourth colour, a light/dark toggle, or gradients
- Different fonts without replacing the woff2 files and the @font-face rules
- Payment, forms, analytics or any server side: pre-order is a mailto, reservation is a generated .txt
- Changing chapter order or count, or the number of tape strips, flying stickers and credit stickers, without editing render.js
- A shekel sign (₪) rendered in Anton or DM Mono — neither shipped font draws it, so a price or line using ₪ falls back to the reader's system font; DM Mono is also missing ₩ and ₹ and 21 Latin Extended-A letters (Esperanto/Sami/Greenlandic) its own source font never drew
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
- Any static file server (the page uses ES modules; file:// will not run it)
- Chrome/Edge 111+, Firefox 113+, Safari 16.4+
- JavaScript enabled; a browser without canvas 2D or with reduced motion gets the still poster version
The instructions to paste into your agent
Use Plate's Riot Grain, project riot-grain, 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=riot-grain, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=riot-grain 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: ccfce421cd5ca036a023e489df1b04fd5c254ff1414aa9e29c99807930f067fe (93683 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: - Label name, city, contact address, domain — content.js label - Three colour tokens: ground, type, accent — content.js palette - Catalogue number, artist, release title of 6–16 characters; the letter physics rebuilds for any title - Tracklist with durations, 4–8 rows; side and total times, marquee, foot tape, J-card and reservation text are derived - Release date for the live countdown and its written forms - Night info: launch night rows, line-up, the record, the pressing, house rules, label paragraph - Back catalogue spines (in-stock items become enquiry mailto links) - Prices, pre-order mail subject and body, reservation and J-card text, download file names - Credits sheet items and sticker shapes (from the five shapes in the sheet), end tape, nav labels - Page title and meta description Requirements: - Any static file server (the page uses ES modules; file:// will not run it) - Chrome/Edge 111+, Firefox 113+, Safari 16.4+ - JavaScript enabled; a browser without canvas 2D or with reduced motion gets the still poster version Limits: - Photographs, video or any imagery; the identity is type, tape and stickers - More than one line of title letters, or titles over 16 characters (a 16-character title lands small on a 390px phone) - A fourth colour, a light/dark toggle, or gradients - Different fonts without replacing the woff2 files and the @font-face rules - Payment, forms, analytics or any server side: pre-order is a mailto, reservation is a generated .txt - Changing chapter order or count, or the number of tape strips, flying stickers and credit stickers, without editing render.js - A shekel sign (₪) rendered in Anton or DM Mono — neither shipped font draws it, so a price or line using ₪ falls back to the reader's system font; DM Mono is also missing ₩ and ₹ and 21 Latin Extended-A letters (Esperanto/Sami/Greenlandic) its own source font never drew 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 |
|---|---|---|---|
| Anton | Google Fonts | SIL OFL 1.1 | Keep fonts/OFL-Anton.txt |
| DM Mono | Google Fonts | SIL OFL 1.1 | Keep fonts/OFL-DMMono.txt |
| Letters, stickers and tracklist | Drawn and physically simulated by the site's own code | Part of the pack; no third-party art, photographs or libraries | Nothing to credit |
MORE PROJECTS