What's new modal

When to use

Show a What's new modal on first open after a meaningful software update — not on every patch, and not before users have context for why it matters. It replaces release-note walls with three concrete jobs the update unlocks (plan, create, refine). Works especially well for AI assistants and creative tools where value depends on the task, not a feature checklist.

Anatomy

New badge (ties the moment to the release) and dismiss control (respects agency — mark seen, don't nag). Headline in display serif; subheadline in muted sans sets scope. A fit-to-content pill tab menu switches example use cases — active tab gets a clear outline. Preview card swaps per tab with realistic sample output. Footer: primary CTA per tab, secondary "Do it later" to dismiss, tertiary "View release notes" for the changelog.

Accessibility

Use native tab semantics with arrow-key navigation between use cases. Announce tab changes to screen readers. Keep preview content readable at 200% zoom. Respect prefers-reduced-motion: cross-fade or instant swap instead of sliding carousels. Ensure dismiss and primary CTA meet 44×44pt touch targets.

Reference

The interactive demo recreates Anthropic's Claude update spotlight (tabbed trip, recipe, and email previews). Screenshots from that release are the reference — swap headline, examples, and CTAs for your product.