Otari Games — Submission Terminal

Live: https://agmatei98.github.io/otari-fiesta.github.io/

index.html is the whole site. One file, no folders, no internet needed. Double-click it, or send it to someone and they double-click it — or just send the link above.

---

What it does

Three screens, one continuous transmission from Effie. The background, static and step meter never reload — only her words change.

01	Hello, player. → Effie's intro → Submit your entry
02	OTARI GAMES logo → instructions → Slack link → copy block → What's next?
03	Closing lines → SEPTEMBER 4TH stamp → sign-off

Everything is centred, on black, under a slow black-and-toxic-green gradient with static and scanlines over it.

---

Interactions

• Typing — 26ms per character with jitter, longer beats after full stops
• Click anywhere (or hit Space) to fast-forward the typing
• Copy button puts the submission template on the clipboard, with a ⌘C fallback
• Back/forward works — each screen has its own hash (#/01, #/02, #/03)
• Reduced motion — respects the OS setting: text appears instantly, background stills
• Responsive down to 360px

---

Flame Wrap

The submission template is wrapped in CanvasUI Flame Wrap, burning toxic green instead of the default blue.

The library is vendored into index.html — compiled from CanvasUI's official flame-wrap-vanilla component so the file stays offline and dependency-free. Settings live in the FLAME object near the bottom of the file:

const FLAME = {
  color: [0.22, 1.0, 0.08],   // #39FF14 toxic green
  height: 110,                // how far flames reach above the top edge
  radius: 4,                  // matches the copy block's border-radius
  ...
};

What people will actually see. Flame Wrap has two modes. The full effect — where the flames eat into the text and it shimmers with heat — needs the experimental html-in-canvas API (drawElementImage, requestPaint, <canvas layoutsubtree>), which today only exists in Chrome with experimental web platform features switched on. Nobody will have that by default.

Everyone else gets the component's own fallback, which the page selects automatically: green flames wrap the block, the text stays crisp and readable. That's the version to expect. If the API ever ships, the richer mode turns itself on.

It also needs WebGL2 (universally supported). If it's missing, the copy block just renders unlit — nothing breaks.

The fire only burns on screen 2 and is destroyed when you leave, so there's no GPU work running behind the other screens. It's skipped entirely under reduced-motion.

---

Editing the copy

Open index.html in any text editor and search for COPY —. Every line Effie says is in one object near the bottom of the file:

const SCRIPT = {
  1:{ 1:"Hello, player.", ... },
  2:{ ... },
  3:{ ... }
};

Links inside Effie's lines use markdown syntax — [text](url) — and are typed out character by character like everything else:

2:"…then paste it in the [otari-games Slack channel](https://…)."

Keep a link on whole words. Punctuation immediately after a link is pulled inside the anchor automatically — otherwise a stray full stop could wrap onto a line of its own — and renders without an underline.

The submission template is separate — it's the <pre id="tpl"> block in the HTML, so it copies to the clipboard exactly as written.

Colours and fonts are CSS variables in :root at the top of the <style> block. Ignore the huge @font-face blocks above them — that's JetBrains Mono and VT323 base64-embedded so the file works with no internet connection.

---

Two things I added that weren't in your copy

1. Effie · host · transmission 02 — small caption under the logo on screen 2
2. Stay brave. — Effie — sign-off line at the end of screen 3
3. On screen 2 the #otari-games on Slack chip now sits below the template rather than above it, following the order the instruction gives: copy, replace, then paste. Move the .rv block back above the flamewrap div to undo.

Both are one-liners in SCRIPT / the HTML if you'd rather not have them.

---

Not done (say the word)

• Live countdown to Sept 4 — currently just the date stamp
• Flames are green; orange is a one-line change (color: [1, 0.45, 0.1])
• Audio (key clicks, hum) — deliberately left out
• Sharing via a URL — it's a local file, so hand out index.html itself

design-system.html is the spec you signed off on. Not needed to run the site — keep it as a reference or delete it.