tejas-overlays

name	tejas-overlays
description	Overlay primitives for Tejas's personal video content — screenshot reveal, code block, architecture diagram, progress rows, browser chrome, pull-quote, keyword emphasis, plus a bespoke-stat-reveal gallery. Use when adding any on-clip overlay in the Tejas aesthetic. For AIS/client work, use /hyperframes-registry instead.

Tejas · Overlay Primitives

Library of overlay patterns for Tejas's personal-content videos. See MOTION_PHILOSOPHY.md §6 and design spec §6 for the philosophy.

When to fire

• Adding any overlay to a Tejas-aesthetic composition
• Picking a stat/figure reveal (this skill contains the bespoke-stat gallery — §6)

The library

All primitives use --tejas-* tokens from assets/brand-tokens.css. All use spring-led motion (back.out(1.3) in, power2.in out). All live on a data-track-index ≥ 5 in the parent composition.

1 · Keyword emphasis (inline)

See tejas-captions skill — this is a caption-internal primitive, not standalone.

2 · Screenshot / image reveal

<div class="tejas-ss-card clip" data-start="..." data-duration="..." data-track-index="6">
  <img src="assets/screenshot.png" alt="">
</div>
<style>
  .tejas-ss-card {
    position: absolute; top: 18%; left: 80px; right: 80px;
    border-radius: 16px; border: 1px solid var(--tejas-border);
    background: var(--tejas-surface);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 var(--tejas-paper-glow);
    overflow: hidden; opacity: 0; transform: scale(0.9);
  }
  .tejas-ss-card img { width: 100%; display: block; }
</style>
<script>
  tl.to('.tejas-ss-card', { opacity: 1, scale: 1, duration: 0.48, ease: "back.out(1.2)" }, <start>);
  tl.to('.tejas-ss-card', { opacity: 0, scale: 0.96, duration: 0.28, ease: "power2.in" }, <end>);
</script>

3 · Code / terminal block (Mode 2)

<div class="tejas-code clip" data-start="..." data-duration="..." data-track-index="6">
  <pre><span class="ln">01</span><span class="k">const</span> a = <span class="k">new</span> Agent();<br><span class="ln">02</span>a.use(tools);</pre>
</div>
<style>
  .tejas-code {
    background: rgba(15,15,14,0.78); border: 1px solid var(--tejas-border);
    border-radius: 10px; padding: 16px 20px;
    font: 500 28px/1.6 var(--font-tejas-mono); color: var(--tejas-dim);
  }
  .tejas-code .ln { color: var(--tejas-muted); margin-right: 14px; opacity: 0.5; }
  .tejas-code .k  { color: var(--tejas-paper); font-weight: 700; }
  .tejas-code .c  { color: var(--tejas-muted); font-style: italic; }
  .tejas-code .s  { color: var(--tejas-soft); }
</style>
<script>
  tl.from('.tejas-code pre > *', { opacity: 0, y: 8, duration: 0.32, stagger: 0.08, ease: "power2.out" }, <start>);
</script>

4 · Architecture diagram (nodes)

<div class="tejas-arch clip" data-start="..." data-duration="..." data-track-index="6">
  <div class="row"><div class="node">user</div><div class="line"></div><div class="node">agent</div></div>
  <div class="vline"></div>
  <div class="row"><div class="node">api</div><div class="node">db</div><div class="node">llm</div></div>
  <div class="vline"></div>
  <div class="row"><div class="node hot">output</div></div>
</div>
<style>
  .tejas-arch .node {
    border: 1px solid var(--tejas-border-strong);
    background: rgba(250,250,246,0.04);
    border-radius: 8px; padding: 10px 14px;
    font: 500 22px var(--font-tejas-mono); color: var(--tejas-paper);
  }
  .tejas-arch .node.hot { background: var(--tejas-paper); color: var(--tejas-ink); border-color: var(--tejas-paper); }
  .tejas-arch .line  { width: 24px; height: 1.5px; background: var(--tejas-border-strong); }
  .tejas-arch .vline { width: 1.5px; height: 16px; background: var(--tejas-border-strong); margin: 0 auto; }
  .tejas-arch .row { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px 0; }
</style>
<script>
  tl.from('.tejas-arch .node', { opacity: 0, y: 10, scale: 0.94, duration: 0.32, stagger: 0.12, ease: "back.out(1.3)" }, <start>);
</script>

5 · Progress bar + metric row

<div class="tejas-bars clip" data-start="..." data-duration="..." data-track-index="6">
  <div class="prow"><div class="pchip">input</div><div class="pbar"><span style="width: 97%"></span></div><div class="pchip hero">97%</div></div>
  <!-- ... repeat per row -->
</div>
<style>
  .tejas-bars .prow { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
  .tejas-bars .pchip {
    font: 500 22px var(--font-tejas-mono); color: var(--tejas-paper);
    padding: 6px 12px; border: 1px solid var(--tejas-border-strong);
    background: rgba(250,250,246,0.04); border-radius: 6px; min-width: 100px;
  }
  .tejas-bars .pchip.hero { background: var(--tejas-paper); color: var(--tejas-ink); border-color: var(--tejas-paper); }
  .tejas-bars .pbar { flex: 1; height: 10px; border-radius: 5px; background: var(--tejas-border); overflow: hidden; }
  .tejas-bars .pbar > span { display: block; height: 100%; background: var(--tejas-paper); transform: scaleX(0); transform-origin: left center; }
</style>
<script>
  tl.to('.tejas-bars .pbar > span', { scaleX: 1, duration: 0.7, stagger: 0.14, ease: "power2.out" }, <start>);
  tl.from('.tejas-bars .pchip', { opacity: 0, y: 8, duration: 0.32, stagger: 0.14, ease: "power2.out" }, <start>);
</script>

6 · Browser / app window chrome

<div class="tejas-browser clip" data-start="..." data-duration="..." data-track-index="6">
  <div class="chrome">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
    <div class="url">tejasjb.dev</div>
  </div>
  <div class="body">
    <img src="assets/page.png" alt="">
  </div>
</div>
<style>
  .tejas-browser {
    border: 1px solid var(--tejas-border); border-radius: 12px 12px 8px 8px;
    background: var(--tejas-surface); overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  }
  .tejas-browser .chrome { background: var(--tejas-ink); border-bottom: 1px solid var(--tejas-border); padding: 10px 14px; display: flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; }
  .tejas-browser .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tejas-border-strong); }
  .tejas-browser .url { flex: 1; margin-left: 8px; background: var(--tejas-canvas); border: 1px solid var(--tejas-border); border-radius: 5px; padding: 4px 10px; font: 500 16px var(--font-tejas-mono); color: var(--tejas-dim); }
  .tejas-browser .body img { display: block; width: 100%; }
</style>
<script>
  tl.from('.tejas-browser', { opacity: 0, y: 16, scale: 0.95, duration: 0.45, ease: "back.out(1.2)" }, <start>);
</script>

7 · Pull-quote / full-bleed text

<div class="tejas-pullquote clip" data-start="..." data-duration="..." data-track-index="7">
  <span>We don't</span><br><span>actually</span><br><span>know why.</span>
</div>
<style>
  .tejas-pullquote {
    position: absolute; inset: 20% 10%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font: 800 clamp(72px, 10vw, 140px)/1.0 var(--font-tejas-sans);
    letter-spacing: -0.03em; color: var(--tejas-paper);
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    text-align: center;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
</style>
<script>
  tl.to('.tejas-pullquote', { opacity: 1, clipPath: 'inset(0 0 0 0)', duration: 0.55, ease: "expo.out" }, <start>);
  tl.to('.tejas-pullquote', { opacity: 0, duration: 0.3, ease: "power2.in" }, <end>);
</script>

---

Stat / figure reveals — bespoke per beat

There is no default stat primitive. Every stat moment deserves a reveal designed for its role in the script. Picking "corner badge" for every stat ruins the highest-information moments.

When authoring a stat beat, answer: what's this figure's role? Hero number? Comparison? Percentage? Metaphor? Passing detail? Then pick (or remix, or invent) a shape below that fits. Never reach for the same shape twice in one video unless they pair intentionally (e.g. two editorial pullouts for symmetric stats).

Shape gallery

#	Shape	Best for	Sketch
A	Editorial pullout	Hero standalone figure that needs to sit and land	Huge Geist 800 number (~120px) + thin hairline rule + tiny letterspaced label
B	Iconic metaphor	Stat with a physical analogy (watts → bulb, compute → chip)	Monochrome line-drawn SVG + figure stacked below; SVG path draws in
C	Side-by-side comparison	Ratios / magnitude contrasts ("20W vs 20kW")	Two cards with ×N between; hero card flips to paper-on-ink
D	Annotated pullout	Stat tied to the word that mentions it	Thin line draws from caption word up to figure floating in frame
E	Radial gauge/ring	Percentages, rates, fill values	Thin ring fills to value; figure centered, soft glow on active arc
F	Odometer count-up	Big integers that benefit from "watching the number arrive"	Digits in cells, GSAP count-up tween
G	Inline text takeover	Stat word inside the caption chunk	The caption word scales to 3-4× and holds while the line continues below
H	Full-frame stat moment	Showstopper figure worth 1.5-2s of silence	Captions fade, face softens, figure fills the frame; sibling of §7 pull-quote

Each shape has a code scaffold in .claude/skills/tejas-overlays/stat-shapes/ — open and adapt per beat. If none fit, invent one: use warm mono, Geist, spring motion, thin borders.

Rule of thumb: if you can summarize the figure's role in two words ("hero number", "ratio punch", "metaphor land", "milestone arrive"), a shape jumps out. If you can't, you're not ready to author the beat.

Checklist before moving on

• Overlay lives on a data-track-index that doesn't collide with captions / grain / other overlays
• Overlay has class="clip" (unless it's a <video> or <audio>)
• Enter AND exit tweens defined — no stuck-on-screen elements
• Colors only from --tejas-* tokens
• Fonts only Geist Sans / Geist Mono (via --font-tejas-sans / --font-tejas-mono)
• No shader blocks installed for this overlay
• If it's a stat: you can name its role in 2 words