Green Energy

Corporate

# Lower Third Sample — Green Energy Six scenes for a channel that runs on one device: a dark-green plate with a leaning edge, an accent slant standing off it, under a slanted top bar and a pair of corner marks. Scene one is a screen recording rebuilt frame by frame. The other five are authored in the same language — but each one puts the plate somewhere else, at a different size, so the deck does not read as one scene six times. | # | scene | the plate | the type's job | the reveal | | --- | --- | --- | --- | --- | | 1 | Lower third | low band, bleeds left | the name, two-tone | word by word, the standing note to its right | | 2 | Topic | high narrow band, bleeds left | kicker, claim, one sentence | word by word | | 3 | Points | **mirrored** — bleeds RIGHT, right-aligned | three numbered rows | one line at a time | | 4 | Stat | narrow column, bleeds left and bottom | one number and its label | the number scales up, label word by word | | 5 | Quote | wide shallow band across the middle | two lines and an attribution | one line at a time, rising | | 6 | Sign-off | a card that bleeds off **nothing** | the name and a handle | word by word, handle last | Each plate is declared once as a rect per ratio — `(left, right-at-top, top, height)` — and everything else follows from it: the clip polygon, the accent slant's side and height, where the type's inset edge is, which way the words fly in from, and how much width each row actually has. ## The corner chrome is a different cut in every scene The recording carries a slanted top bar with an accent notch, a white dot, an energy mark and a row of chevrons — in the same corners on every loop. Held across six scenes that reads as a static overlay bolted over the video, so each scene takes its own cut of it: | scene | top bar | dot | energy mark | arrow | | --- | --- | --- | --- | --- | | 1 Lower third | as measured, from 59% to the right edge | yes | **yes — the only scene** | top right | | 2 Topic | short, from 78% | yes | no | none | | 3 Points | **off the LEFT edge**, notch at its inner end | no | no | bottom left, mirrored | | 4 Stat | none | yes | no | bottom right | | 5 Quote | long, from 44% | no | no | none | | 6 Sign-off | short, along the BOTTOM edge | yes | no | none | The bar is one shape with a span, an edge and a side: the notch always tucks against its open end, it always wipes open from its anchored edge (so the left-edge bar wipes the other way), and its own small lean reflects with it. The arrow flips with `flipX` and flies in from the side it points to. Nothing was added to make this work — it is the recording's own kit, rationed. **The subscribe pill is deliberately gone**, including the one the recording shows in scene one. It was the deck's only piece of channel furniture and it put a call to action in a template meant to carry someone else's video; the `cta` slot and the `pillInk` palette role went with it. ## Scene one — what was measured The recording is a 473 x 262 player window with no letterboxing, so that frame is the design frame and every base geometry number is a percentage of it. The loop restarts on a blank frame at pts 8.850s; `T` is seconds after that, which is the scene clock. | element | measured | authored | | --- | --- | --- | | top bar + notch | left edge travels 362 -> 284px, T 0.15 -> 0.35 | `scaleX` 0 -> 1 from the right, `0.15s`, `0.22s` | | corner dot | fades up early | `0.30s`, `0.25s` | | plate | right edge 9 -> 267px, T 0.383 -> 0.70, deltas 53/48/39/32/28/22/16/12/8 | `scaleX` 0 -> 1 from the left, `0.38s`, `0.32s`, `power2.out` | | sun mark | ink saturates T 0.40 -> 0.75 | fade + scale, `0.40s`, `0.35s` | | name | ink 87 -> 889px, T 0.533 -> 0.85, in three steps | `{part:"word"}`, `0.55s`, `0.26s`, stagger `0.08` | | accent slant | T 0.633 -> 0.85 | `scaleY` from the top + fade, `0.63s`, `0.24s` | | chevrons | T 0.72 -> 0.85 | fade + `x: -1cw`, `0.72s`, `0.28s` | | note | last in | fade + rise, `0.78s` | Nothing exits. The recording's own loop wipes everything off at the end of its cycle; a template does not know its length, so that beat is dropped rather than ported (motion.md Rule 5). **Every scene reuses that clock.** The chrome lands on the same frames in all six, and the plate always wipes open at `0.38s` — from the left, or from the right in the mirrored scene. Only the content reveal differs, which is what lets six different layouts still read as one system. ## Type The name is **Montserrat 700**, identified by measurement, not by eye: cap-normalised ink widths of `GREEN ENERGY` (194 / 16 = 12.13 caps) and `SOLUTIONS` (140 / 16 = 8.75) against every 700-weight face in the workshop. Montserrat lands within 4% on both, and the residual resolves to one consistent tracking of **+0.04em** on both strings (stored `letterSpacing: 4`), which no other candidate matched as cleanly. Cap height is 16px in the recording's frame = 65.95px on a 1080-tall canvas = `font.size: 66`; the 26px baseline step is `lineHeight: -5`. Two-tone lines are one text layer coloured per run with `<span data-text-color>` — which is what lets a word stagger run straight across the line break. Every row's box is `height: -1` with `alignY: 'top'`, so the box grows downward from a pinned cap top when filled copy runs longer than the placeholder. Cap tops come from the face's own metrics (ascent 0.968, descent 0.251, cap 0.700) rather than off the line box, and **every row is checked at build time against Montserrat's real ink width and the space its plate actually leaves it** — which is not the plate's width, because the plate leans: a row's usable width is set by its LOWEST line. That check is what sized the list and the quote. ## Geometry — one lean, six plates Three boxes per scene are parallelograms, and a stored box cannot lean, so each is a plain box with a `clip-path` polygon in the SCENE's css, keyed on `data.attrs.id`. The lean is measured once — 30px across per 81px down in the recording's frame, **0.3646 canvas px across per px down** — and every plate derives its own polygon from that constant and its own box, per ratio (the `css` patch in `sizeProps`). So a shallow band and a deep column lean at the same angle rather than at the same percentage, and the mirrored scene is the same polygon reflected. The accent slant is a fixed 65px thickness plus that lean over its own height, standing 44.6px past the plate's outer edge — the right edge normally, the left edge when the scene is mirrored. It keeps the measured height whatever the plate does, so a deeper plate gets the same mark rather than a big lime block. ## The other ratios 9:16 and 1:1 are not the landscape design letterboxed: each scene's plate is a rect authored for that canvas, and the narrow shapes that work in landscape become bands at different heights and depths on a phone. Every size is re-derived against its own canvas — `font.size` is resolution-independent, so the same stored number renders 1.78x larger on the 1920-tall canvas — and the five authored scenes are drawn at a larger scale there (0.85 in 9:16, 0.80 in 1:1) than a strict width ratio would give, because a near-full-width plate has room the landscape frame does not. Scene one's portrait note sits larger than a straight scale-down would put it, because 23.7px would have pinned silently at that canvas's floor. The backdrop is one stand-in still, reused by every scene and marked `broll: true` everywhere except the sign-off, where the picture is held.