Cinematic Cross-Fade Block — Foundational Before/After Variant

What it does

• Two-panel stage with progress dot — before and after panels share the same space; a small indicator shows which is currently visible
• One-click crossfade reveal — clicking 'Reveal the shift' fades the before panel out and the after panel in with calm, deliberate timing
• Signature headline rise — the after-panel headline lifts gently from below as it appears, giving the moment a cinematic punch
• Staggered belief cards — supporting cards slide and fade in one after another so the body content lands in rhythm rather than popping flat
• Show-before toggle — once revealed, a button lets the learner flip back to compare the two panels as many times as they want
• Keyboard navigation and reduced-motion fallback — left/right arrow keys cycle the panels; learners who prefer less motion get an instant swap

Best use cases

• Coaching and consulting — old-belief / new-belief reveals at the start of a transformation lesson
• Sales and negotiation training — the line they would have used vs. the line that actually closes
• Mindset and habit work — naming the shift is the lesson, and this block names it cleanly
• Strategy frameworks — what beginners try vs. what experts do instead
• Marketing and copy training — bad-headline / good-headline before-and-after reveals

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — six color slots cover page background, surface, ink, muted text, an accent for the 'after' state, and a warmer tone for the 'before'. Swap the accent to match your single brand color.
• Fonts — single-font setup designed for a clean modern feel; drop in the typeface that matches your brand register
• Copy — lesson meta + title + lede; before panel (eyebrow, headline, lede, three belief items); after panel (same scaffold); reveal button label; teaching note
• Images — type-only by default, but each belief card can host a small icon if you want extra visual texture
• Behavior — three timing controls: how long the before fades out, how long the after fades in, and the delay on the headline rise. Tighten for snappier, loosen for more ceremony.