Skip to content

Commit ff91fbc

Browse files
committed
Teach overlay catalog examples and eyebrow type stack
1 parent 9643bd9 commit ff91fbc

2 files changed

Lines changed: 98 additions & 59 deletions

File tree

‎skills/screenrig/SKILL.md‎

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -644,21 +644,26 @@ screenrig --json media list --tag TAG --primitive image
644644
`compose catalog` prints the fail-closed page language: page keys
645645
`width`/`height`/`font`/`background`/`brand`/`text`/`image`/`video`/`motion`/`pages`/`viewing`/`logo`,
646646
regions `fullpage|left|right|left-third|middle-third|right-third|middle-half|top-half|bottom-half|top|bottom`,
647-
and inner fields `title|subtitle|text|footer|image|video|iframe|webapp|cards|card|table`
647+
and inner fields `eyebrow|title|subtitle|text|footer|image|video|iframe|webapp|cards|card|table`
648648
plus `enter`/`stagger`/`motion`/`align`/`valign`/`fill`/`color`/`z`/`shadow`/`outline`.
649649
Author only catalog fields. Unknown keys fail the whole spec. Do not author
650650
`fontSize`. Do not author `x`/`y`. Do not author Frame trees, recipes, or
651651
`.layout.json`. On the page, `text` is the copy color. In a
652652
region, `text` is body copy (a string or an array of lines). Type size is
653653
procedural from `min(width, height)` and optional `viewing` `near|mid|far`
654-
(default `mid`). Titles default to `brand`. Body (`subtitle`, `text`, `footer`)
655-
defaults to `text`. Optional region or `card` `color` overrides every role in
656-
that box. Text over a page `image` or `video` with no `fill` gets a 1 px
657-
unblurred drop shadow (`#000000E6` on light type, `#FFFFFFE6` on dark type).
658-
Set `shadow` to `"none"` or `{ x, y, color }` to override. `outline` is
659-
`{ width: 0.5-12, color }` and is off unless set. A card plate is backing, so
660-
type on a card does not get the automatic shadow.
661-
On 1920×1080 mid, body wish is about 45 px and title wish is 86 px. A region
654+
(default `mid`). Parse order is `eyebrow`, `title`, `subtitle`, `text`, then
655+
image/cards/table, footer last. `eyebrow` is the kicker above the headline and
656+
defaults to `brand`. Region `title` defaults to page `text`. Body `text` uses
657+
muted (mixed from `text` toward `background`). `subtitle` and `footer` use
658+
`text`. Card-item titles, prices, and table headers stay `brand`. Optional
659+
region or `card` `color` overrides every role in that box. Text over a page
660+
`image` or `video` with no `fill` gets a 1 px unblurred drop shadow
661+
(`#000000E6` on light type, `#FFFFFFE6` on dark type). Set `shadow` to
662+
`"none"` or `{ x, y, color, blur? }` to override (`blur` 0–32, omit is 0).
663+
`outline` is `{ width: 0.5-12, color }` and is off unless set. A card plate is
664+
backing, so type on a card does not get the automatic shadow.
665+
On 1920×1080 mid, body wish is about 45 px, title wish is 130 px, and eyebrow
666+
wish is 32 px. A region
662667
then applies one scale (about 0.65–1.35) so type fills the box; a single line
663668
is not grown. Footer stays on the bottom edge. If the region holds image or a
664669
placeholder, type stays at scale 1 and media takes the leftover. Copy that
@@ -673,7 +678,7 @@ column's body length.
673678
`card` (singular) is a plate. `card.fit` is `region` (default: fill the whole
674679
region rect) or `ink` (hug measured type plus 24 px pad, placed with the
675680
region's `align`/`valign`). Default fill is the page background + B3 (30%
676-
transparency). Override with `card.fill`. Inner fields: `title`, `subtitle`,
681+
transparency). Override with `card.fill`. Inner fields: `eyebrow`, `title`, `subtitle`,
677682
`text`, `footer`, `image`, `cards`, `table`, `fill`, `color`, `fit`. `cards`
678683
(plural) is `[{ title, subtitle?, text?, price?, image? }]` and can sit inside
679684
`card`. No nested `card`. Sibling `title`/`text`/`cards` are not allowed next
@@ -742,8 +747,9 @@ enter/motion enums, viewing, installed fonts, and examples in this language.
742747

743748
### Compose a deck with fewer corrective steps
744749

745-
Prefer region `title`/`text`/`cards`/`table` for titles, copy, cards and
746-
tables so type fitting, font checks and safe-area diagnostics still run.
750+
Prefer region `eyebrow`/`title`/`text`/`cards`/`table` for kickers, titles,
751+
copy, cards and tables so type fitting, font checks and safe-area diagnostics
752+
still run.
747753
Keep illustrations as image assets in a region. A deck is `{ "pages": [ {
748754
"id": "intro", ...page overrides, regions } ] }`. `compose render` of that
749755
file is enough. `compose batch` adds a contact sheet and `--only ID`.
@@ -832,51 +838,63 @@ Codes worth acting on:
832838
adjacent playlist pages show the same media at the same rects; vary the
833839
layout or content when the repeat is accidental.
834840

835-
### Slide, overlay, and wordmark
841+
### Overlay family (slide-deck pages)
836842

837843
Overlay is a compose mechanic for slide-deck pages and live video. It is not
838844
the presentable-poster path. A presentable poster, menu, or event still is
839845
one generated image with the copy typeset in the still.
840846

841-
For deck text over images or video, put copy in a `card` so the plate brings type
842-
forward. Default `card.fit` `region` fills the region (a column, a half).
843-
`fit: "ink"` hugs the measured type plus 24 px; use it for lower thirds and
844-
short copy so a two-line `bottom` card does not paint a full-width opaque
845-
band. The type is sized inside the plate's padding, so the plate contains
846-
every line, title and body alike. Default fill is the page background + B3.
847-
Override with `card.fill`.
848-
Keep text opaque. Check contrast over changing bright and dark frames; a
849-
poor type-on-plate contrast warns (`card_low_contrast`) and does not block
850-
render. Do not wrap every region in a card.
847+
Named regions are the only compose language. Copy catalog examples; do not
848+
invent Frame trees, recipes, `fontSize`, `x`, or `y`. Do not put deck copy
849+
through `playlist templates` or template `slots` — those still
850+
`vectorChromeError`.
851851

852-
Overlay still (transparent page, ink-fit lower third):
852+
Photo or video is page `image` or `video`, at rest. Copy is a named region.
853+
`overlay-left`, `overlay-right`, and `overlay-bottom` add a `card`.
854+
`overlay-title` and `overlay-still` do not. Enter lives on the copy region,
855+
from the layout side (page may override). The mark is page `logo`, at rest —
856+
not a third raster.
857+
858+
`compose catalog` examples name the family:
859+
860+
| example | rails | copy | enter |
861+
|---|---|---|---|
862+
| `overlay-title` | page `image` | `left` type, no card | `fade-right` |
863+
| `overlay-left` | page `image` | `left` card, `fit` `region` | `fade-right` |
864+
| `overlay-right` | page `image` | `right` card, `fit` `region` | `fade-left` |
865+
| `overlay-bottom` | page `image` or `video` | `bottom` card, `fit` `region` | `fade-up` |
866+
| `overlay-still` | no photo | `fullpage` type, no card | `fade-in` |
867+
| `overlay` | page `video` | `bottom` card, `fit` `ink` | `fade-up` |
868+
869+
`card.fit: "region"` for left/right panels and full-width bands. `fit: "ink"`
870+
only for a snug lower third. Default fill is the page background + B3.
871+
Override with `card.fill` when that wash is too thin; keep text opaque.
872+
Do not wrap every region. Boardroom titles use `overlay-title`: type on
873+
`left`, `valign` bottom, no card. Lone stills and diagrams use `overlay-still`:
874+
`fullpage` with `enter: "fade-in"` and no copy card.
853875

854876
```json
855877
{
856878
"width": 1920,
857879
"height": 1080,
858-
"background": "#00000000",
859-
"brand": "#C9A227",
860-
"text": "#FFFFFF",
861-
"video": "./clip.mp4",
862-
"bottom": {
863-
"enter": "fade-up",
864-
"valign": "bottom",
880+
"background": "#2A3547",
881+
"brand": "#F8B334",
882+
"text": "#F4F7FA",
883+
"image": "./still.jpg",
884+
"left": {
885+
"enter": "fade-right",
865886
"card": {
866-
"fit": "ink",
867-
"title": "Lower third",
868-
"text": "Keep copy on a snug plate over the picture."
887+
"fit": "region",
888+
"fill": "#2A3547E6",
889+
"eyebrow": "THE LOW END",
890+
"title": "RAM is shrinking",
891+
"text": "What, when, where, and the next action."
869892
}
870893
}
871894
}
872895
```
873896

874-
Author the overlay at the full slide resolution (1920×1080 in this example),
875-
so the type ramp stays at the intended scale. A `bottom` card with
876-
`fit: "region"` is a full-width band; that is not the default for short copy.
877-
Keep any separate wordmark clear of the copy and preserve its proportions.
878-
879-
For a side rail, put a `card` in `left` or `right`. Do not author `x`/`y`.
897+
Snug lower third (`overlay` in the catalog):
880898

881899
```json
882900
{
@@ -885,20 +903,25 @@ For a side rail, put a `card` in `left` or `right`. Do not author `x`/`y`.
885903
"background": "#00000000",
886904
"brand": "#C9A227",
887905
"text": "#FFFFFF",
888-
"left": {
906+
"video": "./clip.mp4",
907+
"bottom": {
908+
"enter": "fade-up",
909+
"valign": "bottom",
889910
"card": {
890-
"title": "Side title",
891-
"text": "What, when, where, and the next action."
911+
"fit": "ink",
912+
"title": "Lower third",
913+
"text": "Keep copy on a snug plate over the picture."
892914
}
893915
}
894916
}
895917
```
896918

897-
Page `logo` is the identity mark: 32 px inset from the chosen corner, contain
898-
inside 200×100, never upscaled. Prefer `logo` over a hand-placed playlist
899-
wordmark when composing the still.
919+
Author the overlay at the full slide resolution (1920×1080 in this example),
920+
so the type ramp stays at the intended scale. Page `logo` is the identity
921+
mark: 32 px inset from the chosen corner, contain inside 200×100, never
922+
upscaled. Prefer `logo` over a hand-placed playlist wordmark.
900923

901-
For a deck overlay playlist: photo `layer` 0 + overlay `layer` 1 on a
924+
For a deck overlay playlist: photo or video `layer` 0 + overlay `layer` 1 on a
902925
1920×1080 canvas. Use `content_fit: "fill"` for a matching-aspect full-canvas
903926
overlay; preserve the photo proportions with `contain` or intentional `cover`
904927
cropping. Eight-digit hex is how the page stays transparent and the plate

‎skills/screenrig/references/composition.md‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -78,31 +78,47 @@ something. Arbitrary minimalism, gratuitous decoration, and a repeated grid of
7878
cards can each weaken the result. There is no fixed template or maximum layer
7979
count; every element should earn its space.
8080

81-
- **Title, body, and table slides:** prefer region `title` / `text` / `cards`
82-
/ `table` so type fitting, font checks, and safe-area diagnostics still
83-
run. Keep illustrations as image assets in a region.
81+
- **Title, body, and table slides:** prefer region `eyebrow` / `title` /
82+
`text` / `cards` / `table` so type fitting, font checks, and safe-area
83+
diagnostics still run. Keep illustrations as image assets in a region.
84+
Kickers go in `eyebrow` (brand, above the headline). Headlines go in
85+
`title` (page text). Body goes in `text` (muted).
8486
- **Schedules and noticeboards:** make time, activity, location, and status
8587
easy to scan, with a clear date, audience, and next step. A consistent grid
8688
can be the right structure for functional information; choose it when it
8789
helps people find what they need.
8890

8991
Keep support behind text close to its actual bounds. Prefer a `card` plate:
90-
`fit: "region"` on a column, `fit: "ink"` on a lower third or short copy, so
91-
type sits on a snug translucent surface instead of a giant opaque band. Keep
92+
`fit: "region"` on a column or full-width band, `fit: "ink"` only on a snug
93+
lower third, so type sits on a plate instead of a giant default wash. Keep
9294
text opaque; adjust `card.fill` independently. Do not wrap every region. A
9395
full-width lower third is useful when the content calls for one, rather than
9496
a default applied to every page. Overlay cards are a deck mechanic, not the
9597
presentable-poster path.
9698

99+
For an exec-intro-style deck, copy the overlay family from `compose catalog`.
100+
Photo or video is page `image` or `video`, at rest. Copy is a named region;
101+
`overlay-left`, `overlay-right`, and `overlay-bottom` add a `card`. Enter lives
102+
on the copy region, from the layout side: `left` gets `fade-right`, `right`
103+
gets `fade-left`, `bottom` gets `fade-up`. A page may override. The mark is
104+
page `logo`, at rest. Catalog keys: `overlay-title` (page image, `left` type,
105+
no card), `overlay-left`, `overlay-right`, `overlay-bottom`, `overlay-still`
106+
(`fullpage` type, no photo, no card), and `overlay` (video plus ink-fit lower
107+
third). Do not rebuild those pages as Frame trees, recipes, or playlist
108+
template `slots`.
109+
97110
Read the selected CLI's `compose catalog` before authoring. The language is
98111
named regions, not Frame trees, recipes, or curated themes. Type size is
99-
procedural; do not author `fontSize`, `x`, or `y`. Region `shadow` and
100-
`outline` are optional paint treatments. Use them sparingly, when the design
101-
calls for them (a headline, a badge). Body copy, menus and prices stay plain
102-
for readability. When an unsupported visual treatment is needed, bake it into
103-
an appropriate image asset using available tools and preserve transparent
104-
padding. Compose paint treatments and playlist primitive `enter`/`motion` are
105-
not interchangeable APIs.
112+
procedural; do not author `fontSize`, `x`, or `y`. Overlay-family copy uses
113+
`eyebrow` for the kicker, `title` for the headline, and `text` for the body.
114+
`eyebrow` and card-item titles default to brand; region title defaults to
115+
page text; body `text` uses muted. Region `shadow` (`{ x, y, color, blur? }`,
116+
blur 0–32) and `outline` are optional paint treatments. Use them sparingly,
117+
when the design calls for them (a headline, a badge). Body copy, menus and
118+
prices stay plain for readability. When an unsupported visual treatment is
119+
needed, bake it into an appropriate image asset using available tools and
120+
preserve transparent padding. Compose paint treatments and playlist primitive
121+
`enter`/`motion` are not interchangeable APIs.
106122

107123
## Live objects and motion
108124

0 commit comments

Comments
 (0)