---
name: Math Engine Showcase
slug: elba-elbe-bergen-rockies
type: static
author: JasperDiscovers
url: "https://overlabels.com/overlay/elba-elbe-bergen-rockies/public.md"
copies: 0
---

# Math Engine Showcase

DO NOT DELETE THIS OVERLAY. IT'S REFERENCED IN HELP DOCS! A BRB scene where every moving part is an Expression Control, with its formula printed under it.

An Overlabels **static overlay** by JasperDiscovers.

Overlabels overlays are plain HTML and CSS containing `[[[triple-bracket tags]]]` that resolve against live stream data and update over WebSockets. There is no JavaScript in an overlay - the template language does the work. The complete language specification is at <https://overlabels.com/llms.txt>; read it first if you are not already familiar with the syntax.

This is a static overlay: it stays on screen and updates continuously.

## Source

The three fields below are the entire overlay. Nothing else is rendered.

### `head`

Fonts and `<style>` blocks. No scripts - they are stripped on save.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;600;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
```

### `html`

The markup.

```html
<!-- DO NOT DELETE THIS OVERLAY. IT'S REFERENCED IN HELP DOCS! -->
<div class="scene">
  <header class="top" id="top">
    <div class="brand"><span class="brand-dot"></span>OVERLABELS <em>math engine</em></div>
    <div class="status">[[[channel_name]]] will be right back</div>
    <div class="meta">26 expression controls &middot; re-evaluated every frame &middot; not one line of JavaScript</div>
  </header>

  <main class="grid" id="grid">

    <section class="panel" id="p-orbit">
      <h2>Epicycles <small>sin cos chained controls</small></h2>
      <div class="stage orbit">
        <div class="orbit-ring"></div>
        <div class="sun"></div>
        <div class="planet-frame"><div class="moon-ring"></div><div class="planet"></div></div>
        <div class="ghost" style="--k: 6"></div>
        <div class="ghost" style="--k: 5"></div>
        <div class="ghost" style="--k: 4"></div>
        <div class="ghost" style="--k: 3"></div>
        <div class="ghost" style="--k: 2"></div>
        <div class="ghost" style="--k: 1"></div>
        <div class="moon"></div>
      </div>
      <pre class="formula"><b>orbit_t</b>  = 2 * PI * now_ms() / 12000
<b>planet_x</b> = 105 * cos(c.orbit_t)
<b>moon_x</b>   = c.planet_x + 26 * cos(8 * c.orbit_t)</pre>
    </section>

    <section class="panel" id="p-spiro">
      <h2>Spirograph <small>two angles nested rotate</small></h2>
      <div class="stage spiro">
        <svg viewBox="-150 -150 300 300" aria-hidden="true"><path d="M132 0 L131.9 1.6 L131.7 3.2 L131.4 4.7 L131 6.3 L130.4 7.9 L129.7 9.4 L128.9 10.9 L128 12.4 L126.9 13.9 L125.8 15.4 L124.5 16.8 L123.1 18.2 L121.5 19.6 L119.9 20.9 L118.1 22.2 L116.3 23.5 L114.3 24.7 L112.2 25.9 L110 27 L107.8 28.1 L105.4 29.1 L102.9 30.1 L100.3 31 L97.6 31.9 L94.9 32.7 L92 33.5 L89.1 34.2 L86.1 34.8 L83 35.4 L79.8 35.9 L76.6 36.3 L73.3 36.7 L69.9 37 L66.5 37.2 L63 37.4 L59.5 37.4 L55.9 37.5 L52.3 37.4 L48.6 37.3 L44.9 37.1 L41.2 36.8 L37.4 36.5 L33.6 36 L29.8 35.5 L26 35 L22.2 34.3 L18.3 33.6 L14.4 32.8 L10.6 32 L6.7 31 L2.8 30 L-1 29 L-4.8 27.8 L-8.7 26.6 L-12.4 25.4 L-16.2 24 L-20 22.6 L-23.7 21.2 L-27.3 19.6 L-31 18.1 L-34.6 16.4 L-38.1 14.7 L-41.6 13 L-45 11.2 L-48.4 9.4 L-51.7 7.5 L-55 5.6 L-58.2 3.6 L-61.3 1.6 L-64.3 -0.5 L-67.3 -2.6 L-70.2 -4.7 L-73 -6.8 L-75.7 -9 L-78.3 -11.2 L-80.9 -13.4 L-83.3 -15.7 L-85.7 -17.9 L-87.9 -20.2 L-90.1 -22.5 L-92.2 -24.7 L-94.1 -27 L-96 -29.3 L-97.7 -31.6 L-99.4 -33.9 L-100.9 -36.1 L-102.4 -38.4 L-103.7 -40.6 L-104.9 -42.8 L-106 -45 L-107 -47.2 L-107.9 -49.4 L-108.6 -51.5 L-109.3 -53.6 L-109.8 -55.6 L-110.3 -57.6 L-110.6 -59.6 L-110.8 -61.5 L-110.9 -63.4 L-110.9 -65.2 L-110.7 -67 L-110.5 -68.7 L-110.1 -70.3 L-109.7 -71.9 L-109.1 -73.4 L-108.4 -74.9 L-107.7 -76.3 L-106.8 -77.6 L-105.8 -78.8 L-104.7 -80 L-103.6 -81.1 L-102.3 -82.1 L-100.9 -83 L-99.4 -83.9 L-97.9 -84.6 L-96.3 -85.3 L-94.5 -85.9 L-92.7 -86.4 L-90.8 -86.8 L-88.9 -87.1 L-86.8 -87.3 L-84.7 -87.4 L-82.5 -87.4 L-80.3 -87.3 L-78 -87.2 L-75.6 -86.9 L-73.2 -86.5 L-70.7 -86.1 L-68.1 -85.5 L-65.5 -84.8 L-62.9 -84.1 L-60.2 -83.2 L-57.5 -82.2 L-54.8 -81.2 L-52 -80 L-49.2 -78.7 L-46.4 -77.4 L-43.5 -75.9 L-40.6 -74.4 L-37.8 -72.7 L-34.9 -71 L-32 -69.2 L-29.1 -67.3 L-26.1 -65.3 L-23.2 -63.2 L-20.3 -61 L-17.4 -58.8 L-14.6 -56.4 L-11.7 -54 L-8.9 -51.5 L-6 -48.9 L-3.2 -46.3 L-0.5 -43.6 L2.3 -40.8 L5 -37.9 L7.6 -35 L10.2 -32.1 L12.8 -29.1 L15.4 -26 L17.8 -22.8 L20.3 -19.7 L22.7 -16.5 L25 -13.2 L27.2 -9.9 L29.4 -6.6 L31.6 -3.2 L33.7 0.2 L35.7 3.6 L37.6 7 L39.5 10.5 L41.3 13.9 L43 17.4 L44.7 20.9 L46.2 24.3 L47.7 27.8 L49.1 31.3 L50.5 34.7 L51.7 38.2 L52.9 41.6 L54 45 L55 48.4 L55.9 51.8 L56.8 55.1 L57.5 58.4 L58.2 61.6 L58.8 64.8 L59.3 68 L59.7 71.1 L60 74.2 L60.3 77.2 L60.4 80.1 L60.5 83 L60.5 85.8 L60.4 88.5 L60.3 91.2 L60 93.8 L59.7 96.3 L59.3 98.7 L58.8 101.1 L58.3 103.3 L57.6 105.5 L56.9 107.6 L56.2 109.5 L55.3 111.4 L54.4 113.2 L53.5 114.9 L52.5 116.4 L51.4 117.9 L50.2 119.3 L49 120.5 L47.8 121.6 L46.5 122.6 L45.1 123.5 L43.7 124.3 L42.3 125 L40.8 125.5 L39.3 126 L37.7 126.3 L36.1 126.5 L34.5 126.5 L32.8 126.5 L31.2 126.3 L29.5 126 L27.7 125.6 L26 125 L24.2 124.4 L22.5 123.6 L20.7 122.7 L18.9 121.6 L17.2 120.5 L15.4 119.2 L13.6 117.8 L11.8 116.3 L10.1 114.7 L8.3 113 L6.6 111.2 L4.9 109.2 L3.2 107.1 L1.5 105 L-0.2 102.7 L-1.8 100.3 L-3.4 97.9 L-5 95.3 L-6.5 92.6 L-8 89.9 L-9.4 87 L-10.8 84.1 L-12.2 81 L-13.5 77.9 L-14.8 74.8 L-16 71.5 L-17.2 68.2 L-18.3 64.8 L-19.4 61.3 L-20.4 57.8 L-21.4 54.2 L-22.3 50.6 L-23.1 46.9 L-23.9 43.1 L-24.6 39.4 L-25.2 35.5 L-25.8 31.7 L-26.3 27.8 L-26.8 23.9 L-27.1 19.9 L-27.4 16 L-27.7 12 L-27.9 8 L-28 4 L-28 0 L-28 -4 L-27.9 -8 L-27.7 -12 L-27.4 -16 L-27.1 -19.9 L-26.8 -23.9 L-26.3 -27.8 L-25.8 -31.7 L-25.2 -35.5 L-24.6 -39.4 L-23.9 -43.1 L-23.1 -46.9 L-22.3 -50.6 L-21.4 -54.2 L-20.4 -57.8 L-19.4 -61.3 L-18.3 -64.8 L-17.2 -68.2 L-16 -71.5 L-14.8 -74.8 L-13.5 -77.9 L-12.2 -81 L-10.8 -84.1 L-9.4 -87 L-8 -89.9 L-6.5 -92.6 L-5 -95.3 L-3.4 -97.9 L-1.8 -100.3 L-0.2 -102.7 L1.5 -105 L3.2 -107.1 L4.9 -109.2 L6.6 -111.2 L8.3 -113 L10.1 -114.7 L11.8 -116.3 L13.6 -117.8 L15.4 -119.2 L17.2 -120.5 L18.9 -121.6 L20.7 -122.7 L22.5 -123.6 L24.2 -124.4 L26 -125 L27.7 -125.6 L29.5 -126 L31.2 -126.3 L32.8 -126.5 L34.5 -126.5 L36.1 -126.5 L37.7 -126.3 L39.3 -126 L40.8 -125.5 L42.3 -125 L43.7 -124.3 L45.1 -123.5 L46.5 -122.6 L47.8 -121.6 L49 -120.5 L50.2 -119.3 L51.4 -117.9 L52.5 -116.4 L53.5 -114.9 L54.4 -113.2 L55.3 -111.4 L56.2 -109.5 L56.9 -107.6 L57.6 -105.5 L58.3 -103.3 L58.8 -101.1 L59.3 -98.7 L59.7 -96.3 L60 -93.8 L60.3 -91.2 L60.4 -88.5 L60.5 -85.8 L60.5 -83 L60.4 -80.1 L60.3 -77.2 L60 -74.2 L59.7 -71.1 L59.3 -68 L58.8 -64.8 L58.2 -61.6 L57.5 -58.4 L56.8 -55.1 L55.9 -51.8 L55 -48.4 L54 -45 L52.9 -41.6 L51.7 -38.2 L50.5 -34.7 L49.1 -31.3 L47.7 -27.8 L46.2 -24.3 L44.7 -20.9 L43 -17.4 L41.3 -13.9 L39.5 -10.5 L37.6 -7 L35.7 -3.6 L33.7 -0.2 L31.6 3.2 L29.4 6.6 L27.2 9.9 L25 13.2 L22.7 16.5 L20.3 19.7 L17.8 22.8 L15.4 26 L12.8 29.1 L10.2 32.1 L7.6 35 L5 37.9 L2.3 40.8 L-0.5 43.6 L-3.2 46.3 L-6 48.9 L-8.9 51.5 L-11.7 54 L-14.6 56.4 L-17.4 58.8 L-20.3 61 L-23.2 63.2 L-26.1 65.3 L-29.1 67.3 L-32 69.2 L-34.9 71 L-37.8 72.7 L-40.6 74.4 L-43.5 75.9 L-46.4 77.4 L-49.2 78.7 L-52 80 L-54.8 81.2 L-57.5 82.2 L-60.2 83.2 L-62.9 84.1 L-65.5 84.8 L-68.1 85.5 L-70.7 86.1 L-73.2 86.5 L-75.6 86.9 L-78 87.2 L-80.3 87.3 L-82.5 87.4 L-84.7 87.4 L-86.8 87.3 L-88.9 87.1 L-90.8 86.8 L-92.7 86.4 L-94.5 85.9 L-96.3 85.3 L-97.9 84.6 L-99.4 83.9 L-100.9 83 L-102.3 82.1 L-103.6 81.1 L-104.7 80 L-105.8 78.8 L-106.8 77.6 L-107.7 76.3 L-108.4 74.9 L-109.1 73.4 L-109.7 71.9 L-110.1 70.3 L-110.5 68.7 L-110.7 67 L-110.9 65.2 L-110.9 63.4 L-110.8 61.5 L-110.6 59.6 L-110.3 57.6 L-109.8 55.6 L-109.3 53.6 L-108.6 51.5 L-107.9 49.4 L-107 47.2 L-106 45 L-104.9 42.8 L-103.7 40.6 L-102.4 38.4 L-100.9 36.1 L-99.4 33.9 L-97.7 31.6 L-96 29.3 L-94.1 27 L-92.2 24.7 L-90.1 22.5 L-87.9 20.2 L-85.7 17.9 L-83.3 15.7 L-80.9 13.4 L-78.3 11.2 L-75.7 9 L-73 6.8 L-70.2 4.7 L-67.3 2.6 L-64.3 0.5 L-61.3 -1.6 L-58.2 -3.6 L-55 -5.6 L-51.7 -7.5 L-48.4 -9.4 L-45 -11.2 L-41.6 -13 L-38.1 -14.7 L-34.6 -16.4 L-31 -18.1 L-27.3 -19.6 L-23.7 -21.2 L-20 -22.6 L-16.2 -24 L-12.4 -25.4 L-8.7 -26.6 L-4.8 -27.8 L-1 -29 L2.8 -30 L6.7 -31 L10.6 -32 L14.4 -32.8 L18.3 -33.6 L22.2 -34.3 L26 -35 L29.8 -35.5 L33.6 -36 L37.4 -36.5 L41.2 -36.8 L44.9 -37.1 L48.6 -37.3 L52.3 -37.4 L55.9 -37.5 L59.5 -37.4 L63 -37.4 L66.5 -37.2 L69.9 -37 L73.3 -36.7 L76.6 -36.3 L79.8 -35.9 L83 -35.4 L86.1 -34.8 L89.1 -34.2 L92 -33.5 L94.9 -32.7 L97.6 -31.9 L100.3 -31 L102.9 -30.1 L105.4 -29.1 L107.8 -28.1 L110 -27 L112.2 -25.9 L114.3 -24.7 L116.3 -23.5 L118.1 -22.2 L119.9 -20.9 L121.5 -19.6 L123.1 -18.2 L124.5 -16.8 L125.8 -15.4 L126.9 -13.9 L128 -12.4 L128.9 -10.9 L129.7 -9.4 L130.4 -7.9 L131 -6.3 L131.4 -4.7 L131.7 -3.2 L131.9 -1.6 L132 -0 Z" /></svg>
        <div class="arm" style="--i: 13"><div class="pen"></div></div>
        <div class="arm" style="--i: 12"><div class="pen"></div></div>
        <div class="arm" style="--i: 11"><div class="pen"></div></div>
        <div class="arm" style="--i: 10"><div class="pen"></div></div>
        <div class="arm" style="--i: 9"><div class="pen"></div></div>
        <div class="arm" style="--i: 8"><div class="pen"></div></div>
        <div class="arm" style="--i: 7"><div class="pen"></div></div>
        <div class="arm" style="--i: 6"><div class="pen"></div></div>
        <div class="arm" style="--i: 5"><div class="pen"></div></div>
        <div class="arm" style="--i: 4"><div class="pen"></div></div>
        <div class="arm" style="--i: 3"><div class="pen"></div></div>
        <div class="arm" style="--i: 2"><div class="pen"></div></div>
        <div class="arm" style="--i: 1"><div class="pen"></div></div>
        <div class="arm head" style="--i: 0"><div class="pen"></div></div>
      </div>
      <pre class="formula"><b>spiro_a</b> = mod(now_ms() / 40, 360)
<b>spiro_b</b> = -c.spiro_a * 5 / 3
arm: rotate(spiro_a) 80px, pen: rotate(spiro_b) 52px</pre>
    </section>

    <section class="panel" id="p-clock">
      <h2>Clock <small>mod() is a wheel</small></h2>
      <div class="stage clock">
        <div class="face">
          <i class="tick" style="--n: 0"></i><i class="tick" style="--n: 1"></i><i class="tick" style="--n: 2"></i>
          <i class="tick" style="--n: 3"></i><i class="tick" style="--n: 4"></i><i class="tick" style="--n: 5"></i>
          <i class="tick" style="--n: 6"></i><i class="tick" style="--n: 7"></i><i class="tick" style="--n: 8"></i>
          <i class="tick" style="--n: 9"></i><i class="tick" style="--n: 10"></i><i class="tick" style="--n: 11"></i>
          <div class="hand h"></div>
          <div class="hand m"></div>
          <div class="hand s"></div>
          <div class="pin"></div>
        </div>
      </div>
      <pre class="formula"><b>clk_sec</b>  = mod(now_ms() / 1000, 60) * 6
<b>clk_min</b>  = mod(now() / 60, 60) * 6
<b>clk_hour</b> = mod(now() / 3600 + c.utc_offset, 12) * 30</pre>
    </section>

    <section class="panel" id="p-dice">
      <h2>Dice <small>fract(sin(x) * big) is noise</small></h2>
      <div class="stage dice">
        <div class="die">
          <i class="pip tl"></i><i class="pip tr"></i>
          <i class="pip ml"></i><i class="pip c"></i><i class="pip mr"></i>
          <i class="pip bl"></i><i class="pip br"></i>
        </div>
        <div class="dice-side">
          <div class="big" id="dice-num">[[[c:dice]]]</div>
          <div class="fuse"><div class="fuse-fill"></div></div>
          <div class="hint">rerolls every 2 s</div>
        </div>
      </div>
      <pre class="formula"><b>dice_noise</b> = fract(sin(floor(now() / 2)) * 9999)
<b>dice</b>       = floor(c.dice_noise * 6) + 1
<b>dice_odd</b>   = mod(c.dice, 2)</pre>
    </section>

    <section class="panel wide" id="p-waves">
      <h2>Waveforms <small>one period, six shapes &middot; t = now_ms() / 4000</small></h2>
      <div class="stage waves">
        <div class="wave" style="--v: var(--w-sine)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_sine|round:2]]]</div>
          <div class="nm">sine</div>
          <div class="fx">0.5+0.5*sin(2*PI*t)</div>
        </div>
        <div class="wave" style="--v: var(--w-abs)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_abs|round:2]]]</div>
          <div class="nm">lighthouse</div>
          <div class="fx">abs(sin(PI*t))</div>
        </div>
        <div class="wave" style="--v: var(--w-tri)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_tri|round:2]]]</div>
          <div class="nm">triangle</div>
          <div class="fx">abs(2*fract(t)-1)</div>
        </div>
        <div class="wave" style="--v: var(--w-saw)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_saw|round:2]]]</div>
          <div class="nm">sawtooth</div>
          <div class="fx">fract(t)</div>
        </div>
        <div class="wave" style="--v: var(--w-square)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_square]]]</div>
          <div class="nm">square</div>
          <div class="fx">fract(t)&lt;0.5?1:0</div>
        </div>
        <div class="wave" style="--v: var(--w-noise)">
          <div class="track"><div class="fill"></div></div>
          <div class="val">[[[c:w_noise|round:2]]]</div>
          <div class="nm">noise</div>
          <div class="fx">fract(sin(floor(16*t))*43758)</div>
        </div>
      </div>
      <pre class="formula">Same clock, different shape. Every bar is one Expression Control: height = value * 100%.</pre>
    </section>

    <section class="panel wide" id="p-hype">
      <h2>Live counter <small>_at timestamps are physics</small></h2>
      <div class="stage hype">
        <div class="hype-left">
          <svg class="ring" viewBox="0 0 200 200" aria-hidden="true">
            <circle class="ring-bg" cx="100" cy="100" r="90" />
            <circle class="ring-fg" cx="100" cy="100" r="90" />
          </svg>
          <div class="flash"></div>
          <div class="num" id="hype-num">[[[c:hype]]]</div>
        </div>
        <div class="hype-right">
          <p><b>hype</b> is a plain Counter control. Bump it from the dashboard and the number springs, the ring fills a tenth, and a flash fades - none of it is a CSS animation. Every control carries <b>c.key_at</b>, the second it was last written, and the bounce is just a formula of how long ago that was.</p>
          <div class="ago">last bump <b>[[[c:hype_age|round:0]]] s</b> ago</div>
          <pre class="formula"><b>hype_age</b>  = (now_ms() - c.hype_at * 1000) / 1000
<b>hype_pop</b>  = 1 + 0.5 * max(0, 1 - c.hype_age / 1.5)
              * abs(cos(3 * PI * c.hype_age))
<b>hype_ring</b> = mod(c.hype, 10) / 10</pre>
        </div>
      </div>
    </section>

  </main>

  <footer class="bottom" id="bottom">
    <div class="milestone">
      <span>[[[followers_total]]] followers</span>
      <div class="bar"><div class="bar-fill"></div></div>
      <span class="mono">mod(t.followers_total, 100) = [[[c:milestone_pct]]]</span>
    </div>
    <div class="credit">overlabels.com/help/math</div>
  </footer>
</div>
```

### `css`

The stylesheet. Tags work in here too.

```css
/* DO NOT DELETE THIS OVERLAY. IT'S REFERENCED IN HELP DOCS! */
:root {
  --hue: [[[c:hue|round:1]]];
  --px: [[[c:planet_x|round:2]]]px;
  --py: [[[c:planet_y|round:2]]]px;
  --mx: [[[c:moon_x|round:2]]]px;
  --my: [[[c:moon_y|round:2]]]px;
  --sa: [[[c:spiro_a|round:2]]]deg;
  --sb: [[[c:spiro_b|round:2]]]deg;
  --w-sine: [[[c:w_sine|round:3]]];
  --w-abs: [[[c:w_abs|round:3]]];
  --w-tri: [[[c:w_tri|round:3]]];
  --w-saw: [[[c:w_saw|round:3]]];
  --w-square: [[[c:w_square]]];
  --w-noise: [[[c:w_noise|round:3]]];
  --sec: [[[c:clk_sec|round:2]]]deg;
  --min: [[[c:clk_min|round:2]]]deg;
  --hour: [[[c:clk_hour|round:2]]]deg;
  --dice: [[[c:dice]]];
  --odd: [[[c:dice_odd]]];
  --fuse: [[[c:dice_fuse|round:3]]];
  --pop: [[[c:hype_pop|round:3]]];
  --ring: [[[c:hype_ring|round:3]]];
  --flash: [[[c:hype_flash|round:3]]];
  --milestone: [[[c:milestone_pct]]];

  --bg: #0a0c10;
  --panel: #10131a;
  --text: #e8eaf0;
  --muted: #8b93a7;
  --line: oklch(0.42 0.06 var(--hue) / 0.7);
  --line2: oklch(0.42 0.06 var(--hue) / 0.35);
  --accent: oklch(0.78 0.17 var(--hue));
  --accent2: oklch(0.8 0.17 calc(var(--hue) + 120));
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Albert Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.scene {
  width: 1920px;
  height: 1080px;
  padding: 32px 40px 28px;
  display: grid;
  grid-template-rows: 64px 1fr 40px;
  gap: 20px;
}

/* header / footer */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.brand {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}

.brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent);
}

.status {
  font-size: 20px;
  font-weight: 600;
}

.meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 15px;
}

.milestone {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.bar {
  width: 260px;
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: calc(var(--milestone) * 1%);
  background: var(--accent);
  transition: width 0.6s ease-out;
}

.credit {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* panels */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  min-height: 0;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 16px 20px 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.panel.wide {
  grid-column: span 2;
}

.panel h2 {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.panel h2 small {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.stage {
  position: relative;
  min-height: 0;
}

.formula {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre;
  overflow: hidden;
}

.formula b {
  color: var(--accent);
  font-weight: 600;
}

/* epicycles */

.orbit > * {
  position: absolute;
  left: 50%;
  top: 50%;
}

.orbit-ring {
  width: 210px;
  height: 210px;
  margin: -105px;
  border: 1px dashed var(--line);
  border-radius: 50%;
}

.sun {
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 26px var(--accent);
}

.planet-frame {
  width: 0;
  height: 0;
  transform: translate(var(--px), var(--py));
}

.moon-ring {
  position: absolute;
  width: 52px;
  height: 52px;
  margin: -26px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.planet {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  background: var(--text);
}

.moon {
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 14px var(--accent2);
  transform: translate(var(--mx), var(--my));
}

/* the comet tail: same target every frame, but each ghost lags behind on a
   longer transition, so no extra controls are needed for a trail */
.ghost {
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: calc(0.55 - var(--k) * 0.08);
  transform: translate(var(--mx), var(--my));
  transition: transform calc(var(--k) * 110ms) linear;
}

/* spirograph */

.spiro svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;
  overflow: visible;
}

.spiro path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--sa) - var(--i) * 6deg)) translateX(80px);
}

.pen {
  width: 0;
  height: 0;
  transform: rotate(calc(var(--sb) + var(--i) * 10deg)) translateX(52px);
}

.pen::after {
  content: "";
  position: absolute;
  width: calc(13px - var(--i) * 0.7px);
  height: calc(13px - var(--i) * 0.7px);
  margin: calc(-6.5px + var(--i) * 0.35px);
  border-radius: 50%;
  background: var(--accent);
  opacity: calc(1 - var(--i) / 14);
}

.arm.head .pen::after {
  box-shadow: 0 0 16px var(--accent);
}

/* clock */

.clock {
  display: grid;
  place-content: center;
}

.face {
  position: relative;
  width: 250px;
  height: 250px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.tick {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  transform: rotate(calc(var(--n) * 30deg));
}

.tick::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 2px;
  height: 12px;
  background: var(--muted);
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  border-radius: 3px;
}

.hand.h {
  width: 6px;
  height: 66px;
  margin-left: -3px;
  background: var(--text);
  transform: rotate(var(--hour));
}

.hand.m {
  width: 4px;
  height: 96px;
  margin-left: -2px;
  background: var(--text);
  transform: rotate(var(--min));
}

.hand.s {
  width: 2px;
  height: 108px;
  margin-left: -1px;
  background: var(--accent);
  transform: rotate(var(--sec));
}

.pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--accent);
}

/* dice */

.dice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.die {
  width: 140px;
  height: 140px;
  border-radius: 24px;
  background: var(--text);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 16px;
  transform: rotate(calc((var(--dice) - 3.5) * 5deg)) scale(calc(1 + 0.12 * max(0, 1 - var(--fuse) * 6)));
}

.pip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  place-self: center;
}

.pip.tl { grid-area: 1 / 1; }
.pip.tr { grid-area: 1 / 3; }
.pip.ml { grid-area: 2 / 1; }
.pip.c  { grid-area: 2 / 2; }
.pip.mr { grid-area: 2 / 3; }
.pip.bl { grid-area: 3 / 1; }
.pip.br { grid-area: 3 / 3; }

.pip.tl, .pip.br { opacity: clamp(0, calc(var(--dice) - 1), 1); }
.pip.tr, .pip.bl { opacity: clamp(0, calc(var(--dice) - 3), 1); }
.pip.ml, .pip.mr { opacity: clamp(0, calc(var(--dice) - 5), 1); }
.pip.c { opacity: var(--odd); }

.dice-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.big {
  font-family: var(--mono);
  font-size: 84px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.fuse {
  width: 120px;
  height: 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.fuse-fill {
  height: 100%;
  width: calc((1 - var(--fuse)) * 100%);
  background: var(--accent);
}

.hint {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* waveforms */

.waves {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  min-height: 0;
}

.wave {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.track {
  flex: 1;
  min-height: 80px;
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--v) * 100%);
  background: var(--accent);
  opacity: 0.85;
}

.val {
  font-family: var(--mono);
  font-size: 18px;
  text-align: center;
  margin-top: 8px;
}

.nm {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--text);
  margin-top: 2px;
}

.fx {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
  min-height: 31px;
  overflow-wrap: anywhere;
}

/* live counter */

.hype {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  align-items: center;
}

.hype-left {
  position: relative;
  width: 230px;
  height: 230px;
  display: grid;
  place-content: center;
}

.ring {
  position: absolute;
  inset: 0;
  width: 230px;
  height: 230px;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 6;
}

.ring-bg {
  stroke: var(--line);
}

.ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 565.5;
  stroke-dashoffset: calc(565.5 * (1 - var(--ring)));
  transition: stroke-dashoffset 0.4s ease-out;
}

.flash {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--text);
  opacity: calc(var(--flash) * 0.9);
}

.num {
  font-family: var(--mono);
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
  transform: scale(var(--pop));
}

.hype-right {
  display: grid;
  gap: 12px;
  align-content: center;
}

.hype-right p {
  font-size: 15px;
  line-height: 1.5;
}

.hype-right p b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
}

.ago {
  font-size: 15px;
  color: var(--muted);
}

.ago b {
  font-family: var(--mono);
  color: var(--text);
  font-weight: 600;
}
```

## Controls

Controls are named, live-updatable values the overlay reads with `[[[c:<key>]]]`. These 28 are defined by the overlay itself and are recreated, with the default values shown, for anyone who copies it.

| Tag | Type | Label | Default | Referenced in source |
|---|---|---|---|---|
| `[[[c:hue]]]` | expression | Accent hue |  | yes |
| `[[[c:orbit_t]]]` | expression | Orbit angle |  | no |
| `[[[c:planet_x]]]` | expression | Planet X |  | yes |
| `[[[c:planet_y]]]` | expression | Planet Y |  | yes |
| `[[[c:moon_x]]]` | expression | Moon X |  | yes |
| `[[[c:moon_y]]]` | expression | Moon Y |  | yes |
| `[[[c:spiro_a]]]` | expression | Spirograph arm angle |  | yes |
| `[[[c:spiro_b]]]` | expression | Spirograph pen angle |  | yes |
| `[[[c:w_sine]]]` | expression | Wave: sine |  | yes |
| `[[[c:w_abs]]]` | expression | Wave: lighthouse |  | yes |
| `[[[c:w_tri]]]` | expression | Wave: triangle |  | yes |
| `[[[c:w_saw]]]` | expression | Wave: sawtooth |  | yes |
| `[[[c:w_square]]]` | expression | Wave: square |  | yes |
| `[[[c:w_noise]]]` | expression | Wave: noise |  | yes |
| `[[[c:utc_offset]]]` | number | Clock: hours ahead of UTC | `2` | no |
| `[[[c:clk_sec]]]` | expression | Clock: second hand |  | yes |
| `[[[c:clk_min]]]` | expression | Clock: minute hand |  | yes |
| `[[[c:clk_hour]]]` | expression | Clock: hour hand | `340.7333333330462` | yes |
| `[[[c:dice_noise]]]` | expression | Dice noise |  | no |
| `[[[c:dice]]]` | expression | Dice |  | yes |
| `[[[c:dice_odd]]]` | expression | Dice is odd |  | yes |
| `[[[c:dice_fuse]]]` | expression | Dice fuse |  | yes |
| `[[[c:hype]]]` | counter | Hype | `0` | yes |
| `[[[c:hype_age]]]` | expression | Hype: seconds since last bump | `1788081673.925` | yes |
| `[[[c:hype_pop]]]` | expression | Hype: bounce scale | `1` | yes |
| `[[[c:hype_ring]]]` | expression | Hype: ring fill | `0` | yes |
| `[[[c:hype_flash]]]` | expression | Hype: flash | `0` | yes |
| `[[[c:milestone_pct]]]` | expression | Followers past the last hundred |  | yes |

### Control detail

- `c:hue` - Slow colour wheel for every border and dot. One lap every 43 s.
  - expression: `mod(now_ms() / 120, 360)`
- `c:orbit_t` - Angle in radians, one lap every 12 s. Everything in the epicycle panel is derived from this.
  - expression: `2 * PI * now_ms() / 12000`
- `c:planet_x` - Chained: reads c.orbit_t.
  - expression: `105 * cos(c.orbit_t)`
- `c:planet_y` - Chained: reads c.orbit_t.
  - expression: `105 * sin(c.orbit_t)`
- `c:moon_x` - Chained twice: the planet position plus a smaller, faster circle.
  - expression: `c.planet_x + 26 * cos(8 * c.orbit_t)`
- `c:moon_y` - Chained twice: the planet position plus a smaller, faster circle.
  - expression: `c.planet_y + 26 * sin(8 * c.orbit_t)`
- `c:spiro_a` - Degrees, 25 per second. The CSS rotates an arm by this.
  - expression: `mod(now_ms() / 40, 360)`
- `c:spiro_b` - The pen rotates the other way at 5/3 the speed: a hypotrochoid with R=5, r=3.
  - expression: `-c.spiro_a * 5 / 3`
- `c:w_sine` - 0..1, period 4 s.
  - expression: `0.5 + 0.5 * sin(2 * PI * now_ms() / 4000)`
- `c:w_abs` - abs() folds the negative half up, so it never dips below zero.
  - expression: `abs(sin(PI * now_ms() / 4000))`
- `c:w_tri` - A sawtooth, scaled to -1..1, then abs().
  - expression: `abs(2 * fract(now_ms() / 4000) - 1)`
- `c:w_saw` - fract() keeps only the fractional part: a ramp that snaps back.
  - expression: `fract(now_ms() / 4000)`
- `c:w_square` - A ternary on the sawtooth.
  - expression: `fract(now_ms() / 4000) < 0.5 ? 1 : 0`
- `c:w_noise` - The shader trick: fract(sin(x) * big) looks random. Steps 4 times a second.
  - expression: `fract(sin(floor(now_ms() / 250)) * 43758.5453)`
- `c:utc_offset` - Amsterdam summer time is 2, winter is 1.
  - min=-12, max=14, step=1, reset_value=2, random=false, random_interval=null
- `c:clk_sec` - Degrees. now_ms() so the hand sweeps instead of ticking.
  - expression: `mod(now_ms() / 1000, 60) * 6`
- `c:clk_min` - Degrees.
  - expression: `mod(now() / 60, 60) * 6`
- `c:clk_hour` - Degrees. now() is UTC, so the offset control shifts it.
  - expression: `mod(now() / 3600 + c.utc_offset, 12) * 30`
- `c:dice_noise` - 0..1, looks random, holds for 2 s. floor(now() / 2) freezes time in 2 s steps before it goes into sin().
  - expression: `fract(sin(floor(now() / 2)) * 9999)`
- `c:dice` - 1..6. Chained: scales the noise up and snaps to an integer.
  - expression: `floor(c.dice_noise * 6) + 1`
- `c:dice_odd` - 1 for 1, 3, 5. Shows the centre pip.
  - expression: `mod(c.dice, 2)`
- `c:dice_fuse` - 0..1 countdown to the next roll.
  - expression: `fract(now_ms() / 2000)`
- `c:hype` - Bump this from the dashboard while the overlay is on screen.
  - min=0, max=null, step=1, reset_value=0, random=false, random_interval=null
- `c:hype_age` - c.hype_at is the Unix second the counter was last written.
  - expression: `(now_ms() - c.hype_at * 1000) / 1000`
- `c:hype_pop` - A damped bounce: 1.5 at the moment of the bump, back to 1 after 1.5 s.
  - expression: `1 + 0.5 * max(0, 1 - c.hype_age / 1.5) * abs(cos(3 * PI * c.hype_age))`
- `c:hype_ring` - 0..1, fills a tenth per bump and wraps at ten.
  - expression: `mod(c.hype, 10) / 10`
- `c:hype_flash` - 1 at the bump, 0 after 0.6 s.
  - expression: `max(0, 1 - c.hype_age / 0.6)`
- `c:milestone_pct` - Live Twitch data in an expression: t.followers_total moves on every follow.
  - expression: `mod(t.followers_total, 100)`

Every control also exposes a companion `[[[c:<key>_at]]]` holding the Unix timestamp in seconds of when it last changed.

## Live data tags used

Beyond its controls, this overlay reads 2 data tag(s). These resolve against Twitch channel data and, for alerts, the firing event. A tag with no data renders as nothing unless it carries a `?? default`.

- `[[[channel_name]]]`
- `[[[followers_total]]]`

## Copying this overlay

Open <https://overlabels.com/overlay/elba-elbe-bergen-rockies/public> while logged in to Overlabels and press **Copy**. That creates your own editable copy of the source above, along with the controls listed under Controls. It does not copy the author's integrations, Lists.

You can also paste the source into a new overlay by hand at <https://overlabels.com/templates/create>.