BRIEFING INTERACTIVE — SKILL FILE

For Building Recording Visuals for Screen-Recorded Briefings

WHAT THIS SKILL BUILDS

A dark-themed, scrolling HTML page that the practice owner opens in Chrome, screen-records, and narrates over. The recording becomes the briefing video. The page is the visual layer — everything the viewer sees. The voiceover is the audio layer — everything the viewer hears. Together they form a 10–20 minute briefing.

This is NOT:

• A landing page (that's the timer-based briefing wrapper — separate template)
• An interactive thought leadership article (those use light/dark alternation and are read, not recorded)
• A micro-tool (those take user input and produce output)
• A framework explainer (the article already does that)

This IS:

• A behind-the-scenes client walkthrough
• A visual narrative the presenter scrolls and hovers through while talking
• A case study told as a story, with interactive elements that reveal detail on hover

Golden examples:

• The Proof Gap Briefing (proof-gap-briefing.html)
• The Silent List Briefing (silent-list-briefing-interactive.html)

THE CORE DISTINCTION: BEHIND THE SCENES, NOT FRAMEWORK

The most important thing about this format: the briefing is not the article restated with hover effects.

The article teaches the framework. The briefing shows what happened when the framework was applied to a real client.

The test: If you removed the article from existence, would the briefing still make sense as a standalone story? It should. If someone watches the briefing first and reads the article second, the article should feel like the methodology behind the story they just watched — not a repeat.

Content that belongs in the briefing:

• Specific client details (practice type, revenue, team size, what they thought the problem was)
• What you actually did together (the discovery process, the aha moments, what surprised them)
• Direct quotes from the client
• Specific numbers from their engagement (not industry averages)
• What you saw that they couldn't see from inside
• Where the work stopped and why

Content that does NOT belong in the briefing:

• Framework definitions (the article covers this)
• Industry statistics or research
• Abstract categorization (wound types as a taxonomy vs. wound types as they appeared in this practice)
• Generic advice or recommendations
• The same comparison tables or visualizations from the article

INTERACTION MODEL

All interactions are hover-driven or scroll-triggered. There are zero buttons, zero toggles, zero "Reveal Next" controls. The presenter controls pacing by scrolling and hovering.

Why No Buttons

This page is a recording visual. The presenter scrolls through it while narrating. Buttons create awkward pauses on video ("now I'm going to click this button..."). Hover effects are invisible to the viewer — they just see content appear as the presenter moves through the page. Scroll reveals create natural pacing as elements cascade in.

Two Interaction Types

1. Scroll Reveal (IntersectionObserver) Elements fade in and slide up when they enter the viewport. Used for all content. Staggered delays on list items create a cascade effect.

// Standard reveal
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
        }
    });
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Stagger reveal (for list items with data-delay attributes)
const staggerObs = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.querySelectorAll('[data-delay]').forEach(child => {
                setTimeout(() => child.classList.add('visible'), parseInt(child.dataset.delay));
            });
            staggerObs.unobserve(entry.target);
        }
    });
}, { threshold: 0.2 });

2. Hover Expand (CSS-only) Content is hidden with max-height: 0; opacity: 0; overflow: hidden. On :hover of the parent container, detail panels expand. The presenter hovers over each item while narrating what it means.

.item-detail {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.item:hover .item-detail { max-height: 300px; opacity: 1; }

INTERACTION PATTERN LIBRARY

These are the reusable interactive components. Every briefing uses a subset of these. Match the pattern to what the narrative needs to show.

Pattern 1: Profile Cards

Shows: Who the client is. The practice snapshot. How: Grid of 5 cards (practice type, revenue, team/clients, current approach, the problem). Cards scroll-stagger in with delays. Last card is red (the problem card). Hover dims siblings and highlights the hovered card.

When to use: Always. Every briefing opens with a practice profile. This grounds the story in a real person, not an abstraction.

Pattern 2: Stagger List

Shows: Items that accumulate — categories, questions, discovery items. How: Rows with left gold border, scroll-stagger in at 60% opacity. Hover brings to full opacity with gold border and background tint. Optional: right-aligned numbers.

When to use: When the narrative involves counting, listing, or discovering items one at a time.

Pattern 3: Summary Numbers

Shows: A reveal moment — guess vs. reality, before/after, key metrics. How: Centered text elements with stagger delays. Numbers in Cormorant Garamond. Key number in gold. Coda line in italic stone.

When to use: After a counting sequence or at the end of a results sequence. The "hold for a beat" moment.

Pattern 4: Hover-Expand Items

Shows: Detail behind a summary line — what you found in each category, what the client skipped, what each layer means. How: Bordered rows with title visible. Hover expands hidden detail text below the title. Gold border + background tint on hover.

When to use: When each item in a list has a story behind it that the presenter will narrate while hovering.

Pattern 5: Side-by-Side Zones

Shows: Before/after, surface/real, standard/matched — two versions of the same thing. How: Two-column grid inside a bordered container. Left column (before/surface/standard) is always visible in muted style. Right column (after/real/matched) content is dimmed and offset; hover reveals it with gold tint.

When to use: When showing what the client had vs. what you built together. The contrast IS the value.

Pattern 6: Comparison Block

Shows: Two numbers that tell the whole story. How: Two-column grid with center border. Left number muted, right number gold. Hover highlights each side.

When to use: When two numbers in juxtaposition make the argument (ad spend vs. recovered revenue, time before vs. after).

Pattern 7: Layer Stack

Shows: A framework or progression — what was done, what's still needed, three phases. How: Stacked rows with left tag label and body. Hover expands description. Gold border + background on hover.

When to use: When showing the gap between what the client could do alone and what requires a system.

Pattern 8: Offer Cards

Shows: Two paths forward (tool + diagnostic, or two options). How: Two-column grid. Primary card has gold border and dim background. Hover reveals description text. Hover lifts card.

When to use: Always. Every briefing ends with two starting points.

Pattern 9: Inline Quote

Shows: The client's own words. How: Gold left border, dim gold background, Cormorant Garamond italic.

When to use: Direct client quotes that reveal their mindset — what they believed before the discovery, their reaction to a finding.

Pattern 10: Big Quote

Shows: The briefing's most quotable line. How: Centered, Cormorant Garamond italic, large, with gold for the key word. Bordered top and bottom.

:root {
    --gold: #b79d64;
    --gold-light: #c4aa74;
    --gold-dim: rgba(183, 157, 100, 0.08);
    --gold-border: rgba(183, 157, 100, 0.25);
    --charcoal: #141414;
    --charcoal-light: #1e1e1e;
    --charcoal-card: #1a1a1a;
    --cream: #f5f4f0;
    --cream-dim: rgba(245, 244, 240, 0.7);
    --cream-muted: rgba(245, 244, 240, 0.55);
    --stone: #8a8680;
    --red: #c45a4a;
    --red-dim: rgba(196, 90, 74, 0.12);
    --red-border: rgba(196, 90, 74, 0.3);
}

<nav>
    <div class="nav-inner">
        <a class="logo" href="https://advisoryos.ai">
            <img src="[Advisory OS icon URL]" alt="Advisory OS">
            <span class="logo-text">Advisory OS</span>
        </a>
        <span class="nav-tag">Briefing</span>
    </div>
</nav>