Ember

Humankind's great tech began with fire. This this.side.of.tech is You.

A generator and scanner for Ember codes: posters where a standard QR code burns at the base of a grid column and rises as a plume of embers.

• The QR is real. It's a standard QR at error correction H, readable by any phone camera.
• The embers are a code too. The ember pattern above the QR is a Reed-Solomon-protected copy of the text (or a hidden second text) under its own reversible convention (SPEC.md). Every "random" particle is derived from the text.
• Hotpoints are a few glowing modules inside the QR, placed by the text's SHA-256 hash. The Ember scanner checks they glow, so a flat black reprint is flagged.

Pages

URL	What it does
/	Home. Asks for your name, then takes you to your own Ember.
/ember/<code>	Your Ember. An Ember QR poster whose QR leads back to https://thissideoftech.com/ember/<code>. The 8-character code comes from a hash of the name (same name, same code; case and spacing ignored; the name can't be recovered from it). The name itself stays on the device that entered it. Anyone else sees the poster without the name. Share, copy link, PNG/SVG download, plus an in-page check that the poster scans back to its link.
/generate/	Generator. Type text, get the poster as SVG or PNG. Optional hidden ember text, plus an X-ray view of the convention.
/qr/	Ember QR. A standard QR drawn as the embers: a column of grid cells opening into a plume of embers, with ash where the code has no embers. Spare data bits are solved for the picture (zero errors), and an adjustable share of the error-correction budget ("burn") pulls more modules into shape. Settings: size, error-correction level, burn, timing/alignment styling, x-ray. Each design is decoded in the page before you download it. Any QR reader can scan the result; it has no ember layer.
/scan/	Scanner. Opens straight to the camera, with a gallery icon to scan a saved image (paste and drag-and-drop work too). A Standard QR / Ember QR switch picks the mode: Standard reads only the QR; Ember also reads the ember layer (pooling evidence across camera frames) and checks the hotpoints. ?mode=standard or ?mode=ember preselects it.

Run

npm install
npm run dev        # http://localhost:5173/ (and /generate/, /qr/, /scan/, /ember/<code>)
npm run dev:phone  # same, over HTTPS on your network (self-signed), to test the camera on a phone
npm run build      # static site in dist/, served from the domain root
npm test

Hosting

• Domain root. The site is built for the root of its domain (base: '/'), because pages are opened from deep links such as /ember/<code>.
• One page for every code. Every /ember/<code> must serve ember/index.html. That rule is already included for Netlify and Cloudflare Pages (public/_redirects), for Vercel (vercel.json), and for npm run dev / preview. On another host, add the same rewrite.
• The address in the QR codes. QR codes point at https://thissideoftech.com, even when the page is opened on localhost or a preview deploy. Set VITE_SITE_ORIGIN at build time to use another address.

Poster designer

Every poster page (the Ember page, Ember QR and the generator) has a designer. The poster is a 2:3 page with a text block above the ember, the ember itself, and a text block below.

• Rich-text editor for each text block, with a toolbar that acts on the selection:
  • Font and relative size (50–300%).
  • Bold, italic, underline and strike-through.
  • Text colour: swatches or any colour.
  • Alignment per paragraph: left, centre, right or justify.
  • Clear formatting.
  • Enter starts a new paragraph.
• Block settings: base size, line spacing, letter spacing and text-box width.
• Ember layout: move the ember up or down and resize it with sliders, or drag it on the poster (drag its corner to resize). By default it fits the space between the two text blocks.
• Shareable: the whole design travels in the page link (d=, base64url JSON) and is validated when read.

Text is laid out by src/core/richtext.js:

• Lines wrap in the text box, using the fewest lines and then balancing them.
• Every word sits at an exact position, using per-character advances measured in each font. The SVG therefore looks the same in every viewer and in downloads.
• Underline and strike-through are drawn as lines, continuous across spaces.
• The fonts have one weight and no italics, so bold is a thin outline in the text colour and italic is the viewer's slant.
• The page and placement are composed by src/core/compose.js.

Fonts: Momo Trust Display (default), Archivo Black, Anton, Bricolage Grotesque, Space Grotesk, Fraunces and DM Serif Display. All are from Google Fonts under the SIL Open Font License 1.1 (src/assets/fonts/licenses/). Each loads on demand (the Latin subset, 13–25 KB) and is embedded in the poster, so downloaded SVGs and PNGs keep their type. Letters outside Latin are drawn in a fallback font.

Installable app (PWA)

The build includes a web app manifest and a service worker (sw.js, generated with the exact list of built files). The app installs to the home screen and opens straight to the scanner. After the first visit both pages, including the ZXing WebAssembly, work offline. Use the Install button in the generator header or the scanner's top bar. On iPhone, use Share ▸ Add to Home Screen.

Camera permission

The scanner opens the camera by itself only when permission is already granted. Otherwise it shows Enable camera, and that tap opens the browser's permission dialog: browsers show the dialog reliably only in response to a tap. If the camera was blocked earlier, browsers never ask again, so the scanner shows how to re-allow it on iPhone, Android or desktop.

The dialog also never appears on plain http:// (except localhost) or inside another site's frame. Use HTTPS (npm run dev:phone for local testing).

The camera needs a secure context (HTTPS or localhost) and its own tab: pages embedded in another site's frame are not allowed to use the camera, and the scanner says so and offers to open in a new tab.

The end-to-end tests rasterize and distort posters with Python: pip install cairosvg opencv-python-headless numpy. Those tests are skipped when Python is missing.

Layout

src/core/      convention + rendering + scanning (no DOM; runs in Node too)
  prng.js        SHA-256 counter stream used for every convention choice
  rs.js          Reed-Solomon GF(256) with error + erasure decoding
  qr.js          standard QR matrix (qrcode-generator) + function-pattern mask
  artqr.js       art QR encoder: free-bit solving (QArt) + error-budget "burn"
  emberqr.js     Ember QR picture (column + plume) and renderer
  ember.js       ember layout and codec
  hotpoints.js   hotpoint placement
  render.js      poster SVG
  scan.js        ZXing (WebAssembly) + grid refinement + ember / hotpoint reading
src/app/       the two pages, plus pwa.js (install + service worker registration)
src/sw-template.js  service worker; vite.config.js fills in the precache list
public/        manifest and app icons
tests/         unit tests and render → distort → scan tests

Limits

• Ember capacity grows with the QR: 23 bytes for a version 1 QR, 56 for version 4, and 124 at most (one RS block). Texts longer than 124 bytes are rejected by the generator.
• The scanner needs the whole plume in frame and in reasonable focus. The QR alone is enough for ordinary readers.
• Printing: keep modules at least about 1.5 mm for phone scanning at arm's length. The PNG export is about 36 px per module.