PlateWEBSITE · PLATE PRO · V1.0.0
Weft
A product site for an invented silk-scarf atelier, built as one studio photograph of one silk carré. A real cloth simulation hangs the square between two lines of Bodoni, in front of "Worn" and behind "by the wind.", on a vermilion paper backdrop with film grain, a shallow lens, warm halation and window light. The cursor is the air and a click is a gust. Scrolling re-dyes the same silk cobalt and then viridian: each dye wicks in from one corner and then floods the room. After that the carré tips flat and falls over an unseen form, and the page ends with it streaming on the wind behind "Let it go." and a single order button.
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 print.js, with no build step and three.js r181 vendored beside it
- A 64 x 64 verlet cloth (48 x 48 on phones) with a hand-rolled hem, cursor wind, click gusts, four poses and a drape over a hidden sphere
- The photograph pass: depth of field around the silk, warm halation and a film grade, in our own shaders after three.js, with film grain and window light laid over the frame
- The scarf's print drawn in code as two screen separations, so one texture serves every colourway
- EDITING.md: where every word lives, the dyes, the cloth parameters, the scroll timing, and the rules the engine depends on
- Bodoni Moda 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 hero lines, the lede and its action, the dye names, the facts, the price, the order button, the grid labels and the menu - index.html
- The three takes: name, room colour, dye colour, bath and note for each - main.js DYES
- The silk's ground and ink colours - main.js uCream and uInk; the CSS tokens in style.css :root
- The print on the carré: the bands, fans, medallion, lettering ring and wordmark - print.js
- How the cloth moves: gravity, wind, drag, gust strength and the corner poses - main.js wind(), step(), the pose functions and frame()
- Where the silk sits in each scene and where every line sits on the 12-column grid - main.js layout()
- The lens, halation, grade, grain and window light - main.js renderPhoto() and finalMat, style.css --go and --wo
NOT THIS
- A shop or checkout - the order button and the menu items are placeholder links
- More than three dyes without code - the label colour and the ending's return to the first dye are set by index in frame()
- A reduced-motion mode - the silk always moves in the wind
- Software rendering - without WebGL2 on a GPU there is no still fallback
- More scenes than the four built - a new scene needs new scroll windows in frame(), a new pose 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 on real GPU hardware
- Any static file server, e.g. python -m http.server 8080
- Desktop and phones down to 390 px; on touch devices a tap on the silk is a gust, since there is no hover
The instructions to paste into your agent
Use Plate's Weft, project weft, 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=weft, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=weft 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: 58118a7fa4b53c15c662b2b4db8c02747527a06ad19e0d132bbdbae4c7654a59 (514893 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 hero lines, the lede and its action, the dye names, the facts, the price, the order button, the grid labels and the menu - index.html - The three takes: name, room colour, dye colour, bath and note for each - main.js DYES - The silk's ground and ink colours - main.js uCream and uInk; the CSS tokens in style.css :root - The print on the carré: the bands, fans, medallion, lettering ring and wordmark - print.js - How the cloth moves: gravity, wind, drag, gust strength and the corner poses - main.js wind(), step(), the pose functions and frame() - Where the silk sits in each scene and where every line sits on the 12-column grid - main.js layout() - The lens, halation, grade, grain and window light - main.js renderPhoto() and finalMat, style.css --go and --wo Requirements: - An evergreen browser with WebGL2 on real GPU hardware - Any static file server, e.g. python -m http.server 8080 - Desktop and phones down to 390 px; on touch devices a tap on the silk is a gust, since there is no hover Limits: - A shop or checkout - the order button and the menu items are placeholder links - More than three dyes without code - the label colour and the ending's return to the first dye are set by index in frame() - A reduced-motion mode - the silk always moves in the wind - Software rendering - without WebGL2 on a GPU there is no still fallback - More scenes than the four built - a new scene needs new scroll windows in frame(), a new pose 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 |
|---|---|---|---|
| Bodoni Moda | The Bodoni Moda Project Authors (indestructible type*), Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-BodoniModa.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