PlateWEBSITE · PLATE PRO · V1.0.0
Tide
A product site for an invented bedside sleep-sound orb that runs from dusk to dawn as you scroll. One WebGL2 shader draws a liquid-glass orb on a saturated field: it breathes behind a 216 px headline that bends through the glass, leans toward the cursor and splashes when clicked. Scrolling turns the room indigo and pulls the orb apart into three sound modes, merges it back while a breath counter falls from 14 to 6, scrubs a 23:10 to 07:00 night along a sound curve, and ends at dawn with the orb rising as a sun over the water.
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 and main.js, with no build step and no dependencies
- One hand-written WebGL2 shader: the liquid-glass orb, its split into three and merge back, the scene fields from dusk to dawn, the sun over the water
- EDITING.md: where every word lives, the scene colours in the shader, the night timeline data, the scroll timing, and the two rules the engine depends on
- Inter Tight, Instrument Serif Italic and Geist as WOFF2 with their OFL-1.1 licence files
- README.md with the run command, and LICENSES.md
WHAT YOU CAN CHANGE
- All copy: the scene headlines and accents, the three mode names, the four callouts, the timeline labels, the pre-order and the footer - index.html
- The hero headline painted into the shader's type texture - main.js layout()
- The now-playing tracks the orb cycles through on click - main.js tracks
- The night: its length, the sound-level curve and the clock notes - main.js MIN, LEVELS and frame()
- Scene colours - the named field colours in the shader and three CSS tokens
- The liquid's colours inside the orb - the shader's shade() function
NOT THIS
- A shop or order backend - the pre-order button is a link
- Real audio - the now-playing card is visual only
- Software rendering - without a GPU the shader is too heavy and there is no still fallback
- More scenes than the five built - a new scene needs new scroll windows in frame() 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; touch devices see the orbs react through automatic turn-taking
The instructions to paste into your agent
Use Plate's Tide, project tide, 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=tide, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=tide 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: f32c65e26d19ace610b7b2778f18679e8130a6ca14ced98b241e96e7186fedcb (124613 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 scene headlines and accents, the three mode names, the four callouts, the timeline labels, the pre-order and the footer - index.html - The hero headline painted into the shader's type texture - main.js layout() - The now-playing tracks the orb cycles through on click - main.js tracks - The night: its length, the sound-level curve and the clock notes - main.js MIN, LEVELS and frame() - Scene colours - the named field colours in the shader and three CSS tokens - The liquid's colours inside the orb - the shader's shade() function 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; touch devices see the orbs react through automatic turn-taking Limits: - A shop or order backend - the pre-order button is a link - Real audio - the now-playing card is visual only - Software rendering - without a GPU the shader is too heavy and there is no still fallback - More scenes than the five built - a new scene needs new scroll windows in frame() 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 |
|---|---|---|---|
| Inter Tight | The Inter Project Authors, Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-InterTight.txt |
| Instrument Serif | The Instrument Serif Project Authors, Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-InstrumentSerif.txt |
| Geist | Vercel, Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-Geist.txt |
MORE PROJECTS