WEBSITE · PLATE PRO · V1.0.1

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

Get Plate Pro · $49.50Already have Pro? Sign in ↗Open in the library ↗

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.

The live site opens for Pro accounts; everyone else sees the recorded preview above. A browser is handed every file a site runs, so the runnable source is not secret: what Pro gives you is the packaged project, the editing guide, the licence and v1 updates.

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.

  1. Get Plate Pro, or sign in if you already have it, and download the ZIP from the library.
  2. Check its SHA-256 against the one below, and extract it into a new, empty folder.
  3. 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.
  4. 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

The instructions to paste into your agent
Use Plate's The Observatory, project observatory, version 1.0.1, 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: e44ebd9258ad16b88f6228cc6f7157c862dc30ab4239dee20e285be82a55916a (830631 bytes, version 1.0.1). 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.

The library fills in your project name and changes for you: open The Observatory in the library, then "Customize prompt".

A REAL ADAPTATION

TIDEGAUGE, a fictional coastal-data studio

A fresh Claude Code session (Opus 5.5) was given this project's library instructions and a brief for an invented studio that logs a harbour's sea level and water temperature overnight: teal, phosphor and coral colours, three rewritten instrument panels and an invented storm-surge night. It verified the archive, edited content.js, plus the poster and four stills re-captured from the adapted page, ran the result and checked desktop, phone, keyboard, reduced motion and the fallbacks. About 9 minutes, with no human help during the run; a person placed the downloaded ZIP in its folder first.

TIDEGAUGE, a fictional coastal-data studio, adapted pageTIDEGAUGE, a fictional coastal-data studio, adapted pageTIDEGAUGE, a fictional coastal-data studio, adapted page

Everything in it is invented; nothing is a real business or claim. Outside the supported changes: The poster and stills were re-captured because the shipped ones had the original headline baked in. Still true of the result: The panels' big live figures are fixed in the page to wind, light and sound, so no sea-level figure moves; the agent labelled them truthfully instead. The pointer's coordinates are hard-coded.

CREDITS, VERSION, ARCHIVE

What travels with it

WhatSourceLicenceKeep
Space GroteskGoogle FontsSIL OFL 1.1Keep assets/fonts/OFL-SpaceGrotesk.txt
JetBrains MonoGoogle FontsSIL OFL 1.1Keep assets/fonts/OFL-JetBrainsMono.txt
The field and still platesRendered by the site's own WebGL2 shaderPart of the pack; no third-party artNothing to credit

Archive: version 1.0.1 · 0.8 MB (830631 bytes) · 17 files · SHA-256 e44ebd9258ad16b88f6228cc6f7157c862dc30ab4239dee20e285be82a55916a

Checked 2026-09-29: Built on 1.0.0. 1.0.1 repackages with forward-slash paths (1.0.0 used Windows backslashes and did not extract into folders on macOS or Linux) and makes the station position a content field (identity.coords) with S/W formatting. Default crosshair and log unchanged; a southern-western position was checked. Archive extracted and compared byte for byte with its source.

Included in Plate Pro v1 updates; the archive is re-hashed whenever its bytes change · Licence terms · Support

MORE PROJECTS

Other sites and games on Plate

Every project page · Films · The catalogue as JSON