WEBSITE · PLATE PRO · V1.0.0
The Observatory
An atmospheric-data studio's website that is one authored night: scrolling advances an hour from 18:36 to 06:00, driving a live WebGL2 shader sky, three instrument panels and a case study, all read from one keyframed model. A tonight panel with a real generated JSON download, a mailto booking and a calibration-plate colophon close 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, field.js (the WebGL2 shader) and content.js, with no build step and no dependencies
- content.js: identity, colour tokens, every line of copy, the three instrument panels, the case log and the tonight panel in one file
- EDITING.md: what each field does and what the fallback plates show
- Four still plates rendered from the site's own shader, shown when WebGL2 is unavailable or motion is reduced
- Space Grotesk and JetBrains Mono as WOFF2 with their OFL-1.1 licence files
- README.md with the run command, and LICENSES.md
WHAT YOU CAN CHANGE
- Page title, meta description, language and search-indexing — content.js meta
- Studio name, sub-line, station line, edition stamp, favicon mark — content.js identity
- Four colour tokens (ink, phosphor, signal, white), which also recolour the WebGL field itself, not only the DOM — content.js colors
- Two font families, weights and fallbacks — content.js fonts
- Every line of copy: opening kicker/title/lede/actions, the four strip labels and units, the 'what we measure' heading and delivered-as list
- The three instrument panels: title, tag, live sub-line wording, six-row spec table, status row, drives note (exactly three panels)
- The case: heading, lede, night label, recipients, the eight-entry event log's time/text (not its hour position), totals, timeline track labels
- The tonight panel's copy and field labels, the download button label/unit/filename prefix, the booking button label/email/subject/body
- The calibration-plate colophon's every label and note
NOT THIS
- The night model: the hour keyframes and the scroll-to-hour map with its two pinned holds — mechanism, not content
- The field itself: the WebGL2 shader's noise, aurora, isobars, horizon and dawn grade (only its two colour uniforms read content.js)
- The chapter count (fixed at four) and the case log's entry count (fixed at eight) and each entry's hour position
- Layout, type scale, the bezel/tick/switch chrome, breakpoints, the pinned-scroll mechanics
- The still-plate images themselves (re-capture is a packaging step, not a content edit)
- A real backend: the download is a client-generated JSON of the model, not live station telemetry; ‘Book a station’ opens a mail client, not a form
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
- Static HTTP hosting (module script and fonts do not load from file://); does not run from file://
- WebGL2 for the live field (Chrome/Edge 56+, Firefox 51+, Safari 15+, iOS 15+); falls back to one of four still plates without it
- Verified in headless Chromium on Windows (RTX 3070, ANGLE D3D11) at 1440x900 and 390x844; Safari/Firefox paths written, not run there
- Zero external requests; all fonts and images are self-hosted in the package
The instructions to paste into your agent
Use Plate's The Observatory, project observatory, 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=observatory, "Download source") while signed in to Plate with Pro; the file comes from https://getplate.pages.dev/api/pack?slug=observatory 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: e8985e54e946847533a6623d07747581c8810e98e00cd5ce87100fa4ffd4f872 (830159 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: - Page title, meta description, language and search-indexing — content.js meta - Studio name, sub-line, station line, edition stamp, favicon mark — content.js identity - Four colour tokens (ink, phosphor, signal, white), which also recolour the WebGL field itself, not only the DOM — content.js colors - Two font families, weights and fallbacks — content.js fonts - Every line of copy: opening kicker/title/lede/actions, the four strip labels and units, the 'what we measure' heading and delivered-as list - The three instrument panels: title, tag, live sub-line wording, six-row spec table, status row, drives note (exactly three panels) - The case: heading, lede, night label, recipients, the eight-entry event log's time/text (not its hour position), totals, timeline track labels - The tonight panel's copy and field labels, the download button label/unit/filename prefix, the booking button label/email/subject/body - The calibration-plate colophon's every label and note Requirements: - Static HTTP hosting (module script and fonts do not load from file://); does not run from file:// - WebGL2 for the live field (Chrome/Edge 56+, Firefox 51+, Safari 15+, iOS 15+); falls back to one of four still plates without it - Verified in headless Chromium on Windows (RTX 3070, ANGLE D3D11) at 1440x900 and 390x844; Safari/Firefox paths written, not run there - Zero external requests; all fonts and images are self-hosted in the package Limits: - The night model: the hour keyframes and the scroll-to-hour map with its two pinned holds — mechanism, not content - The field itself: the WebGL2 shader's noise, aurora, isobars, horizon and dawn grade (only its two colour uniforms read content.js) - The chapter count (fixed at four) and the case log's entry count (fixed at eight) and each entry's hour position - Layout, type scale, the bezel/tick/switch chrome, breakpoints, the pinned-scroll mechanics - The still-plate images themselves (re-capture is a packaging step, not a content edit) - A real backend: the download is a client-generated JSON of the model, not live station telemetry; ‘Book a station’ opens a mail client, not a form 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 |
|---|---|---|---|
| Space Grotesk | Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-SpaceGrotesk.txt |
| JetBrains Mono | Google Fonts | SIL OFL 1.1 | Keep assets/fonts/OFL-JetBrainsMono.txt |
| The field and still plates | Rendered by the site's own WebGL2 shader | Part of the pack; no third-party art | Nothing to credit |
MORE PROJECTS