Data to Dashboard

Raw numbers stream into a laptop, a question is typed, and the dashboard assembles out of the air before the camera skims the MRR line as it draws itself.

A dark data hall with a glossy grid floor, radar rings and pulses of light running down floor lanes to a central plinth under spotlights, flanked by two skylines of bar towers with lit caps and a rolling data terrain fading into fog. Four beats over 26 s at 120 bpm: a long push in through streaming particles, a short angled hold, a twelve-second layered build with a swing and close-up, then a pull-back to the hall.

Length: 26 s
Scenes: 4
Device: laptop
Style: abstract
Camera: establishing wide, push in, orbit, ultra closeup, pull back

//
    NORTHSTAR · DATA TO DASHBOARD — app-promo TEMPLATE 9 (tpl-dashboard). 26 s, 16:9, 30 fps, no VO.
    Treatment: treatment.md. Screens: tpl-dashboard.screens.html → tpl-dashboard.screens.json.

    THE IDEA. Raw numbers become an answer. A dark data hall: a glossy floor ruled with a grid,
    a data terrain on the horizon, two skylines of bar towers, light pulses running along floor lanes
    into a plinth. On the plinth, a laptop running Northstar (a SaaS analytics app). Raw data (glowing
    bits and loose figures) streams through the hall into its screen while the live event log scrolls.
    Someone asks "MRR by region, last 90 days"; the ask bar opens and the question types. Then the
    dashboard ASSEMBLES out of the air: the KPI row, the MRR line card and the region bars fly in from
    off frame, hover as an exploded staircase, pack home; the bars grow from their baseline, the KPIs
    roll up; the camera dives into the glass and skims along the MRR line as it draws itself, ending
    on the last point and its tooltip. End: the hall, the logo in 3D above the laptop.

    PALETTE. ground #070B16 · panel #0E1426 · raised #131B33 · hairline #1A2340 · outline #2A3760 ·
    ink #E8EEFF · muted #8A96B8 · primary (the north star) #7C9CFF · teal (good news) #2EE6C8 ·
    amber #FFB547 · rose #FF6B8B. The hall: floor #05070D, towers #0A0F1E, light in primary.

    BEATS AND SCENES (music 120 BPM, a beat = 0.5 s; every cut on a beat):
      n1-stream   0–5.5     HOOK. The hall, wide → push in. Bits and figures stream into the laptop;
                            the event log steps up a row per beat (scroll channel); caption "1.28M events. /
                            Zero answers." hung over the laptop
      n2-ask      5.5–9.5   FEATURE 1. The laptop: the ask bar GROWS from its left edge (expand-input:
                            scale.x + position.x, Send rides the right edge), the query TYPES
                            (typewriter), Send dips.
      n3-build    9.5–21.5  FEATURE 2 + PROOF. The dashboard ASSEMBLES (ui-assemble: three layers fly in,
                            hover exploded at +40/+80/+120 mm, pack home); the bars grow (scale.y + pinned
                            bottom), the KPIs roll up (odometer); then the ULTRA CLOSE-UP: side=front,
                            yaw −55, fill 170, dof 40/12 — the lens skims along the MRR line as it draws
                            (each segment scale.x from its left end), lands on the last point + tooltip.
      n4-end      21.5–26   CTA. Pull back to the hall; "Northstar" in text3d rises over the laptop; the line.

    TEMPLATE SWAP POINTS (re-skin for your own app):
      1. APP NAME — text3d#e4-name `text=` (n4-end), the sidebar "Northstar" in tpl-dashboard.screens.html
         (ns-ask + ns-frame), and text3d#e4-line (the end line). The caption text3d#c1-cap / #c1-cap2
         in n1-stream ("1.28M events." / "Zero answers.").
      2. PALETTE — the hexes listed above: in screens.html (header comment lists them) and here in
         `materials` (m-glow-primary / m-glow-teal / m-title-accent) + the stream palettes (repeat#bits
         vary#c) + light#rim colour. Re-run the converter after editing the HTML.
      3. SCREENS — tpl-dashboard.screens.html sections: ns-ask (greeting, ask bar, event log), ns-log (the
         raw rows), ns-frame (sidebar + query chip), ns-kpis (four KPIs: label + three odometer figures
         each), ns-panels (the line: 13 points / 12 segments — if you change the data, recompute each
         segment's left/top/width in the HTML and its rotation.z + draw offset here), ns-bars (five bars;
         change heights in HTML and the H(1−s)/2 offsets here). Convert:
           npx tsx scripts/html-screens.mts projects/templates/tpl-dashboard/tpl-dashboard.screens.html
             projects/templates/tpl-dashboard/tpl-dashboard.sections.json projects/templates/tpl-dashboard/tpl-dashboard.screens.json
         then paste the blocks into the