/yuv-video-director

YUV.AI Neon Phoenix — Frame (video / frame layer)

Overview

YUV.AI at frame scale is a neon command deck: a rich-black ground alive with the neural-net phoenix — glowing graph nodes joined by faint edges, seeded along a phoenix silhouette, graded amber → pink → violet → cyan. Over that environment, composition is built from hard region splits (ink ↔ white ↔ charcoal) and Anton uppercase headlines, with hot pink and electric cyan in a strict lead/counter relationship — one leads each frame, the other accents. Glow is the atmosphere; it fires on the hero and the primary CTA, not on everything.

The voice: Anton — tall condensed caps, uppercase, letter-spacing: 0 (Anton is already condensed; never negative except a hair at jumbo) — carries every headline, stat, and title; Inter carries body and labels; JetBrains Mono carries instrument readouts. Anton declares; Inter explains; Mono measures.

Key characteristics at frame scale:

• Neon two-canvas — {colors.ink} OR {colors.white}, never grey. Pick one per frame.
• Neural-net phoenix as the living environment + the brand mark (the rainbow lives here).
• Lead / counter — pink leads OR cyan leads; never both at full strength on one frame.
• Anton uppercase + Inter + Mono. Headlines ink-on-white / white-on-ink / pink-with-glow.
• Glow in moderation — hero + primary CTA + 1–2 accents. Strip-mall neon is failure.
• Flat — zero shadow, radius only on circles (nodes, nav) and pills (CTAs).
• Fly High throughline — flight metaphors, HUD strips, phoenix mark, "LET'S FLY HIGH" watermark.

Frame Craft Bar

Three eyeball tests gate every frame:

• Squint — one element dominates at 3–6× its neighbor: the hero-title/jumbo-feature, a stat-numeral, or the phoenix mark. Never two rival headlines.
• Silence — frames read 40–55% empty (the neural-net field fills negative space, not more text); the catalog is the one dense exception.
• Restraint — pink or cyan leads; rainbow ONLY in the phoenix/neural-net field; glow on hero + CTA only.
• Reference — aim at a neon mission-control HUD / Tron title card (glowing graph on black, condensed caps as architecture); failure looks like a soft drop-shadowed SaaS card deck.

The Frame

• Primary: 1920×1080 (16:9). Display sizes authored in cqw (px ÷ 1920 × 100 = cqw).
• Vertical: 1080×1920 (9:16). Square: 1080×1080 (1:1).
• Safe area: 5cqw (pad-x). The neural-net field bleeds full-frame behind everything.

The container law. Every frame ground sets container-type: size; frame-relative units are cqw/cqh against it — never vw. In a fixed-1920 HyperFrames composition you may author in px directly (cqw × 19.2 = px); keep the ratios.

Colors

Two canvases: rich-black {colors.ink} (default — the neon ground) or {colors.white} (light marketing / about). Never #F1F2F2 grey (that's Decks mode), never #FAFAF7 (Warm Editorial). Pink and cyan in lead/counter: if pink leads a frame, cyan appears only on small high- attention marks (a focus ring, one data point), and vice-versa. The only UI gradient is pink → cyan (progress bars, underlines, small surfaces). Rainbow (amber→pink→violet→cyan) is reserved for the phoenix mark and the neural-net field — never a UI wash. Headlines: white on ink, ink on white, or pink-with-glow. Never grey headlines (grey is body/meta).

Typography

Two ramps. The reading ramp (Inter body 1.05cqw, body-light 1.5cqw, labels/Mono in px) carries copy, eyebrows, and readouts; the display ramp (Anton, card-title 1.9cqw → jumbo-feature 10cqw) carries every headline and stat.

• Legibility floor: any load-bearing line ≥ 1.4cqw (~27px); px labels are chrome only.
• Fit-to-measure: ≤3 words → hero-title/jumbo-feature; 4–6 → section-headline; 7+ → column-title. Cap the block ≤ 78cqw.
• Anton is uppercase, letter-spacing: 0 (never negative; a hair -0.01em only at jumbo ≥180px-equiv). Inter labels uppercase, 3–4px tracked. Mono readouts 2px tracked. No italic, no sentence-case Anton.

Depth & Surface

Flat, with hard edges and neon glow as the only "depth":

• Hard region boundaries — primary structural device.
• Accent borders — 4px pink/cyan left (lead cards), 4px top (catalog cards).
• Glow — moderated bloom on hero text, primary CTA, phoenix mark.
• Neural-net field — the living texture behind content (never a literal depth/shadow).

Ceiling: no box-shadow as elevation, no rounded rectangle, no rainbow UI wash, no grey canvas.

Shapes

• 0 radius on every rectangle — regions, cards, panels, accent lines, HUD.
• 999px on pills (CTAs) only. 50% on circles — neural-net nodes, nav dots.

Components

• neural-net-field — the signature environment + brand mark (rainbow lives here).
• region-split — the layout device; ink ↔ white ↔ charcoal at a hard edge.
• card (4px pink/cyan stripe, flat) / cta (pill) / accent-line (pink, or pink→cyan progress).
• glow — moderated bloom. hud-strip — the Fly High instrument throughline. phoenix-mark — watermark or hero.

Frame Treatments

Recipe per plate: ground · composes · focal · chrome · accent · silence · density. Lean centered where the move allows; vary anchor; one idea per frame.

1 · Neural-Net Phoenix Cover (identity · move: living field · centered)

Ground full {colors.ink} with the neural-net-field alive behind. Composes neural-net-field, hero-title, section-label, hud-strip, phoenix-mark. Focal the hero-title (2 lines) centered, line two in {colors.pink} with glow; the phoenix mark forms / hovers behind. Chrome a cyan section-label eyebrow above; a HUD strip along the bottom. Accent pink leads, cyan eyebrow counters. Silence the field fills the negative space; ~50% type-empty. Density sparse.

2 · Feature Stat (anchor · move: scale + glow · left)

Ground {colors.ink}, field dimmed. Composes stat-numeral/jumbo-feature, section-label, body-light. Focal a stat-numeral or 2-line headline, pink-with-glow OR white, left-anchored. Chrome an Inter section-label eyebrow; an optional Inter-300 support line ≤44cqw. Accent pink lead, one cyan mark. Silence ~45% empty. Density sparse.

3 · Statement (voice · move: panel split · giant type)

Ground 40/60 split — {colors.charcoal} panel + {colors.ink} field. Composes region-split, section-headline, accent-line. Focal a 2–3 line statement in white, one key word pink-with-glow. Chrome a pink accent-line above; small Mono attribution. Accent pink line + pink word. Density sparse.

4 · Three-Column Catalog (the pieces · move: density — the dense frame · centered head)

Ground {colors.ink}, pad-x. Composes section-headline, 3–4× card. Focal a centered section-headline over cards (4px pink/cyan top stripe, Anton title, Inter body, one Mono tag). Accent alternating pink/cyan stripes; glow off (cards are calm). Silence tight — the density exception. Density dense-exception.

5 · Pipeline Timeline (process · move: horizontal rail · left→right)

Ground {colors.ink}, pad-x. Composes section-headline, a pink→cyan rail with cyan nodes (ink halos) + Anton stage labels. Focal the rail with 4–5 stages. Accent the pink→cyan gradient rail (the sanctioned UI gradient). Density standard.

6 · Closing Plate (closer · move: phoenix + sign-off · centered)

Ground {colors.ink}, neural-net-field re-igniting. Composes phoenix-mark, hero-title, accent-line, section-label, hud-strip. Focal the phoenix mark + "LET'S FLY HIGH" sign-off, centered, pink-with-glow. Chrome website + socials in Mono; HUD reads LANDED. Accent pink lead. Silence ~55% empty; field carries it. Density sparse. (Only the final frame may fade out.)

Composition Rules

Do

• Keep the canvas ink OR white, never grey; let the neural-net field fill negative space.
• Pick one lead (pink or cyan) per frame; the other only accents.
• Set every Anton element uppercase, letter-spacing: 0; Inter labels uppercase 3–4px; Mono 2px.
• Reserve rainbow for the phoenix mark + neural-net field; keep UI gradients pink→cyan.
• Fire glow on the hero + primary CTA + 1–2 accents only.
• Carry one Fly High throughline per video — HUD strip, phoenix mark, "let's fly high", flight copy.

Don't

• Don't use a grey canvas, a fourth surface, a drop-shadow elevation, or a rounded rectangle.
• Don't run pink AND cyan both at full strength on one frame.
• Don't spill rainbow into UI fills/washes (phoenix + field only).
• Don't glow every element (strip-mall neon). Don't set Anton sentence-case or negative-tracked.
• Don't drop a load-bearing line below 1.4cqw.

Aspect-Ratio Behavior

Hold 5cqw on the short edge; re-step display per ratio so no line drops below 1.4cqw.

Numerals & Claims (hard rule)

Never invent figures, stats, dates, or counts. Render slots as — figure —, {metric}, N×. Real numerals appear only when the script supplies them. Node-graph counts are decorative.

Pre-Render Self-Audit

• Canvas — ink OR white, never grey; neural-net field present where the ground is ink.
• Squint — one focal per frame dominates 3–6×; never two rival headlines.
• Lead — pink or cyan leads; the other only accents; rainbow only in phoenix/field.
• Type — Anton uppercase ls:0, fit-to-measure, ≥1.4cqw floor; Inter/Mono labels tracked.
• Glow — hero + CTA + 1–2 accents only; never every element; never text-shadow AND box-shadow on one element.
• Depth — 0 elevation shadow, 0 rounded rectangle; pills + circles only.
• Throughline — one Fly High motif present (HUD / phoenix / flight copy / "let's fly high").
• Fabrication — every numeral traces to the script, else placeholder.

Known Gaps

• Motion is composition-adjacent here — this frame spec defines look + layout; HyperFrames GSAP timelines carry timing/transitions. The neural-net field MUST be seekable (clock-driven), never wall-clock.
• Anton + Inter + JetBrains Mono via Google Fonts (HyperFrames embeds them). Hebrew swaps Anton→Rubik, Inter→Assistant.
• 9:16 / 1:1 are guidance, not pixel-locked; verify the 1.4cqw legibility floor per ratio.
• The neural-net field, glow, and pink→cyan gradients are CSS/canvas-only; the phoenix mark art is the one external asset.