Cistern

Screenshots

Signature effect

A single seam of warm light igniting in a dark slab, and a 24-hour instrument where dragging the line moves the roof, house, reserve and grid readings and a live chart

Changelog

1. v1.0.02026-10-07
   • HTML edition: a dependency-free product site that opens straight from disk, with a drawn graphite slab whose seam of light ignites, a draggable 24-hour instrument (roof, house, battery and grid readings with a live chart and a Play button), a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey form, with a settings block for every effect.
   • React edition: the same page as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion), with all copy, the three models and their prices, the figures, the calculator's assumptions and the legal text in content/site.ts, the HTML edition's stylesheet split into one global file per section in app/styles/, and each effect's settings as typed props (HeroStage, InstrumentPanel).
   • Pages: home, 404, privacy.
   • One codebase, not one file. The concept was a single HTML file. The page is now index.html plus tokens.css, main.css, fonts.css, kit.css, kit.js, main.js and one file per effect in assets/js/effects/ (hero-slab, day-instrument, sizer), each with a CONFIG block at the top.
   • Self-hosted fonts. Jost (variable weight 200–400) and Inter Tight ship in assets/fonts/ under the SIL Open Font License, with licences. The concept loaded them from Google Fonts; no request now goes there.
   • Brand tints follow the tokens. Glows, washes and the header glass are color-mix() of --gold, --gold-2 and --ink instead of raw rgba(). Only the battery drawing, black shadows and the film grain keep their own colours. The instrument's chart reads its colours from the tokens.
   Show all notes

   • Reveals use the kit. The concept's own .rv observer is replaced by the shared data-reveal behaviour with the same 1.5 s, 26 px rise and 140 ms stagger, plus a failsafe that shows everything if the script never starts. Hairlines still draw with the concept's .in class.
   • The survey form is a kit form. It validates through the browser, shows a "Sending…" state for 0.7 s in demo mode, and takes a real endpoint through data-endpoint. Its messages are data-invalid, data-success and data-error on the form. The message sits inside the form so it is announced with it.
   • The readings are a valid definition list. The sub-lines under each reading in the instrument are <dd> elements (the concept used <span> inside the <dl>, which axe flags).
   • Privacy link and pages. Added 404.html, privacy.html (a clearly marked placeholder), a Privacy link in the footer, a skip link with a visible focus state, a full SEO head (Open Graph, Twitter card, a canonical placeholder, JSON-LD Product with its three offers), a favicon, a touch icon, a web manifest and robots.txt.
   • Complete without JavaScript. The page shows its finished state without script: the slab, the figures, the day at 13:00 and the calculator's default result. The slider, the play button and the chart need script and are hidden without it.
   • Reduced motion. No entrance animations, motes, pointer light or parallax; numbers show their final values.
   • The figures are illustrative. The instrument's curves, the calculator's assumptions (900 kWh per kWp, €0.19 per kWh) and every spec, price and claim are made up for the demo. Replace them before you show them as real.
   • Typed values. Model names and prices appear in the cards, in CONFIG.models in sizer.js and in the JSON-LD, and the starting readings are typed in the HTML as well as computed: change them together. The README lists where.
   • The demo company (Cistern Energy Oy, Tampere), the address hello@cistern.example and cistern.example are made up. The form posts nothing until you add an endpoint.
   • In the React edition the model cards, the calculator's suggestion and the JSON-LD offers are all built from site.models.items, and the calculator and the cards share one state (SizerProvider), so they can't disagree. The JSON-LD is built from the content; in the HTML edition it is written by hand.
   • In the React edition the reveals are <Rv> and <Draw> components (the same fade, rise and stagger as the HTML edition's data-reveal), the instrument's chart is drawn as JSX from the same model as the readings, and the privacy page's text is in content/site.ts.
   • Review fixes before release. React: the Measure section, the hero strip and the model grid now draw their top hairline like the HTML edition; the header returns focus to the menu button on Escape; SizerProvider takes enabled (the HTML CONFIG.enabled; both editions now disable the two sliders when it is false). HTML: the no-JavaScript readings (90%, 1.1 kW, "taking 3.5 kW", 84%, €860, 7 years) now match what the scripts compute; og:image/twitter:image are absolute placeholder URLs; #models has a scroll-margin-top so its heading clears the fixed header from the nav. The calculator announces one settled summary to screen readers (a hidden role="status") instead of every slider step, and both editions format numbers with en-US.

Questions

Related

• 

  Ashlar

  Real estate

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with photo galleries, facts and drawn site plans, a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $29
• 

  Aurel

  Brand

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $29
• 

  Ferro Type

  Studio

  A loud, orange-and-black type foundry site built around one variable font: a hero word that bends its weight and width under your cursor, a live type tester that writes its own CSS, an axis-by-axis tour, a keyboard-driven glyph inspector and a licence configurator with a working cart.

  Roboto Flex / Roboto MonoFrom $29