PlateWEBSITE · PLATE PRO · V1.0.2
Meniscus
A fragrance house whose whole page sits under a live fluid. The typography is rendered inside the simulation rather than on top of it, so the liquid refracts the headlines as it runs over them. Five sections, five different states of the same surface: free under the pointer, weighted so it pools and finds a level, sheared into three strata, drifting while a choice is made, and finally setting flat. Choosing one of the three fragrances regrades the plate, the highlights and the dispersion together. Every word, the colourways and the section order are data-driven from content.js; the solver, the five regimes and the composite are fixed code.
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, meniscus.css, meniscus.js and content.js, with no build step and no dependencies
- content.js: every line of copy, the three fragrances with their colourways, the section order and the motion budget in one file
- EDITING.md: why the plate must stay grayscale, what each field does, the five fluid regimes, and how to build a different site on the same engine
- A WebGL2 fluid solver written for this project - advection, vorticity confinement, a Jacobi pressure solve and a refraction composite - with no third-party library
- Geist as WOFF2 with its OFL-1.1 licence file
- README.md with the run command, and LICENSES.md
WHAT YOU CAN CHANGE
- All copy: headlines, eyebrows, ledes, specification rows, note groups and the ending - content.js
- The three fragrances: names, notes, descriptions, and the plate/specular/dispersion grade each one applies - content.js fragrances block
- Section order and which fluid regime each section owns, chosen from stir, pool, bands, select and settle - content.js sections array
- The contact address the ending's mail draft is addressed to - content.js house block
- The motion budget: grid resolutions, pressure iterations and refraction strength - content.js engine block
- A different subject entirely on the same engine, content.js only - see EDITING.md section 4
NOT THIS
- The solver, the composite and the five regimes (baked into meniscus.js); a sixth regime needs a new term in the FORCE shader
- A coloured plate - the dispersion is the only colour in the frame and a coloured plate turns it to mud; colourways are a temperature grade, not a hue
- Hiding the DOM headline with display:none, clip-path or an off-screen position - the engine measures that element to place the typography inside the liquid
- Section layouts beyond the five built (opening, specification, three groups, a chooser and an ending) - a new shape needs new HTML and CSS
- A real order, payment or stock backend - the only action builds a mailto draft
- Software rendering: without a GPU the context is lost and the visitor gets the still document instead
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 EXT_color_buffer_float on real GPU hardware; without them the page renders as a complete still document
- Any static file server, e.g. python -m http.server 8080; file:// works except that some browsers refuse the local @font-face
- Keyboard, touch, reduced-motion and no-JavaScript paths all supported; no network request is made at runtime
The instructions to paste into your agent
Use Plate's Meniscus, project meniscus, version 1.0.2, 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=meniscus, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=meniscus 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: 08992462d7efa4fced543e0b6deb77c3464a3f28f264e2c0248f38fe76b0e02e (56923 bytes, version 1.0.2). 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: headlines, eyebrows, ledes, specification rows, note groups and the ending - content.js - The three fragrances: names, notes, descriptions, and the plate/specular/dispersion grade each one applies - content.js fragrances block - Section order and which fluid regime each section owns, chosen from stir, pool, bands, select and settle - content.js sections array - The contact address the ending's mail draft is addressed to - content.js house block - The motion budget: grid resolutions, pressure iterations and refraction strength - content.js engine block - A different subject entirely on the same engine, content.js only - see EDITING.md section 4 Requirements: - An evergreen browser with WebGL2 and EXT_color_buffer_float on real GPU hardware; without them the page renders as a complete still document - Any static file server, e.g. python -m http.server 8080; file:// works except that some browsers refuse the local @font-face - Keyboard, touch, reduced-motion and no-JavaScript paths all supported; no network request is made at runtime Limits: - The solver, the composite and the five regimes (baked into meniscus.js); a sixth regime needs a new term in the FORCE shader - A coloured plate - the dispersion is the only colour in the frame and a coloured plate turns it to mud; colourways are a temperature grade, not a hue - Hiding the DOM headline with display:none, clip-path or an off-screen position - the engine measures that element to place the typography inside the liquid - Section layouts beyond the five built (opening, specification, three groups, a chooser and an ending) - a new shape needs new HTML and CSS - A real order, payment or stock backend - the only action builds a mailto draft - Software rendering: without a GPU the context is lost and the visitor gets the still document instead 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.
A REAL ADAPTATION
MORROW, a fictional tea studio
A fresh Claude Code session (Opus 5.5) was given this project's library instructions and a brief for an invented loose-leaf tea studio: three blends, a specification, aroma, preparation and ritual, and a contact ending. It verified the archive, edited content.js and the page title, ran the site and checked desktop, phone, keyboard, reduced motion and the no-WebGL fallback. About six minutes, no human help during the run; a person placed the downloaded ZIP in its folder first.
CREDITS, VERSION, ARCHIVE
What travels with it
| What | Source | Licence | Keep |
|---|---|---|---|
| Geist | Vercel, Google Fonts | SIL OFL 1.1 | Keep fonts/OFL-Geist.txt |
| Stable Fluids solver method | Jos Stam, SIGGRAPH 1999 | Published algorithm, not licensed code | Nothing required; the credit in LICENSES.md is kept as a courtesy |
MORE PROJECTS